Next.js postcss font-variant overwriting

user_4299132 0
Viewed 96

I am trying to set font-variant: initial; on some CSS selectors, but when it gets compiled, it is always overwritten with font-variant: normal;. This is the Next.js project with default settings, I haven't changed anything regarding the build process. When I run the next dev script it works well, but when I run next build followed by next start (as in production), it gets overridden.

From the Next.js documentation I read that they do have some default postcss processing which includes font-variant:

Relevant part:

Out of the box, with no configuration, Next.js compiles CSS with the following transformations:
3. New CSS features are automatically compiled for Internet Explorer 11 compatibility

  • font-variant Property

How can I turn it off so that the value stays the same after compiling?

postcss next.js css
1 Answers

You can overwrite the default PostCSS configuration by adding your own postcss.config.json to the project with the font-variant transformation disabled.

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