Skip to content

Autoprefixer setup for next.js not adding expected vendor prefixes for text-size-adjust #23658

@ghost

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 2021-04-03 at 11 13 37

Screenshot of the css next.js generates:

Screenshot 2021-04-03 at 11 18 05

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions