Linaria: Add documentation on how to integrate Linaria

[jayu]

Describe the enhancement

Firstly we add more chapters to docs/CONFIGURATION.md to group working integrations

• [ ] Next.js heading and link to with-linaria example
• [x] Gatsby.js heading with a link to gatsby-plugin-linaria and optional custom config. Custom config can base on this gist
• [ ] CRA craco plugin https://github.com/jedmao/craco-linaria
• [x] Preact - based on config posted in https://github.com/callstack/linaria/issues/434#issuecomment-596817660
• [x] Svelte - based on configs posted in https://github.com/callstack/linaria/issues/435#issuecomment-611226593 (in progress)

Then modify Setup section in README and list there all possible working integrations from docs/CONFIGURATION.md with links obviously.

I'm not sure what to do with Linaria parcel plugin. I mean we can link it anyway, but I don't know if it is stable.

Motivation

There are tool/frameworks that work with linaria but integrations are not documented

Possible implementations

Related Issues

434 , #435

[amankkg]

What about Snowpack integration?

There is a statement in their docs which seems to be false in case of Linaria:

Snowpack also supports any popular CSS-in-JS library

[arendjr]

@amankkg I made an attempt to integrate Linaria with Snowpack, using the following plugin:

const babel = require("@babel/core");
const fs = require("fs");
const path = require("path");
const { promisify } = require("util");
const transform = require("linaria/lib/transform");

const readFile = promisify(fs.readFile);

module.exports = function (snowpackConfig, pluginOptions) {
  const { sourceMap, preprocessor, ...rest } = pluginOptions;

  return {
    name: "snowpack-linaria-plugin",
    resolve: {
      input: [".js", ".jsx", ".ts", ".tsx", ".mjs"],
      output: [".js", ".css"],
    },
    async load({ filePath }) {
      const contents = await readFile(filePath, "utf-8");
      const result = transform(contents, {
        filename: path.basename(filePath),
        preprocessor,
        pluginOptions: rest,
      });

      if (!result.cssText) {
        return {
          ".js": await babel.transformAsync(contents, { filename: filePath }),
        };
      }

      return {
        ".js": await babel.transformAsync(result.code, {
          filename: filePath,
          inputSourceMap: result.sourceMap,
        }),
        ".css": { code: result.cssText, map: result.cssSourceMapText },
      };
    },
  };
};

It's a little bit unfortunate I need to manually invoke Babel, but it mostly seems to do the trick... Except I now run into a runtime issue: TypeError: validAttr is not a function. I have tracked this to react/styled.ts where the import of validAttr seems to be miscompiled (it correctly inlines the dependency, but then tries to take the .default property of that dependency, which doesn't exist because it's not an exports object). At first sight it would appear a Snowpack issue, but my gut says more should be broken if that were the case, so I'm not sure where to look now.

[zachintosh]

@arendjr Have you had any luck since? Would love to see linaria working in snowpack.

[arendjr]

No, to be honest, I gave up on it for now.