initial

Author: Idrinth

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/.idea

package-lock.json

@@ -0,0 +1,19 @@
+{
+  "name": "@idrinth/rollup-plugin-react-modular-css",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "tsc": "tsc",
+    "prepublishOnly": "npm run tsc"
+  },
+  "dependencies": {
+    "clean-css": "^5.3.3",
+    "rollup": "^4.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.30",
+    "@types/clean-css": "^4.2.11"
+  },
+  "private": false
+}

package.json

@@ -0,0 +1,45 @@
+import {
+    readFileSync,
+    writeFileSync,
+} from 'fs';
+import {
+    dirname,
+} from 'path';
+import CleanCSS from 'clean-css';
+import {
+    createHash,
+} from 'crypto';
+
+const minifier = new CleanCSS();
+
+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 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}'))()`,
+                    );
+                }
+                return code;
+            }
+            return null;
+        }
+    };
+}

src/index.ts

@@ -0,0 +1,12 @@
+
+const header = document.getElementsByTagName('header')[0];
+export default (hash: string, name: string) => {
+    const path = `/assets/${name}-${hash}.min.css`;
+    if (document.querySelector(`link[href='${ path }']`)) {
+        return;
+    }
+    const style= document.createElement('link');
+    style.setAttribute('rel','stylesheet');
+    style.setAttribute('href', path);
+    header.appendChild(style);
+}

src/load.ts

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "skipLibCheck": true,
+    "moduleResolution": "NodeNext",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "incremental": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "node_modules/@types/*/*.d.ts"
+  ]
+}