From bdc9bd3825ad043bce8d96cfd8ede5e62678d687 Mon Sep 17 00:00:00 2001 From: Hannu Pelkonen Date: Fri, 14 Nov 2014 14:24:22 +0200 Subject: [PATCH] Parse section related variables to styleguide.json --- lib/modules/parser.js | 39 +++ lib/styleguide.js | 13 +- package.json | 2 + test/markdown.js | 1 - test/parser.js | 72 +++++ .../less-project/source/styles/style.less | 19 ++ .../scss-project/source/styles/style.scss | 21 +- test/structure.js | 258 +++++++++++------- 8 files changed, 317 insertions(+), 108 deletions(-) diff --git a/lib/modules/parser.js b/lib/modules/parser.js index d28ad58f..c04b9f78 100644 --- a/lib/modules/parser.js +++ b/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 = [], diff --git a/lib/styleguide.js b/lib/styleguide.js index 891bb830..f70ffb3e 100644 --- a/lib/styleguide.js +++ b/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) { diff --git a/package.json b/package.json index 45618907..a9adeba3 100644 --- a/package.json +++ b/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", diff --git a/test/markdown.js b/test/markdown.js index d225bcf0..67753844 100644 --- a/test/markdown.js +++ b/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'); diff --git a/test/parser.js b/test/parser.js index 21118e14..f17dcd3c 100644 --- a/test/parser.js +++ b/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() { diff --git a/test/projects/less-project/source/styles/style.less b/test/projects/less-project/source/styles/style.less index 1e2bae52..aa8d041c 100644 --- a/test/projects/less-project/source/styles/style.less +++ b/test/projects/less-project/source/styles/style.less @@ -27,3 +27,22 @@ // Styleguide 3.0 .test-css {color: purple;} + +// Section with multiple variables +// +// Markup: +//
Section markup
+// +// Styleguide 4.0 + +.section1 { + color: @color-red; +} + +.section2 { + background-color: @color-green; +} + +.section3 { + border: 1px solid @color-blue; +} diff --git a/test/projects/scss-project/source/styles/style.scss b/test/projects/scss-project/source/styles/style.scss index d06d1e37..bbd1220c 100644 --- a/test/projects/scss-project/source/styles/style.scss +++ b/test/projects/scss-project/source/styles/style.scss @@ -26,4 +26,23 @@ // // Styleguide 3.0 -.test-css {color: purple;} \ No newline at end of file +.test-css {color: purple;} + +// Section with multiple variables +// +// Markup: +//
Section markup
+// +// Styleguide 4.0 + +.section1 { + color: $color-red; +} + +.section2 { + background-color: $color-green; +} + +.section3 { + border: 1px solid $color-blue; +} diff --git a/test/structure.js b/test/structure.js index b122f553..b39398ed 100644 --- a/test/structure.js +++ b/test/structure.js @@ -31,7 +31,7 @@ beforeEach(function() { function styleguideStream(source, config) { return gulp.src(source || defaultSource) - .pipe(styleguide(defaultConfig)) + .pipe(styleguide(config || defaultConfig)) } // This collector collects all files from the stream to the array passed as parameter @@ -154,112 +154,162 @@ describe('overview.html', function() { }); }); -['SCSS', 'LESS'].forEach(function(type) { - var source, - config; +function sharedStyleguideCss() { + it('should exist', function() { + expect(this.styleguideFile).to.be.an('object'); + }); + + it('should be processed correctly', function() { + expect(this.styleguideFile.contents.toString()).to.contain('.section {\n color: #ff0000;'); + }); +}; + +function sharedStyleguideJSON() { + it('should exist', function() { + expect(this.jsonData).to.be.an('object'); + }); + + it('should contain correct title', function() { + expect(this.jsonData.config.title).to.eql('Test Styleguide'); + }); + + it('should contain correct appRoot', function() { + expect(this.jsonData.config.appRoot).to.eql('/my-styleguide-book'); + }); + + it('should contain extra heads in correct format', function() { + expect(this.jsonData.config.extraHead).to.eql(defaultConfig.extraHead[0] + '\n' + defaultConfig.extraHead[1]); + }); + + it('should contain all common classes', function() { + expect(this.jsonData.config.commonClass).to.eql(['custom-class-1', 'custom-class-2']); + }); + + it('should contain all style variables from defined file', function() { + var sassData = { + 'color-red': { value: '#ff0000', index: 0 }, + 'color-green': { value: '#00ff00', index: 1 }, + 'color-blue': { value: '#0000ff', index: 2 } + }; + expect(this.jsonData.config.settings).to.eql(sassData); + }); + + it('should not reveal outputPath', function() { + expect(this.jsonData.config.outputPath).to.not.exist; + }); + + it('should have all the modifiers', function() { + expect(this.jsonData.sections[1].modifiers.length).to.eql(3) + }); + + // Markup + + it('should print markup if defined', function() { + expect(this.jsonData.sections[0].markup).to.not.be.empty; + }); + + it('should not print empty markup', function() { + expect(this.jsonData.sections[2].markup).to.not.exist; + }); + + // Related CSS + + it('should not print empty CSS', function() { + expect(this.jsonData.sections[1].css).to.not.exist; + }); + + it('should have section CSS', function() { + expect(this.jsonData.sections[2].css).to.eql('.test-css {color: purple;}'); + }); + + // Related variables + + it('should contain all related variables', function() { + var relatedVariables = ['color-red', 'color-green', 'color-blue']; + expect(this.jsonData.sections[3].variables).to.eql(relatedVariables) + }); +} + +describe('styleguide.css for SCSS project', function() { + beforeEach(function(done) { + var files = [], + _this = this, + source, + config; - beforeEach(function() { config = defaultConfig; - if (type === 'SCSS') { - config.styleVariables = './test/projects/scss-project/source/styles/_styleguide_variables.scss'; - source = './test/projects/scss-project/source/**/*.scss' - } else if (type === 'LESS') { - config.styleVariables = './test/projects/less-project/source/styles/_styleguide_variables.less'; - source = './test/projects/less-project/source/**/*.less' - } + config.styleVariables = './test/projects/scss-project/source/styles/_styleguide_variables.scss'; + source = './test/projects/scss-project/source/**/*.scss'; + styleguideStream(source, config).pipe( + through.obj({objectMode: true}, collector(files), function(callback) { + _this.styleguideFile = findFile(files, 'styleguide.css'); + done(); + }) + ); }); - describe('styleguide.css for ' + type + ' project', function() { - var styleguideFile; - this.timeout(5000); - - before(function(done) { - var files = []; - styleguideStream().pipe( - through.obj({objectMode: true}, collector(files), function(callback) { - styleguideFile = findFile(files, 'styleguide.css'); - done(); - }) - ); - }); - - it('should exist', function() { - expect(styleguideFile).to.be.an('object'); - }); - - it('should be processed correctly', function() { - expect(styleguideFile.contents.toString()).to.contain('.section {\n color: #ff0000; }'); - }); - }); - - describe('styleguide.json for ' + type + ' project', function() { - var jsonData; - this.timeout(5000); - - before(function(done) { - var files = []; - - styleguideStream(source).pipe( - through.obj({objectMode: true}, collector(files), function(callback) { - if (jsonData = findFile(files, 'styleguide.json')) { - jsonData = JSON.parse(jsonData.contents); - } - done(); - }) - ); - }); - - it('should exist', function() { - expect(jsonData).to.be.an('object'); - }); - - it('should contain correct title', function() { - expect(jsonData.config.title).to.eql('Test Styleguide'); - }); - - it('should contain correct appRoot', function() { - expect(jsonData.config.appRoot).to.eql('/my-styleguide-book'); - }); - - it('should contain extra heads in correct format', function() { - expect(jsonData.config.extraHead).to.eql(defaultConfig.extraHead[0] + '\n' + defaultConfig.extraHead[1]); - }); - - it('should contain all common classes', function() { - expect(jsonData.config.commonClass).to.eql(['custom-class-1', 'custom-class-2']); - }); - - it('should contain all ' + type + ' variables from defined file', function() { - var sassData = { - 'color-red': { value: '#ff0000', index: 0 }, - 'color-green': { value: '#00ff00', index: 1 }, - 'color-blue': { value: '#0000ff', index: 2 } - }; - expect(jsonData.config.settings).to.eql(sassData); - }); - - it('should not reveal outputPath', function() { - expect(jsonData.config.outputPath).to.not.exist; - }); - - it('should print markup if defined', function() { - expect(jsonData.sections[0].markup).to.not.be.empty; - }); - - it('should not print empty markup', function() { - expect(jsonData.sections[2].markup).to.not.exist; - }); - - it('should have all the modifiers', function() { - expect(jsonData.sections[1].modifiers.length).to.eql(3) - }); - - it('should have section CSS', function() { - expect(jsonData.sections[2].css).to.eql('.test-css {color: purple;}'); - }); - - it('should not print empty markup', function() { - expect(jsonData.sections[1].css).to.not.exist; - }); + sharedStyleguideCss(); +}); + +describe('styleguide.css for LESS project', function() { + beforeEach(function(done) { + var files = [], + _this = this, + source, + config; + + config = defaultConfig; + config.styleVariables = './test/projects/less-project/source/styles/_styleguide_variables.less'; + source = './test/projects/less-project/source/**/*.less'; + styleguideStream(source, config).pipe( + through.obj({objectMode: true}, collector(files), function(callback) { + _this.styleguideFile = findFile(files, 'styleguide.css'); + done(); + }) + ); }); + + sharedStyleguideCss(); +}); + +describe('styleguide.json for SCSS project', function() { + beforeEach(function(done) { + var files = [], + _this = this, + source, + config; + + config = defaultConfig; + config.styleVariables = './test/projects/scss-project/source/styles/_styleguide_variables.scss'; + source = './test/projects/scss-project/source/**/*.scss'; + styleguideStream(source, config).pipe( + through.obj({objectMode: true}, collector(files), function(callback) { + _this.jsonData = JSON.parse(findFile(files, 'styleguide.json').contents); + done(); + }) + ); + }); + + sharedStyleguideJSON(); +}); + +describe('styleguide.json for LESS project', function() { + beforeEach(function(done) { + var files = [], + _this = this, + source, + config; + + config = defaultConfig; + config.styleVariables = './test/projects/less-project/source/styles/_styleguide_variables.less'; + source = './test/projects/less-project/source/**/*.less'; + styleguideStream(source, config).pipe( + through.obj({objectMode: true}, collector(files), function(callback) { + _this.jsonData = JSON.parse(findFile(files, 'styleguide.json').contents); + done(); + }) + ); + }); + + sharedStyleguideJSON(); });