search

vercel / styled-jsx

Full CSS support for JSX without compromises
http://npmjs.com/styled-jsx
MIT License
7.71k stars 261 forks source link

Auto-Prefixing behind styled-jsx-plugin-sass #569

Open KingMatrix1989 opened 5 years ago

KingMatrix1989 commented 5 years ago

Hi. i am using Next.js and styled-jsx behind of styled-jsx-plugin-sass. sass in js works fine but css autoprefixing is not working.

These is my .babelrc config in Next.js:

{ "presets": [ [ "next/babel", { "styled-jsx": { "plugins": ["styled-jsx-plugin-sass"], }, } ] ] }

How can i do?

giuseppeg commented 5 years ago

styled-jsx adds prefixes, do you want to use Autoprefixer? If not can you show an example of unprefixed styled? source css and output or better a sample next.js project

nodabladam commented 4 years ago

I just tried a few things and I seem to get autoprefixing:

Before

h1 {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

After

h1.jsx-3801684716 {
    display: grid;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: linear-gradient(to bottom,white,black);
}