Allow to disable auto prefixng for extracted CSS

[satya164]

Currently the CSS will be autoprefixed to support as far as IE8. We need to be able to customize the browser target to reduce any extra code we don't need.

Perhaps we should switch to PostCSS instead of stylis as the parser so we have finer control over the extraction.

[thymikee]

With stylis it's not configurable?

[satya164]

@thymikee doesn't look like that - https://github.com/thysultan/stylis.js

[thymikee]

How about switching to PostCSS? We're already using it to extract critical CSS.
What's more, we could make Linaria work by default with Stylis, and as soon as one wants finer control over outputted CSS, switch to PostCSS.

[zamotany]

Closing this in favour of #142. There is nothing we can do about stylis. With custom preprocessor (eg PostCss) this will be achievable.

[satya164]

Stylis now has an option disable vendor prefixing with stylis.set({ prefix: false }). We should also expose the option prefix: false in our babel preset to disable vendor prefixing. For fine grained control over prefixing, consumers can use a tool like autoprefixer.

[zamotany]

We should allow to write custom preprocessor for advanced use cases, exposing each stylis option in babel preset is not a good idea.

[satya164]

Not suggesting to expose each stylis option. Disabling auto-prefixing is a common enough case and needed to avoid shipping more code than necessary to the browsers.

Custom pre-processor is nice, but will require too much setup for just disabling prefixing.

[kryops]

Just adding the following to my webpack configuration file seems to have done the trick for me:

import stylis from 'stylis'

stylis.set({ prefix: false })

[buzinas]

Not sure why this issue is closed, since it was not fixed and there is still no easy way to disable this annoying auto-prefixing provided by linaria by default. I shouldn't have to use change the pre-processor to achieve that, imo.

[satya164]

@buzinas you should be able to do this in your webpack config:

const stylis = require('stylis');

...

stylis.set({ prefix: false });

[buzinas]

Yep, that's what I did… Thanks, @satya164!

[nstepien]

Would be nice if this was documented and not buried in the issues. 🤔

[scornwell-meta]

This still doesn't work for me. Nothing I do can disable it so far, guess it's time to go digging through source code.

[victordidenko]

Still not possible to disable auto prefixing, Stylis doesn't exports set function, maybe it worked in the past, but now I don't see any configuration in it...

I've encountered issue with auto prefixing and variable name generating:
thysultan/stylis#330

If not possible to disable prefixing, maybe it is possible to adjust variable name generating rules, so variable name will not match prefixing regular expressions in Stylis?

[victordidenko]

Found an option variableNameSlug and set it to '_[componentSlug]_[index]'.
But this is hideous ._.