The surprising way Next.js disabled the production build and transformed my rgba color into hsla

I created CSS code to display grid patterns like this:

background-image {
 repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px ), 
 repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.43) 0px 1px, transparent 1px 20px )
}

However, upon building the production in Next.js, it got changed to:

background-image {
 repeating-linear-gradient(0deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px),
 repeating-linear-gradient(90deg,hsla(0,0%,100%,.43) 1px,transparent 1px 20px)
}

This alteration caused the grid pattern to not appear on the page.

Does anyone know of a solution to prevent this conversion from happening?

cssnext.jsrgba

Answer №1

Successfully updated deg to to in gradient syntax. The use of hsla remains the same with consistent results.

background-image: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.43) 0px 1px,
      transparent 1px 20px
    ),
    repeating-linear-gradient(
      to left,
      rgba(255, 255, 255, 0.43) 0px 1px,
      transparent 1px 20px
    );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VSCode does not show errors in TSX files by default

As I develop my Next.js app with TypeScript, one major issue I encounter is the lack of immediate feedback on syntax errors in .tsx files. It's frustrating to only discover errors after opening each file or waiting for the project to break down. In a ...

reactjstypescriptnext.jstsx

The HTML elements may have identical heights, but visually, one appears larger than the other

The size of the "login to enter chat" button seems to be larger than the messageBox div, despite adjusting padding and margins. What could be causing this issue? Any suggestions on how to fix this design glitch? #chatbox { width: 500px; height: ...

htmlcss

Fixing the "Package Manager Not Found" Issue when Deploying a Next.js Project on Vercel

Having created a website using Next.js and aiming to deploy it on Vercel, I encountered an error during the deployment process despite meticulously following the configuration steps. The error message displayed was: "Unable to determine package manage ...

javascriptgithubnext.jsgithub-pagesvercel

:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when mo ...

htmllistcss

Issues with Linear-Gradient functionality in NativeScript 8 on Android devices

I recently added a linear-gradient to an image in my NativeScript 8 app. Surprisingly, it seems to work perfectly on iOS, but I'm encountering some issues on Android. Despite trying solutions like using -webkit-linear-gradient(), the desired effect is ...

androidcssangularnativescript

Tips for implementing personalized/modified CSS on Vuetify components?

Let's say I've included the v-text-field component from Vuetify in my Vue component as shown below: <v-text-field v-model="email" name="email" type="email" color="#90C143" label="Email"> Upon inspecting the element, it generates regular H ...

htmlcssvue.jsvuetify.jsvue-material

Error: Unable to locate module: Could not find 'react-server-dom-webpack/client.edge'

I've been trying to incorporate server components into my nextJS project, but I keep encountering an issue when using "use server" in my component. Error message: `./node_modules/next/dist/build/webpack/loaders/next-flight-loader/action-client-wrappe ...

node.jstypescriptnext.jsmodule

When the screen size changes, the centrally aligned position of sticky elements does not stay consistent

It has come to my attention that when centrally aligning an element with position sticky, the alignment can start to malfunction upon reducing the screen width past a certain point, depending on the width of the element. Unlike position: fixed, the sticky ...

htmlcsssticky

Switching from dark mode to light mode when reloading or navigating to a new page

Hello everyone. I've successfully implemented a dark mode toggle on my website, but I'm facing an issue where the mode resets whenever I navigate to a new page or refresh the current page. Can anyone help me figure out how to prevent this from ...

javascriptreactjstypescriptnext.js

Incorporating a jQuery plugin within the NextJS framework

I am facing difficulties integrating a jQuery plug-in that is six years old. I have attempted to use the findDOMNode module from react-dom, as well as following the integration method outlined in the React Official Docs, but unfortunately, none of these m ...

jqueryreactjsnext.js

How come the icon doesn't update on the client side after being rendered on the server side?

Currently implementing a Daisyui theme switcher in my nextjs project. It's mostly working fine, but there are some issues I'm having trouble with. I've created a simple theme switch button: // Themeswitch.jsx 'use client'; impor ...

reactjsnext.jsserver-side-renderingdaisyuiclient-side-rendering

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascripthtmlcsswebkit

What is the best way to align content at the center on mobile using Bootstrap 5?

I'm struggling to center elements on mobile devices, even though they look fine on desktop. Desktop: https://i.sstatic.net/I6Rtf.png Mobile: https://i.sstatic.net/4a1zS.png Desired mobile: https://i.sstatic.net/uMrEa.png I am using Bootstrap 5.3 ...

cssbootstrap-5

Modify the text color of the sliderInput element within a Shiny application

I am attempting to change the font color of the values (1,2,3,...10) in the sliderInput() from black to white, but I am encountering difficulties. How can I connect the slider with the CSS file to achieve this? ui <- fluidPage( tags$style(type = &quo ...

cssrshiny

Identify and emphasize CSS codes within PHP files using Notepad++

I'm working with a PHP file in Notepad++ that correctly highlights PHP code. Within this file, I have JavaScript code which is properly recognized between the <script type="text/javascript"> and </script> tags. However, the CSS code withi ...

cssnotepad++

The Owl carousel animation fails to work in Chrome browser

I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm ...

javascriptjquerycsshtmlowl-carousel

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I'm currently experiencing an issue with my HTML page that involves calling two JS files for two different image sliders on the same website page. One slider works perfectly fine while the other does not. I'm confused as to whether it's perm ...

javascripthtmlcss

Issue encountered while trying to modify the color of a placeholder

Whenever I attempt to modify the placeholder's color: ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } : ...

htmlcsspseudo-elementpseudo-class

How can I implement a user and admin dashboard toggle in my Next.js application effectively?

Seeking guidance on implementing different user flows post-login in a web application. Currently, I am utilizing a method where upon successful validation, the user is categorized as an admin or regular user based on their token. Administrators are direc ...

reactjsnext.jsfront-end-optimization

Another date selection option missing from the available choices

I stumbled upon this template: . I am facing an issue where the second div I added does not display the dates, months, and years when duplicated. Here's a snippet of the script: <div class="form-date"> <label for="birth_dat ...

htmlcssbootstrap-4