autoprefixer?

[serapath]

tl;dr are there plans to support autoprefixer or do you suggest a seperate module that can be combined with csjs to achieve this?

Maybe there is a smart way to just add the vendor prefixes necessary by the current browser. I bookmarked two related projects:

• https://github.com/LeaVerou/prefixfree
• https://github.com/jsstyles/css-vendor

---

Wow, I just revisted https://github.com/MicheleBertoli/css-in-js to check if there are any new projects and stumbled across yours :-) Currently I'm using jss because even though it seems a bit big and clunky it has support for all the featuers and comes with a css2jss thing that i used to translate css written in an es6 template string into jss. It kind of works, but this project of yours looks very very promising and seems to be the only one that goes straight for es6 templates which i feel are the way to go, because javascript objects are too clunky to really write css with them. But in real world projects it's pretty important to have some kind of autoprefixer working, otherwise what i save in work using this very awesome css-in-js technique, i pay by manually prefixing all the things with the appropriate vendor prefixes...

[rtsao]

Yes, I agree that automatic vendor prefixing would be really nice.

It looks like https://leaverou.github.io/prefixfree/ should work with CSJS and insert-css (although I have yet to test it out).

The way I've thought about accomplishing vendor prefixing is to create tooling that can extract a CSS bundle at build time (e.g. a Browserify/Webpack/Babel plugin). These plugins would work if you are using CSJS wholly in the manner of CSS Modules, where your styles are essentially "static" (e.g. all CSJS is exported directly as a module). Then you could just use https://github.com/postcss/autoprefixer as normal on the extracted CSS. I'm currently finishing up a basic browserify plugin for CSS extraction.

There are some relatively lightweight vendor prefixing utilities for style objects, e.g. https://github.com/rofrischmann/inline-style-prefixer, but for CSS, I was operating under the impression autoprefixer was basically the only game in town. I'll have to take a deeper look at prefixfree.

Another possibility is a Babel plugin that would run autoprefixer on the contents of tagged csjs template literals (while preserving interpolations). This would work in most cases, but dynamically generated property names and values, for example, would not be processed.

[rtsao]

@serapath I have just finished the initial version of https://github.com/rtsao/babel-plugin-csjs-postcss which I described above (as the last possibility).

[serapath]

I feel, a huge advantage of the css-in-js approach is to dynamically change css based on user interactions. The css generated, once generated client side, can be cached to avoid to generate it again every time a user visits the page.
But the wins that seem to be only accomplishable with css-in-js are to actually auto-prefix only what's necessary with the current browser environment of a specific user and update a style sheet dynamically based on user interaction.
Falling back on some post processing (babel/postcss/rework/....) kind of fails to accomplish that.
Why would I switch to css-in-js in the first place if post-css with all its plugins already exists? Maybe I can use javascript instead of learning some other css pre/post-processing language, but I'd really like to get the benefits of manipulating css at runtime when i'm already using some css-in-js solution :)

Other than that, i'll try the babel plugin anyway :-) cool

[rtsao]

Yeah, the Babel plugin only works when the properties/values that need be prefixed are known at build-time (however everything else can be dynamic at runtime). This works in the use case where CSJS is treated as if it were "CSS Modules", where styles are mostly static, and JS is used for modules, variables, and dependency management.

Ideally, I think it would be great if vendor prefixing could fully work in the browser by the client at runtime, but I fear the existing vendor prefixing solutions might be too bulky to run on the client. However, the idea you bring up about caching the generated CSS on the client is interesting. The CSS is already hashed to generate the scoped class names, so it would be easy to know when to invalidate the cache and regenerate the CSS. Then using something large wouldn't be so bad.

That said, I think when going the fully runtime route, a library that uses inline style objects is probably more optimal, simply because there's no need to parse anything. Something like https://github.com/rtsao/scope-styles/ combined with https://github.com/rofrischmann/inline-style-prefixer or https://github.com/Khan/aphrodite might be a better choice.

[rtsao]

My feeling is including a full CSS parser would be too much, so vendor prefixing is either going to be buildtime on template strings, or some process where CSJS is converted to style objects and CSJS becomes an interface for some style object consuming library.

For now, https://github.com/rtsao/babel-plugin-csjs-postcss should work in most cases.