Autoprefixing in runtime
See original GitHub issueMotivation
As popular CSS-in-JS libraries like Styled Components and Emotion have runtimes, they also do vendor prefixing on the fly.
Details
Consider using Stylis v4
, @emotion/stylis
or css-vendor
.
Issue Analytics
- State:
- Created 3 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Autoprefixing
Autoprefixing can be enabled through the autoprefixer PostCSS plugin. Autoprefixing writes missing CSS definitions based on your minimum browser definition. .
Read more >postcss/autoprefixer: Parse CSS and add vendor prefixes ...
Autoprefixer Cult Of Martians · PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use....
Read more >PostCSS - a tool for transforming CSS with JavaScript
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.
Read more >autoprefixer - npm
Less: less-plugin-autoprefix; Stylus: autoprefixer-stylus ... There is also standalone build for the browser or as a non-Node.js runtime.
Read more >vue.js - How Vue knows which prefix should prepend when ...
I suppose I found the answer. The code is under vue/src/platforms/web/runtime/modules/style.js line 32 const vendorNames = ['Webkit', 'Moz', ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In emotion we just dont generate invalid class names, not sure how stylis would handle it, looking at identifier in v4 I think it might just consume invalid identifier here. That’s ok from its perspective though - it’s designed to parse valid CSS
There is also https://github.com/kitten/tiny-css-prefixer - each of the listed solutions probably differs in supported properties, so you need to decide how many properties do you want to prefix 😃