Parse section related variables to styleguide.json

Author: Hannu Pelkonen

lib/modules/parser.js

@@ -75,6 +75,45 @@ module.exports.parseVariables = function(string, syntax) {
   return out;
 };
 
+// Parse Style variables to object
+module.exports.findVariables = function(string, syntax) {
+  syntax = syntax || 'scss';
+
+  var out = [],
+      ast = gonzales.srcToAST({
+        src: string,
+        syntax: syntax
+      });
+
+  gonzo.traverse(ast, [{
+    // Visitor for SASS and SCSS syntaxes
+    test: function(name, nodes) {
+      return name === 'value';
+    },
+    process: function(nodes) {
+      nodes.forEach(function(element) {
+        if (element[0] === 'variable' && element[1][0] === 'ident') {
+          out.push(element[1][1]);
+        }
+      });
+    }
+  }, {
+    // Visitor for LESS syntax
+    test: function(name, nodes) {
+      return name === 'value';
+    },
+    process: function(nodes) {
+      nodes.forEach(function(element) {
+        if (element[0] === 'atkeyword' && element[1][0] === 'ident') {
+          out.push(element[1][1]);
+        }
+      });
+    }
+  }]);
+
+  return out;
+};
+
 // Modifies string so that variables passed in object are updated
 module.exports.setVariables = function(string, syntax, variables) {
   var sorted = [], lines = [],

lib/styleguide.js

@@ -122,8 +122,17 @@ module.exports = function(opt) {
 
         // If settings file is found, generate settings object
         if (opt.styleVariables) {
-          var syntax = path.extname(opt.styleVariables).substring(1);
+          var syntax = path.extname(opt.styleVariables).substring(1),
+            variables;
+          // Parse variables from the defined file
           styleguide.config.settings = parser.parseVariables(fs.readFileSync(opt.styleVariables, 'utf-8'), syntax);
+          // Go trough every styleguide style block and find used variables
+          styleguide.sections.forEach(function(section) {
+            if (section.css) {
+              section.variables = parser.findVariables(section.css, syntax);
+            }
+            return section;
+          });
         }
 
         // Create JSON containing KSS data
@@ -142,8 +151,8 @@ module.exports = function(opt) {
             .pipe(pushAllFiles())
         }
 
-        opt.onCompileError = onCompileError;
         // Preprocess all CSS files and combile then to a single file
+        opt.onCompileError = onCompileError;
         preprocess.getStream(Object.keys(filesBuffer), opt)
           .pipe(through.obj(function(file, enc, cb) {
 

package.json

@@ -60,6 +60,7 @@
     "yargs": "^1.3.2"
   },
   "devDependencies": {
+    "async": "^0.9.0",
     "chai": "^1.9.2",
     "conventional-changelog": "git://github.com/sc5/conventional-changelog.git#features/sc-styleguide",
     "exec-sync": "^0.1.6",
@@ -78,6 +79,7 @@
     "karma-sinon-chai": "^0.2.0",
     "main-bower-files": "^2.1.0",
     "mocha": "^2.0.1",
+    "mocha-shared": "^0.2.0",
     "multiline": "^1.0.1",
     "sinon": "^1.11.1",
     "sinon-chai": "^2.6.0",

test/markdown.js

@@ -8,7 +8,6 @@ describe('Markdown', function() {
 
   it('getRenderer if formed correctly', function() {
     var renderer = markdown.getRenderer();
-    console.log(renderer);
     expect(renderer).to.be.an('object');
     expect(renderer.heading).to.be.an('function');
     expect(renderer.paragraph).to.be.an('function');

test/parser.js

@@ -5,6 +5,78 @@ var gulp = require('gulp'),
   parser = require('../lib/modules/parser');
 
 describe('Parser', function() {
+  describe('variable finding', function() {
+    describe('SCSS syntax', function() {
+      it('should return all used variables', function() {
+        var str = multiline(function() {
+          /*
+          color: $mycolor1;
+          .testStyle {
+            border: 1px solid $mycolor2;
+          }
+          .testStyle2 {
+            background-color: $mycolor3;
+          }
+          */
+        }),
+        result = [
+          'mycolor1', 'mycolor2', 'mycolor3'
+        ]
+        expect(parser.findVariables(str)).eql(result);
+      });
+
+      it('should not return new variable definitions', function() {
+        var str = multiline(function() {
+          /*
+          $mycolor: #00ff00;
+          .testStyle {
+            color: $mycolor2;
+          }
+          */
+        }),
+        result = [
+          'mycolor2'
+        ]
+        expect(parser.findVariables(str)).eql(result);
+      });
+    });
+
+    describe('LESS syntax', function() {
+      it('should return all used variables', function() {
+        var str = multiline(function() {
+          /*
+          color: @mycolor1;
+          .testStyle {
+            border: 1px solid @mycolor2;
+          }
+          .testStyle2 {
+            background-color: @mycolor3;
+          }
+          */
+        }),
+        result = [
+          'mycolor1', 'mycolor2', 'mycolor3'
+        ]
+        expect(parser.findVariables(str, 'less')).eql(result);
+      });
+
+      it('should not return new variable definitions', function() {
+        var str = multiline(function() {
+          /*
+          @mycolor: #00ff00;
+          .testStyle {
+            color: @mycolor2;
+          }
+          */
+        }),
+        result = [
+          'mycolor2'
+        ]
+        expect(parser.findVariables(str, 'less')).eql(result);
+      });
+    });
+  });
+
   describe('variable parser', function() {
     describe('SCSS syntax', function() {
       it('should parse basic variables', function() {

test/projects/less-project/source/styles/style.less

@@ -27,3 +27,22 @@
 // Styleguide 3.0
 
 .test-css {color: purple;}
+
+// Section with multiple variables
+//
+// Markup:
+// <div class="section">Section markup</div>
+//
+// Styleguide 4.0
+
+.section1 {
+  color: @color-red;
+}
+
+.section2 {
+  background-color: @color-green;
+}
+
+.section3 {
+  border: 1px solid @color-blue;
+}

test/projects/scss-project/source/styles/style.scss

@@ -26,4 +26,23 @@
 //
 // Styleguide 3.0
 
-.test-css {color: purple;}
+.test-css {color: purple;}
+
+// Section with multiple variables
+//
+// Markup:
+// <div class="section">Section markup</div>
+//
+// Styleguide 4.0
+
+.section1 {
+  color: $color-red;
+}
+
+.section2 {
+  background-color: $color-green;
+}
+
+.section3 {
+  border: 1px solid $color-blue;
+}