The issue of font-variant being overwritten in Next.js when using postcss

I have been attempting to apply font-variant: initial; to some CSS selectors, but every time it is compiled, it reverts back to font-variant: normal;. This issue arises in my Next.js project with default settings, without any modifications made to the build process. Running the next dev script works fine, but upon running next build followed by next start (in a production environment), the styling gets overridden.

Consulting the Next.js documentation, I discovered that they incorporate default postcss processing which includes handling of the font-variant property:

This excerpt is particularly relevant:

With no customization, Next.js compiles CSS with certain transformations:
3. New CSS features are converted for Internet Explorer 11 compatibility

  • font-variant Property

Is there a way to disable this feature so that the value remains unchanged after compilation?

cssnext.jspostcss

Answer №1

To customize the PostCSS configuration, you have the option to create your own postcss.config.json file in your project. Make sure to disable the font-variant transformation within this file.

{
    "plugins": [
        "postcss-flexbugs-fixes",
        [
            "postcss-preset-env",
            {
                "autoprefixer": {
                    "flexbox": "no-2009"
                },
                "stage": 3,
                "features": {
                    "custom-properties": false,
                    "font-variant-property": false
                }
            }
        ]
    ]
}

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

Div not displaying images when clip-path CSS is used

I am facing an issue with the z-index of an image when using clip-path on a div. Can anyone help me solve this problem and easily adjust the z-index of the image? Thank you in advance. Below is my code snippet: .mymap { background-image: url("https:/ ...

htmlcss

Enable hovering only on the actual content within the box, not on the empty space

Currently, I am working on creating a navigation bar using flexbox. Everything seems to be functioning correctly except for one issue: when I hover over the space between my logo and the navigation links, it changes the color of my logo to the hover state ...

htmlcssflexboxhover

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

htmlcss

The complete height of the website is concealed by the mobile toolbar/menu

I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...

javascripthtmlcssreactjsresponsive-design

Cross-browser compatibility problem: Firefox not displaying layout properly

I am encountering browser problems, as well as issues when using the same browser on a different computer. The links on my website are not positioned correctly over the background. When viewing with Firefox, the opacity and positioning features are not fu ...

htmlcssbrowseropacity

Internet Explorer fails to load stylesheets for elements loaded with .load() and JavaScript functionality is also disabled

I'm using the .load() function to load my content, as shown in this code: $(document).ready(function(){ $("nav a").click(function () { $("#main-content").load($(this).attr("href") + " #content > *"); return false; }); }); The sty ...

jquerycssinternet-explorer

Customization disrupts the uniformity of button dimensions

When localizing a web application, we encountered an issue with browsers using different fonts for different languages. This led to the height of certain HTML objects changing, especially noticeable with input buttons. While this behavior is expected, how ...

htmlcsslocalization

Accessing the text content of the clicked element using vanilla JavaScript

Retrieve an item from the dropdown list and insert it into a button's value. function updateButton() { document.getElementById("ul").classList.toggle("show"); } var dropdown = document.getElementById('ul'); var items = ["HTML", "CSS", "Ja ...

javascripthtmlcss

I prefer to not have the box-shadow showing up on top of the navigation bar

Check out this cool demo: View Demo I am looking to add a shadow effect above the footer section, but not above the navigation bar. nav{ background-color: blue; height: 100px; } main{ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5); background- ...

htmlcss

What are the steps to effectively cultivate an isometric rectangular box using HTML and CSS?

Starting at the top in isometric grids, like this, can be quite convenient: https://i.sstatic.net/YFh0SRmx.jpg The code below is used to create a "3d" isometric box: body { display: flex; justify-content: center; align-items: center; } .plane { ...

htmlcssmatrixcss-transformsisometric

The front-end is receiving a CORS error from the API, despite the fact that it should be configured to

I am currently working on an API using FastAPI, and the frontend is built with next.js. However, I am facing an issue where the next.js application is unable to successfully make a post request to the API due to CORS errors. Despite setting the CORS config ...

pythonpython-3.xnext.jsfastapihttp-status-code-500

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

How does the browser interpret the CSS property transform: none?

Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome? I am looking to reset the transform; what is the best approach for this? <style> .box{ height: 100px; width: 100px; background-color: red; transition: 0.5s; transform: ...

htmlcsstransform

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

Injecting PHP variables into CSS code right from a PHP file

$a = "ABCD"; ?> <link rel='stylesheet' type='text/css' href='others.php' /> <style> .page-title { text-indent: -9999px; line-height: 0; } .page-title:afte ...

phpcss

Is it possible to create a new table in Supabase using the client side?

I am attempting to generate a new table in supabase using RPC on the client side. Within supabase, I have configured a function that will be triggered when RPC is called. This function expects the name of the table from the client side in Next.js with pag ...

reactjsnext.jssupabasesupabase-js

Avoid unnecessary renders by only updating state if it has changed from the previous state

Is there a specific React lifecycle method that can trigger a re-render only when the updated state differs from the previous state? For instance, consider the code snippet below: class App extends Component { constructor() { super(); this.state ...

javascriptreactjsnext.jsreact-class-based-component

Obtaining information from a intricate string input

{JSON.stringify(walletData.transactions, null, 2)} My goal is to extract backend data and display it as a table. The response has been converted into an array as shown below. [ { "date": "Nov 07, 2023", "description" ...

javascriptnext.js

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

I am facing an issue with the logo and navbar layout in my design. The design has 3 columns for the logo and 6 columns for the navbar, as shown in this image: https://i.stack.imgur.com/RpmJm.jpg However, when I run the code, they do not appear in the cor ...

htmlcssbootstrap-grid

Utilize JQuery to create expand and collapse functionality for a div

Trying to decipher the intricacies of this JQuery code has been quite the challenge for me. I would normally opt for a different approach, but it seems I must adhere to this particular method. My main issue lies in getting the functionality right - when cl ...

jqueryhtmlcssasp.net-mvcsass