feat: add Rollup plugin (#253)

Author: johanholmerin

README.md

@@ -45,7 +45,11 @@ yarn add linaria
 
 ## Setup
 
-Linaria requires webpack to build your CSS. To set up the build, add the webpack loader to your `webpack.config.js` after `babel-loader` (if you use it):
+Linaria is compatible with webpack and Rollup.
+
+### Webpack
+
+To set up the build, add the webpack loader to your `webpack.config.js` after `babel-loader` (if you use it):
 
 ```js
 module: {
@@ -85,6 +89,29 @@ module: {
 
 You also need `css-loader` and `mini-css-extract-plugin` in your pipeline. The usage is shown above.
 
+### Rollup
+
+To use linaria with Rollup you need to add it to your `rollup.config.js`, together with a plugin which handles CSS files, such as `rollup-plugin-css-only`.
+
+```js
+import linaria from 'linaria/rollup';
+import css from 'rollup-plugin-css-only';
+
+export default {
+  /* rest of your config */
+  plugins: [
+    /* rest of your plugins */
+    linaria({
+      sourceMap: process.env.NODE_ENV !== 'production'
+    }),
+    css({
+      output: 'styles.css'
+    })
+  ]
+};
+```
+
+
 Now, the CSS you write with Linaria will be extracted at build time to the `styles.css` file. Linaria automatically vendor prefixes and strips whitespace from the CSS.
 
 Linaria integrates with your CSS pipeline, so you can always perform additional operations on the CSS, for example, using [postcss](https://postcss.org/) plugins such as [clean-css](https://github.com/jakubpawlowicz/clean-css) to further minify your CSS.
@@ -171,6 +198,7 @@ Dynamic styles will be applied using CSS custom properties (aka CSS variables) a
 - [Critical CSS extraction](/docs/CRITICAL_CSS.md)
 - [Bundlers integration](/docs/BUNDLERS_INTEGRATION.md)
   - [Webpack](/docs/BUNDLERS_INTEGRATION.md#webpack)
+  - [Rollup](/docs/BUNDLERS_INTEGRATION.md#rollup)
 - [Linting](/docs/LINTING.md)
 - [How it works](/docs/HOW_IT_WORKS.md)
 - [Example](/website)

docs/BABEL_PRESET.md

@@ -1,6 +1,6 @@
 # `linaria/babel` preset
 
-The preset pre-processes and evaluates the CSS. The webpack loader uses this preset under the hood. You also might want to use this preset if you import the components outside webpack, such as on your server or in unit tests.
+The preset pre-processes and evaluates the CSS. The webpack loader and Rollup plugin use this preset under the hood. You also might want to use this preset if you import the components outside webpack or Rollup, such as on your server or in unit tests.
 
 To use this preset, add `linaria/babel` to your Babel configuration at the end of the presets list:
 

docs/BUNDLERS_INTEGRATION.md

@@ -72,3 +72,25 @@ module.exports = {
 ```
 
 This will extract the CSS from all files into a single `styles.css`. Then you need to include this file in your HTML file.
+
+## Rollup
+
+To use linaria with Rollup you need to add it to your `rollup.config.js`, together with a plugin which handles CSS files, such as `rollup-plugin-css-only`.
+
+```js
+import linaria from 'linaria/rollup';
+import css from 'rollup-plugin-css-only';
+
+export default {
+  /* rest of your config */
+  plugins: [
+    /* rest of your plugins */
+    linaria({
+      sourceMap: process.env.NODE_ENV !== 'production'
+    }),
+    css({
+      output: 'styles.css'
+    })
+  ]
+};
+```

docs/HOW_IT_WORKS.md

@@ -3,7 +3,7 @@
 Linaria consists of 2 parts:
 
 1. Babel plugin
-2. Webpack loader
+2. Webpack loader or Rollup plugin
 
 ## Babel plugin
 
@@ -161,3 +161,7 @@ But keep in mind that if you're doing SSR for your app, this won't work with SSR
 ## Webpack loader
 
 The webpack loader uses the Babel plugin internally and writes the CSS text to a CSS file, which can be picked up by `css-loader` to generate the final CSS. It's also responsible for generating the sourcemap from the metadata from the Babel plugin.
+
+## Rollup plugin
+
+The Rollup plugin also uses the Babel plugin, and adds the CSS text to Rollup, to be picked up by a CSS plugin, which can generate the final CSS. It also generates a sourcemap.

flow-typed/npm/rollup-pluginutils_v2.x.x.js

@@ -0,0 +1,6 @@
+declare module "rollup-pluginutils" {
+  declare export function createFilter(
+    include?: string | string[],
+    exclude?: string | string[]
+  ): Function;
+}

package.json

@@ -75,6 +75,7 @@
     "mkdirp": "^0.5.1",
     "postcss": "^7.0.2",
     "react-is": "^16.5.1",
+    "rollup-pluginutils": "^2.3.3",
     "source-map": "^0.7.3",
     "stylis": "^3.5.3"
   },

rollup.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/no-unresolved */
+
+module.exports = require('./lib/rollup');

src/rollup.js

@@ -0,0 +1,60 @@
+/* @flow */
+
+const { createFilter } = require('rollup-pluginutils');
+const transform = require('./transform');
+const slugify = require('./slugify');
+
+/* ::
+type RollupPluginOptions = {
+  include?: string | string[],
+  exclude?: string | string[],
+  sourceMap?: boolean,
+  evaluate?: boolean,
+  displayName?: boolean,
+}
+*/
+
+module.exports = function linaria({
+  include,
+  exclude,
+  sourceMap,
+  ...rest
+} /* :RollupPluginOptions */ = {}) {
+  const filter = createFilter(include, exclude);
+  const cssLookup = {};
+
+  return {
+    name: 'linaria',
+    load(id /* :string */) {
+      return cssLookup[id];
+    },
+    /* eslint-disable-next-line consistent-return */
+    resolveId(importee /* :string */) {
+      if (importee in cssLookup) return importee;
+    },
+    transform(code /* :string */, id /* :string */) {
+      if (!filter(id)) return;
+
+      const result = transform(id, code, rest);
+
+      if (!result.cssText) return;
+
+      let { cssText } = result;
+
+      const slug = slugify(id);
+      const filename = `${id.replace(/\.js$/, '')}_${slug}.css`;
+
+      if (sourceMap && result.cssSourceMapText) {
+        const map = Buffer.from(result.cssSourceMapText).toString('base64');
+        cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
+      }
+
+      cssLookup[filename] = cssText;
+
+      result.code += `\nimport ${JSON.stringify(filename)};\n`;
+
+      /* eslint-disable-next-line consistent-return */
+      return result.code;
+    },
+  };
+};

yarn.lock

@@ -3217,6 +3217,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
   integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
+estree-walker@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
+  integrity sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -7031,6 +7036,14 @@ rimraf@^2.5.4, rimraf@^2.6.2:
   dependencies:
     glob "^7.0.5"
 
+rollup-pluginutils@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz#3aad9b1eb3e7fe8262820818840bf091e5ae6794"
+  integrity sha512-2XZwja7b6P5q4RZ5FhyX1+f46xi1Z3qBKigLRZ6VTZjwbN0K1IFGMlwm06Uu0Emcre2Z63l77nq/pzn+KxIEoA==
+  dependencies:
+    estree-walker "^0.5.2"
+    micromatch "^2.3.11"
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"