Preprocess future-proof CSS features

[giuseppeg]

Would you be open to add a few future-proof PostCSS plugins to transpile things like custom properties, calc, custom media queries?

This could be as simple as using the postcss-cssnext plugin or set up a lil preprocessor like we did for suitcss.

If there is interest I can probably help out.

[mxstbr]

There's an ongoing discussion about this in #78!

The TL;DR by @gaearon about cssnext is:

Whatever we add, it needs to be rock-stable. I’m worried about issue lists like this: https://github.com/postcss/postcss-import/issues.

[giuseppeg]

That one is a more broad topic since it is about adding support for SASS/Less.
What I was asking here is if there is any interest in transpiling future-proof features like we already do in JavaScript with Babel.

Regarding cssnext, yep I agree that "there’s a lot of stuff there" – if we want to play it safe we could just add imports, variables (custom properties), calc, custom-media and autoprefixer.

Anyway I am fine with waiting and see where #78 goes.

[gaearon]

We are open to add transpilation for standardized features if those tools don't have large issue lists. We don't want to recommend broken tools by default.

[gaearon]

Since #78 has gone a little bit too broad, let’s use this issue for specific proposals about PostCSS plugins that are safe to enable, work great, correspond to stable specs, and give at least some of the features people want.

[giuseppeg]

Stable

• postcss-custom-media

TBD

N.B. the plugins below don't support dynamic custom properties i.e. cp are compiled to static values.

• postcss-custom-properties for simple constants (from this blog post it seems that Facebook uses them too)
• postcss-calc
• postcss-apply
• postcss-color-function
• postcss-easy-import would be great but there are some buggy edge cases – fwiw I never had issues with it. Considering that webpack creates a bundle though probably it is not needed (we can run postcss on the bundle)

Personally I also use postcss-autoreset and Stylelint but those require custom configuration.