Fix basic plain CSS support, fixes #507

lib/modules/variable-parser.js

@@ -24,7 +24,7 @@ function parseVariableDeclarations(string, syntax) {
       }),
       visitors = {
         sass: {
-          // Visitor for SASS and SCSS syntaxes
+          // Visitor for SASS, SCSS and plain CSS syntaxes
           test: function(name, nodes) {
             return name === 'declaration' && nodes[1][0] === 'variable';
           },
@@ -67,6 +67,7 @@ function parseVariableDeclarations(string, syntax) {
       },
       visitor;
 
+  visitors.css = visitors.sass;
   visitors.scss = visitors.sass;
   visitor = visitors[syntax];
 
@@ -86,7 +87,7 @@ function findVariables(string, syntax) {
       }),
       visitors = {
         sass: {
-          // Visitor for SASS and SCSS syntaxes
+          // Visitor for SASS, SCSS and plain CSS syntaxes
           test: function(name, nodes) {
             return (name === 'declaration' && nodes[1][0] === 'variable') || (name === 'variable' && nodes[0] === 'ident');
           },
@@ -101,6 +102,7 @@ function findVariables(string, syntax) {
 
   // For this task LESS visitor is identical to SASS
   visitors.less = visitors.sass;
+  visitors.css = visitors.sass;
   visitors.scss = visitors.sass;
   visitor = visitors[syntax];
 

test/integration/npm-package.test.js

@@ -58,6 +58,17 @@ describe('style guide generated with npm package executable', function() {
     addJsonAssertions(output, variablesFile);
   });
 
+  describe('from plain CSS test project', function() {
+    var output = path.join(testDir, 'css-test-output');
+
+    before(function(done) {
+      this.timeout(30000);
+      generateCssTestProjectStyleGuide(output).then(done).catch(done);
+    });
+
+    checkCommonStructure(output);
+  });
+
   describe('from internal client files', function() {
     var output = path.join(testDir, 'demo-test-output');
     before(function(done) {
@@ -109,6 +120,13 @@ function generateLessTestProjectStyleGuide(output, variablesFile) {
   return generateStyleGuide(args);
 }
 
+function generateCssTestProjectStyleGuide(output) {
+  var args = getSharedConfig();
+  args.kssSource = path.resolve(currentDir, '../projects/css-project/source/**/*.css');
+  args.output = output;
+  return generateStyleGuide(args);
+}
+
 function generateDemoStyleGuide(output) {
   var args = getSharedConfig();
   args.kssSource = path.resolve(npmSgDir, 'lib/app/**/*.scss');

test/projects/css-project/.gitignore

@@ -0,0 +1 @@
+output/

test/projects/css-project/source/styleguide_config.json

@@ -0,0 +1,7 @@
+{
+  "extraHead": [
+    "<!-- extraHead comment -->"
+  ],
+  "overviewPath": "test_overview.md",
+  "commonClass": ["custom-class-1", "custom-class-2"],
+}

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

@@ -0,0 +1,62 @@
+
+/*
+First section
+
+Markup:
+<div class="section">Section markup</div>
+
+Styleguide 1.0
+*/
+
+.section {
+  color: #ff0000;
+}
+.section:hover {
+  color: #00ff00;
+}
+.section:active {
+  color: #0000ff;
+}
+
+/*
+Section with modifiers
+
+#ff0000 - Red test color
+#00ff00 - Green test color
+#0000ff - Blue test color
+.other-modifier - Other modifier
+
+Markup:
+<div style="background: {$modifiers};"></div>
+
+Styleguide 2.0
+*/
+
+/*
+Section without markup
+
+Styleguide 3.0
+*/
+
+.test-css {color: purple;}
+
+/*
+Section with multiple variables
+
+Markup:
+<div class="section">Section markup</div>
+
+Styleguide 4.0
+*/
+
+.section1 {
+  color: #ff0000;
+}
+
+.section2 {
+  background-color: #00ff00;
+}
+
+.section3 {
+  border: 1px solid #0000ff;
+}

test/projects/css-project/source/test_overview.md

@@ -0,0 +1,13 @@
+# Title1
+
+Ut turkish, wings, sit to go barista half and half medium roast. Viennese sit, java, id trifecta doppio wings white ristretto coffee aged. Est con panna single shot, organic percolator that americano, bar single origin viennese black arabica. Espresso et a variety macchiato saucer skinny. Breve, froth, flavour grounds instant ut body sugar coffee.
+
+    <div class="foobar>Test code snippet</div>
+
+## Title2
+
+To go espresso organic bar extraction galão filter. Flavour barista mazagran mocha robusta, iced lungo coffee barista affogato. Con panna, sit aromatic so that frappuccino beans. Filter ut acerbic lungo java caramelization kopi-luwak a filter. Latte eu dripper, bar milk, body latte affogato aged froth.
+
+### Title3
+
+[Example link](http://example.com)