group css output by file (#3)

fixes idrinth-api-bench/issues#1050

Author: Idrinth

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "@idrinth/rollup-plugin-react-modular-css",
-  "version": "1.1.1",
+  "name": "@idrinth-api-bench/rollup-plugin-react-modular-css",
+  "version": "1.2.0",
   "description": "Provides a plugin to split css files out separately.",
   "main": "src/index.js",
   "repository": {

package.json

@@ -13,29 +13,32 @@ export default function () {
     return {
         name: '@idrinth/rollup-plugin-react-modular-css',
         transform ( code: string, id: string ) {
-            if (id.endsWith('src/main.tsx',)) {
-                return null;
-            }
-            let modified = true;
+            const csss = [];
             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;
+                    csss.push(data);
                 }
             }
             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;
+                    csss.push(data);
                 }
             }
-            return modified ? code : null;
+            if (csss.length > 0) {
+                return writeCss(
+                    id,
+                    csss.join('\n'),
+                    code
+                        .replace(/import ["']\.\/[^"]+?\.s?css['"];/ug, ''),
+                );
+            }
+            return null;
         }
     };
 }

src/plugin.ts

@@ -8,18 +8,16 @@ import CleanCSS from 'clean-css';
 
 const minifier = new CleanCSS();
 
-export default (id: string, css: string, code: string, match: string[]): string => {
+export default (id: string, css: string, code: string): string => {
     const minified = minifier.minify(css).styles;
     const hash = createHash('sha256')
         .update(css,)
         .digest('hex',);
     const name = id
-        .replace(/\/index.[tj]sx?$/u, '',)
+        .replace(/\.[tj]sx?$/u, '',)
+        .replace(/\/index$/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/src/load.js';\n(() => load('${hash}', '${name}'))()`,
-    );
+    return `import load from '@idrinth/rollup-plugin-react-modular-css/src/load.js';\n(() => load('${hash}', '${name}'))()\n${code}`;
 }