Linaria: add babel macro for zero-config projects like create-react-app

[cellog]

Do you want to request a feature or report a bug?

I would like to request that import css from 'linaria/macro' return a babel macro, which can be used in zero-config projects like create-react-app without needing to change the babel configuration.

What is the current behavior?
requires react-app-rewired, rescripts, or other complex side thingy

Feature requested
As outlined here:
https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros

Instructions for creating a macro:
https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md

I have zero expertise in this, but based on the way you designed the babel plugin for linaria, it doesn't look like there is a whole lot of extra work to implement this as a macro, and it would be a great boon to popularity if CRA users can use linaria without ejecting.

[satya164]

We would very much like to support CRA, but it's not possible to provide a good enough DX without integrating with the bundler:

• babel-loader's cache is persisted to disk, which means if you Linaria's cache somehow got deleted/got out of sync with JS, we have no way to ensure those files are re-generated and updated, even if you restart webpack
• Without bundler integration, we cannot re-evaluate CSS when it needs to (e.g. a file you imported changed, so CSS needs to be re-evaluated to inline any updated imports), combined with babel's cache, it'll be nearly impossible to have reliable results
• When you do SSR, testing etc., you'll want to disable CSS extraction, so now you need to maintain 2 different configs for client and server
• We also internally need to do extra works to ensure files don't get written when doing things like evaluation, linting etc. by overriding your options, which leads to unnecessary complexity

Actually, the first one is a non-issue in CRA because it disables caching for files that use a macro, and without that cache, we could theoretically workaround all other problems. But it means if you're using Linaria as the primary way of styling your app, most of your code won't have a babel cache, resulting in very long build times.

So we can't support CRA in its current state.

You might be interested in this proposal which wants to add something like Linaria to CRA by default.

[jedmao]

@cellog you might be interested in this craco-linaria plugin that I just published.