Initial commit

.gitignore

@@ -0,0 +1 @@
+node_modules/

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/middleware');

lib/middleware.js

@@ -0,0 +1,128 @@
+const path = require('path');
+const fs = require('fs');
+const css = require('css');
+
+class CssProcessor {
+  constructor(params) {
+    this.fileName = params.fileName;
+  }
+
+  generateJS(cb) {
+    fs.readFile(this.fileName, 'utf8', (err, cssContent) => {
+      const obj = css.parse(cssContent);
+      const sheet = obj.stylesheet;
+
+      const cssLines = [];
+      const o = {};
+
+      for(let i=0; i < sheet.rules.length; i++) {
+        const rule = sheet.rules[i];
+        for(let k = 0; k < rule.selectors.length; k++) {
+          const keys = (rule.selectors[k].match(/\.([A-Za-z0-9]+)/g)||[]);
+          for(let l = 0; l < keys.length; l++) {
+            if(keys[l].length) {
+              o[keys[l].substring(1)] = keys[l].replace(/\.([A-Za-z0-9]+)/g, '._$1_ojfe').substring(1);
+            }
+          }
+          rule.selectors[k] = rule.selectors[k].replace(/\.([A-Za-z0-9]+)/g, '._$1_ojfe').replace(/\s+/g, ' ');
+        }
+        cssLines.push(rule.selectors.join(' ') + ' {');
+          for(let j = 0; j < rule.declarations.length; j++) {
+            const declaration = rule.declarations[j];
+            if(declaration.type == 'declaration') {
+              cssLines.push(`  ${declaration.property}: ${declaration.value};`);
+            }
+          }
+          cssLines.push('}');
+      }
+      //console.log('OBJECT:\n' + JSON.stringify(o, 0, '  ') + '\n\nCSS:\n' + cssLines.join('\n'));
+
+      const jsContent = `
+export default ${JSON.stringify(o, null, 2)};
+
+const stylesToInject = \`${cssLines.join('\n').replace(/\`/g,'\\`')}\`;
+
+console.log(stylesToInject);
+`;
+      return cb(err, jsContent);
+    });
+  }
+//const obj = css.parse(fs.readFile...);
+}
+
+module.exports = (staticPath) => {
+  return (req, res, next) => {
+    if (/\.css$/.test(req.path)) {
+      const fileName = path.join(staticPath, req.path);
+      const cssProcessor = new CssProcessor({fileName});
+
+      cssProcessor.generateJS((err, jsContent) => {
+
+        if(err) {
+          if(err.code == 'ENOENT') {
+            next();
+          }else {
+            res.status(500);
+            res.send(err.toString());
+          }
+        } else {
+          res.setHeader('Content-type', 'text/javascript');
+          res.send(jsContent);
+        }
+      });
+    } else {
+      next();
+    }
+  };
+}
+
+
+
+/*
+var css = require('css');
+var obj = css.parse(`
+body { 
+  font-size: 12px; 
+}
+
+.test {
+  background: black;
+}
+
+.test.abc:not(   .mehmet)         >div,      .mehmet:first-child {
+  color: red;
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
+}
+
+
+
+`, {});
+
+var sheet = obj.stylesheet;
+
+const cssLines = [];
+const o = {};
+
+for(let i=0; i < sheet.rules.length; i++) {
+  const rule = sheet.rules[i];
+  for(let k = 0; k < rule.selectors.length; k++) {
+    const keys = (rule.selectors[k].match(/\.([A-Za-z0-9]+)/g)||[]);
+    for(let l = 0; l < keys.length; l++) {
+      if(keys[l].length) {
+        o[keys[l].substring(1)] = keys[l].replace(/\.([A-Za-z0-9]+)/g, '._$1_ojfe').substring(1);
+      }
+    }
+    rule.selectors[k] = rule.selectors[k].replace(/\.([A-Za-z0-9]+)/g, '._$1_ojfe').replace(/\s+/g, ' ');
+  }
+  cssLines.push(rule.selectors.join(' ') + ' {');
+  for(let j = 0; j < rule.declarations.length; j++) {
+    const declaration = rule.declarations[j];
+    if(declaration.type == 'declaration') {
+      cssLines.push(`  ${declaration.property}: ${declaration.value};`);
+    }
+  }
+  cssLines.push('}');
+}
+  console.log('OBJECT:\n' + JSON.stringify(o, 0, '  ') + '\n\nCSS:\n' + cssLines.join('\n'));
+
+*/

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "css-server",
+  "version": "1.0.0",
+  "description": "On the fly css module builder",
+  "main": "index.js",
+  "author": "Bulent Vural <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "express": "^4.16.3"
+  },
+  "dependencies": {
+    "css": "^2.2.1"
+  }
+}

test/public/ExampleClass.css

@@ -0,0 +1,5 @@
+.exampleSelector {
+  background-color: red;
+  font-family: 'Ari`al';
+}
+

test/public/ExampleClass.js

@@ -0,0 +1,7 @@
+import styles from './ExampleClass.css';
+
+export default class ExampleClass {
+  constructor() {
+    console.log(styles.exampleSelector);
+  }
+}

test/public/index.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  </head>
+  <body>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

test/public/index.js

@@ -0,0 +1,3 @@
+import ExampleClass from './ExampleClass.js';
+
+const exampleClass = new ExampleClass();

test/test.js

@@ -0,0 +1,11 @@
+const express = require('express');
+const cssServer = require('../');
+
+const path = require('path');
+const app = express();
+
+const staticPath = path.join(__dirname, './public');
+app.use(cssServer(staticPath));
+app.use(express.static(staticPath));
+
+app.listen(3000);