Postcss transform about styled-components

[geelen]

Yeah I get where you're head's at, but I'm reluctant to move in that direction at this moment. The way we use tagged template literals and interpolations makes it difficult to integrate any pure-CSS tool like PostCSS. Which is why we've had to break compatibility already (just minor stuff so far) to get it running where we want.

The other thing is that the two use-cases you mention (object fit polyfill & responsive text) seem far better suited to a component-driven solution (e.g. react-object-fit-cover). Styled Components presupposes both a component system & a runtime JS environment which I feel like can cover most of the things people have needed PostCSS transforms for in the past.

But depending on what #59 ends up with, it might be possible. I'm going to close this in favour of that one, but I'll keep the idea in the back of my head as I work on it.

[giuseppeg]

csjs has it – maybe you can fork theirs.

But since this library is using postcss internally already there might be a better way, for example here is how we do this in suitcss-preprocessor

[mxstbr]

Which plugins would you like to see? We're looking towards linting mostly, which others are interesting to you?

[geelen]

We're using a modified version of PostCSS internally but we may change that up in future. We're not trying to build a flexible CSS processor we're just providing a minimum of functionality (i.e. nesting). If there are particular transforms people want to use then let us know.

The good news is that a lot of the use cases for postcss transforms can be replaced with pure-JS approaches. I've just updated the docs with an example: https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md

[SeeThruHead]

The idea is not that we need a specific list of transforms for use with this library, more so that leveraging the previous work and extensive ecosystem of postcss would a great benefit to this project.

A recent, concrete example was that we were wanting to use the object-fit polyfill for certain browsers. There is already a postcss transform designed exactly for our use case. Other things might be responsive text, like we've got in rucksack. It's not really about exactly which ones I want to use, but opening up the tool to leverage an ecosystem that already exists.

One of the things I like about the babel-transform option is that it remove the need for styled-components to have any kind of preprocessing included. You could just set a few sane default postcss plugins and allow the option for addition/overwriting of postcss plugins. csjs has the right idea here in my opinion. They've made a csjs specific babel plugin for postcss transformations at build time. (That is another good reason to use a babel transform, the pure js solutions to postcss (jss has many of these types of things) tend to be designed to run at runtime on the string literal or object. A babel plugin would reduce runtime cost as well as runtime dependency weight.

I can carve out some time to look into this if it's something the styled-components team would consider integrating.

Thanks.