version 1.1.0

Author: Idrinth

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@idrinth/rollup-plugin-react-modular-css",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Provides a plugin to split css files out separately.",
   "main": "src/index.js",
   "repository": {
@@ -14,7 +14,8 @@
   },
   "dependencies": {
     "clean-css": "^5.3.3",
-    "rollup": "^4.13.1"
+    "rollup": "^4.13.1",
+    "sass": "^1.74.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.30",

package.json

@@ -1,16 +1,13 @@
 import {
     readFileSync,
-    writeFileSync,
 } from 'fs';
 import {
     dirname,
 } from 'path';
-import CleanCSS from 'clean-css';
 import {
-    createHash,
-} from 'crypto';
-
-const minifier = new CleanCSS();
+    compileString,
+} from 'sass';
+import writeCss from './write-css.js';
 
 export default function () {
     return {
@@ -19,27 +16,26 @@ export default function () {
             if (id.endsWith('src/main.tsx',)) {
                 return null;
             }
-            let matches = code.match(/import ["']\.\/[^"]+?\.css['"];/ug);
-            if (matches) {
-                for (const match of matches) {
-                    const path = `${dirname(id)}/${match.replace(/import ['"]\.\/(.*)['"];/u, '$1',)}`;
-                    const minified = minifier.minify(readFileSync(path, 'utf8')).styles;
-                    const hash = createHash('sha256')
-                        .update(minified,)
-                        .digest('hex',);
-                    const name = id
-                        .replace(/\/[^/]+.[tj]sx?$/u, '',)
-                        .split('/',)
-                        .pop();
-                    writeFileSync(`${process.cwd()}/public/assets/${name}-${hash}.min.css`, minified, 'utf8',);
-                    code.replace(
-                        matches[0],
-                        `import load from '@idrinth/rollup-plugin-react-modular-css';\n(() => load('${hash}', '${name}'))()`,
-                    );
+            let modified = true;
+            const css = code.matchAll(/import ["']\.\/[^"]+?\.css['"];/ug);
+            if (css) {
+                for (const match of css) {
+                    const path = `${dirname(id)}/${match[0].replace(/import ['"]\.\/(.*)['"];/u, '$1',)}`;
+                    const data = readFileSync(path, 'utf8');
+                    code = writeCss(id, data, code, match,);
+                    modified = true;
+                }
+            }
+            const scss = code.matchAll(/import ["']\.\/[^"]+?\.scss['"];/ug);
+            if (scss) {
+                for (const match of scss) {
+                    const path = `${dirname(id)}/${match[0].replace(/import ['"]\.\/(.*)['"];/u, '$1',)}`;
+                    const data = compileString(readFileSync(path, 'utf8'),).css;
+                    code = writeCss(id, data, code, match,);
+                    modified = true;
                 }
-                return code;
             }
-            return null;
+            return modified ? code : null;
         }
     };
 }

src/plugin.ts

@@ -0,0 +1,25 @@
+import {
+    writeFileSync,
+} from "fs";
+import {
+    createHash,
+} from "crypto";
+import CleanCSS from "clean-css";
+
+const minifier = new CleanCSS();
+
+export default (id: string, css: string, code: string, match: string[]): string => {
+    const minified = minifier.minify(css).styles;
+    const hash = createHash('sha256')
+        .update(css,)
+        .digest('hex',);
+    const name = id
+        .replace(/\/[^/]+.[tj]sx?$/u, '',)
+        .split('/',)
+        .pop();
+    writeFileSync(`${process.cwd()}/public/assets/${name}-${hash}.min.css`, minified, 'utf8',);
+    return code.replace(
+        match[0],
+        `import load from '@idrinth/rollup-plugin-react-modular-css';\n(() => load('${hash}', '${name}'))()`,
+    );
+}