feat(rollup): Add rollup plugin for loading CCM

.bazelignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+examples

docs/getting-started.md

@@ -40,6 +40,33 @@ module.exports = function override(config, env) {
 
 ## Rollup
 
+To use CCM with rollup, you can modify your config with the following plugins.
+
+```sh
+yarn add @css-components/rollup @css-components/react rollup-plugin-postcss
+```
+
+```js
+// rollup.config.js
+
+import ccm from '@css-components/rollup';
+import postcss from 'rollup-plugin-postcss';
+
+export default {
+  // ...
+  plugins: [
+    // CCM Handles all the transform of the ccm.css files
+    ccm(),
+
+    // PostCSS plugin picks up the CSS and can be configured as normal
+    postcss({
+      extract: true,
+      exclude: '**/*.ccm.css',
+    }),
+  ],
+};
+```
+
 ## ESBuild
 
 ## Vite

examples/rollup-js/package.json

@@ -3,12 +3,11 @@
     "version": "1.0.0",
     "private": true,
     "scripts": {
+        "preinstall": "bazel build --config ci //packages/rollup:npm //packages/react:npm",
+
         "start": "run-s build serve",
         "serve": "http-server public",
-        "build": "run-s build:*",
-        "build:clean": "del .ccm public/dist",
-        "build:ccm": "ccm",
-        "build:rollup": "rollup -c rollup.config.js"
+        "build": "rollup -c rollup.config.js"
     },
     "devDependencies": {
         "@babel/core": "7.14.6",
@@ -27,8 +26,8 @@
         "rollup-plugin-postcss": "3.1.8"
     },
     "dependencies": {
-        "@css-components/cli": "0.0.4",
-        "@css-components/react": "0.0.4",
+        "@css-components/react": "link:../../.bazel/bin/packages/react/npm",
+        "@css-components/rollup": "link:../../.bazel/bin/packages/rollup/npm",
         "react": "17.0.2",
         "react-dom": "17.0.2"
     }

examples/rollup-js/rollup.config.js

@@ -1,30 +1,30 @@
-import babel from "@rollup/plugin-babel";
-import commonjs from "@rollup/plugin-commonjs";
-import nodeResolve from "@rollup/plugin-node-resolve";
-import replace from "@rollup/plugin-replace";
-import postcss from "rollup-plugin-postcss";
-import autoprefixer from "autoprefixer";
-import cssnano from "cssnano";
-
-import ccm from "./ccm-plugin";
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import ccm from '@css-components/rollup';
 
 export default {
-  input: "./src/index.jsx",
+  input: './src/index.jsx',
   output: {
-    dir: "./public/dist",
-    format: "esm",
+    dir: './public/dist',
+    format: 'esm',
   },
   plugins: [
     ccm(),
     commonjs(),
-    babel({ babelHelpers: "bundled" }),
-    nodeResolve({ extensions: [".js", ".jsx"] }),
+    babel({ babelHelpers: 'bundled' }),
+    nodeResolve({ extensions: ['.js', '.jsx'] }),
     replace({
-      "process.env.NODE_ENV": JSON.stringify("production"),
+      'process.env.NODE_ENV': JSON.stringify('production'),
     }),
     postcss({
       extract: true,
       plugins: [autoprefixer, cssnano],
+      exclude: '**/*.ccm.css',
     }),
   ],
 };