Resolves #1

Signed-off-by: Mehmet Baker <[email protected]>
bvion · May 7, 2018 · abcce35 · abcce35
1 parent cba41be
commit abcce35
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 29 deletions.
diff --git a/lib/CssProcessor.js b/lib/CssProcessor.js
@@ -72,45 +72,47 @@ async function generate(fileName, {template, global, staticRoot, moduleRoot}, cb
 
     const ruleLines = [];
 
-    for(let j = 0; j < rule.selectors.length; j++) {
-      const keys = (rule.selectors[j].match(regex) || []);
+    if (rule.type == 'rule') {
+      for(let j = 0; j < rule.selectors.length; j++) {
+        const keys = (rule.selectors[j].match(regex) || []);
 
-      for(let k = 0; k < keys.length; k++) {
-        const key = keys[k];
+        for(let k = 0; k < keys.length; k++) {
+          const key = keys[k];
 
-        if(key.length) {
-          const hash = hasher.hash(key);
+          if(key.length) {
+            const hash = hasher.hash(key);
 
-          jcssObj[key.substring(1)] = key.replace(regex, '.$1_' + hash).substring(1);
+            jcssObj[key.substring(1)] = key.replace(regex, '.$1_' + hash).substring(1);
+          }
         }
-      }
 
-      const classNames = rule.selectors[j].match(regex);
-      let ruleSelectors = rule.selectors[j];
+        const classNames = rule.selectors[j].match(regex);
+        let ruleSelectors = rule.selectors[j];
 
-      if (classNames) {
-        for (let c = 0; c < classNames.length; ++c) {
-          const className = classNames[c];
-          const hash = hasher.hash(className);
+        if (classNames) {
+          for (let c = 0; c < classNames.length; ++c) {
+            const className = classNames[c];
+            const hash = hasher.hash(className);
 
-          ruleSelectors = ruleSelectors.replace(className, `${className}_${hash}`);             
+            ruleSelectors = ruleSelectors.replace(className, `${className}_${hash}`);             
+          }
         }
-      }
 
-      rule.selectors[j] = ruleSelectors.replace(/\s+/g, ' ');
-    }
+        rule.selectors[j] = ruleSelectors.replace(/\s+/g, ' ');
+      }
 
-    for(let j = 0; j < rule.declarations.length; j++) {
-      const declaration = rule.declarations[j];
+      for(let j = 0; j < rule.declarations.length; j++) {
+        const declaration = rule.declarations[j];
 
-      if(declaration.type == 'declaration') {
-        ruleLines.push(`  ${declaration.property}: ${declaration.value};`);
+        if(declaration.type == 'declaration') {
+          ruleLines.push(`  ${declaration.property}: ${declaration.value};`);
+        }
       }
-    }
 
-    const ruleContent = ruleLines.join('\n');
+      const ruleContent = ruleLines.join('\n');
 
-    rules.push(`${rule.selectors.join(', ')} {\n${ruleContent}\n}\n`);
+      rules.push(`${rule.selectors.join(', ')} {\n${ruleContent}\n}\n`);
+    }
   }
 
   let styles = rules.join('\n').replace(/\`/g, '\\`');

diff --git a/lib/SourceMap.js b/lib/SourceMap.js
@@ -26,6 +26,7 @@ class SourceMap {
 
     this.mappings.push({
       dstCol: dstSelColStart,
+      dstRow: dstSelRowStart, 
       fileIndex: 0,
       srcRow: srcSelRowStart,
       srcCol: srcSelColStart
@@ -40,8 +41,8 @@ class SourceMap {
     const classNames = Object.keys(this.jcss);
 
     if (sourceCss && destCss) {
-      const srcRules = sourceCss.stylesheet.rules;
-      const dstRules = destCss.stylesheet.rules;
+      const srcRules = sourceCss.stylesheet.rules.filter(rule => rule.type == 'rule');
+      const dstRules = destCss.stylesheet.rules.filter(rule => rule.type == 'rule');
 
       for (let i = 0; i < srcRules.length; ++i) {
         const srcSelectors = srcRules[i].selectors;
@@ -53,6 +54,8 @@ class SourceMap {
       }
     }
 
+    console.log(this.mappings, this.getMappings());
+
     return this.getMappings();
   }
 
@@ -61,15 +64,32 @@ class SourceMap {
 
     const lastRowIndex = this.mappings[this.mappings.length - 1].srcRow;
     let mappingsStr = `${this.vlq(0, 0, -1, 0)};`;
+    let lastRow = 0;
+    let lastDstRow = 0;
+
+    for (let i = 0; i < this.mappings.length; ++i) {
+      let diff = +this.mappings[i].dstRow - +lastDstRow;
 
-    for (let i = 0; i <= lastRowIndex; ++i) {
-      mappingsStr += `${this.vlq(0,0,1,0)};`;
+      while (--diff) {
+        mappingsStr += ';';
+        lastDstRow++;
+      }
+
+      mappingsStr += `${this.vlq(0, 0, this.mappings[i].srcRow - lastRow, 0)};`;
+      lastRow = this.mappings[i].srcRow;
+      lastDstRow++;
     }
 
+    //for (let i = 0; i <= lastRowIndex; ++i) {
+    //  mappingsStr += `${this.vlq(0, 0, 1, 0)};`;
+    //}
+
     return mappingsStr;
   }
 
   isSameSelectors(sourceSelectors, destSelectors) {
+    if (!sourceSelectors || !destSelectors) debugger;
+
     for (let i = 0; i < sourceSelectors.length; ++i) {
       let selector = sourceSelectors[i];
       const classNames = selector.match(this.regex);

diff --git a/test/public/ExampleClass.css b/test/public/ExampleClass.css
@@ -5,6 +5,8 @@
   height: 50px;
 }
 
+/* Comment goes here */
+
 .secondExampleSelector {
   background-color: blue;
 }