Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autoprefixing in runtime

See original GitHub issue

Motivation

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 GitHub Comments

1reaction

Andaristcommented, Apr 8, 2020

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

1reaction

Andaristcommented, Apr 3, 2020

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 😃

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. .

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....

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.

autoprefixer - npm

Less: less-plugin-autoprefix; Stylus: autoprefixer-stylus ... There is also standalone build for the browser or as a non-Node.js runtime.

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', ...