-
Notifications
You must be signed in to change notification settings - Fork 29.4k

Description
What version of Next.js are you using?
10.1.2
What version of Node.js are you using?
14.16.0
What browser are you using?
Safari
What operating system are you using?
macOS
How are you deploying your application?
Vercel
Describe the Bug
Next.js' autoprefixer is not prefixing the text-size-adjust
rule with webkit
and ms
, even though the browsers I support through my browserslist query mean those prefixes should be present.
Expected Behavior
So I verified with https://autoprefixer.github.io. Using "browserslist": ["defaults"],
, same as in my package.json. This:
.example {
text-size-adjust: 100%;
}
gets autoprefixed to:
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: defaults
*/
.example {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
Which is correct (the safari versions currently part of the "defaults" query expect a prefix). However, next.js produces:
.example {
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
Which is incorrect. The -webkit
and -ms
prefixes are missing.
To Reproduce
To reproduce, add "browserslist": ["defaults"],
to your package.json. Create a css module with the following rule:
.container {
text-size-adjust: 100%;
}
And use it in a component in your app. Next.js will compile that to:
[css-module-class] {
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
Screenshot of the correctly autoprefixed css:
Screenshot of the css next.js generates: