Merge pull request #174 from marcalexiei/processor-css-modules

feat: add processor css modules support

Author: elycruz

README.md

@@ -34,7 +34,7 @@ Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheti
 }
 ```
 
-Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)
+[`esModuleInterop` reference](https://www.typescriptlang.org/tsconfig#esModuleInterop)
 
 Write rollup.config.ts:
 
@@ -113,7 +113,7 @@ sass({
 });
 ```
 
-The `processor` also support object result. Reverse `css` filLed for stylesheet, the rest of the properties can be customized.
+The `processor` also support object result. Reverse `css` filled for stylesheet, the rest of the properties can be customized.
 
 ```js
 sass({
@@ -133,29 +133,60 @@ Otherwise, you could do:
 import style, { foo, bar } from 'stylesheet';
 ```
 
+#### Create CSS modules using processor `cssModules` output
+
+When returning a `cssModules` property inside a processor's output,
+the plugin will change the module's default export to the value
+of `cssModules` instead of the compiled CSS code.
+
+The following example uses [`postcss-modules`](https://www.npmjs.com/package/postcss-modules) to create css modules:
+
+```js
+import postcss from 'postcss';
+import postcssModules from 'postcss-modules';
+
+sass({
+  async processor(css, id) {
+    let cssModules = {};
+    const postcssProcessResult = await postcss([
+      postcssModules({
+        getJSON: (_, json) => {
+          if (json) cssModules = json;
+        },
+      }),
+    ]).process(css, { from: id });
+
+    return { css: postcssProcessResult.css, cssModules };
+  },
+});
+```
+
+Which allows you to write something like:
+
+```js
+import style from 'stylesheet';
+
+style['some-classes'];
+```
+
 #### Exporting sass variable to \*.js
 
-Example showing how to use [icss-utils](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars
-to your \*.js bundle:
+Example showing how to use [`icss-utils`](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars to your \*.js bundle:
 
 ```js
 const config = {
   input: 'test/fixtures/processor-promise/with-icss-exports.js',
   plugins: [
     sass({
-      processor: (css) =>
-        new Promise((resolve, reject) => {
-          const pcssRootNodeRslt = postcss.parse(css),
-            extractedIcss = extractICSS(pcssRootNodeRslt, true),
-            cleanedCss = pcssRootNodeRslt.toString(),
-            out = Object.assign({}, extractedIcss.icssExports, {
-              css: cleanedCss,
-            });
-          // console.table(extractedIcss);
-          // console.log(out);
-          resolve(out);
-        }),
-      options: sassOptions,
+      processor: (css) => {
+        const pcssRootNodeRslt = postcss.parse(css);
+        const extractedIcss = extractICSS(pcssRootNodeRslt, true);
+        const cleanedCss = pcssRootNodeRslt.toString();
+        const out = { css: cleanedCss, ...extractedIcss.icssExports };
+        // console.table(extractedIcss);
+        // console.log(out);
+        return out;
+      },
     }),
   ],
 };

package-lock.json

@@ -85,6 +85,7 @@
     "icss-utils": "^5.1.0",
     "nyc": "^17.0.0",
     "postcss": "^8.4.16",
+    "postcss-modules": "^6.0.1",
     "prettier": "^3.3.3",
     "rollup": "^1 || ^2 || ^3",
     "sinon": "^18.0.0",

package.json

@@ -10,9 +10,7 @@
 export default function insertStyle(
   css: string | undefined,
 ): string | undefined {
-  if (!css || typeof window === 'undefined') {
-    return;
-  }
+  if (!css || typeof window === 'undefined') return;
 
   const style = document.createElement('style');
   style.setAttribute('type', 'text/css');

src/insertStyle.ts

@@ -17,9 +17,14 @@ export type RollupPluginSassProcessorFnOutput =
   | string
   | {
       css: string;
+
+      /** If provided, the default export of the CSS file will be the map returned here */
+      cssModules?: Record<string, string>;
+
       // User processor might add additional exports
       [key: string]: unknown;
     };
+
 export type RollupPluginSassProcessorFn<T = RollupPluginSassProcessorFnOutput> =
   (styles: string, id: string) => Promise<T> | T;