fix SC5#1108 SC5#1109 variable parsing

gulpfile.babel.js

@@ -81,7 +81,7 @@ gulp.task('dev:doc', () => {
 });
 
 gulp.task('dev:generate', () => {
-  return gulp.src(['lib/dist/css/*.css', '!lib/dist/css/_styleguide_default_styles.css', '!lib/dist/css/_custom_styles_mixin.css', '!lib/dist/css/_fontpath_and_mixin_definition.css'])
+  return gulp.src([distPath + '/css/*.css'])
     .pipe(styleguide.generate({
       title: 'SC5 Styleguide',
       sideNav: false,
@@ -90,8 +90,9 @@ gulp.task('dev:generate', () => {
       server: true,
       rootPath: outputPath,
       overviewPath: 'README.md',
-      styleVariables: 'lib/dist/css/_styleguide_variables.css',
-      includeDefaultStyles: true,
+      styleVariables: distPath + '/css/_styleguide_variables.css',
+      customColors: distPath + '/css/_styleguide_variables.css',
+      includeDefaultStyles: false,
       parsers: {
         css: 'postcss'
       }
@@ -124,7 +125,6 @@ gulp.task('dev:applystyles', () => {
     .pipe(replace(/url\((.*)\)/g, function(replacement, parsedPath) {
       return 'url(\'' + parsedPath.replace(/'/g, '') + '\')';
     }))
-    .pipe(rename('styleguide-app.css'))
     .pipe(styleguide.applyStyles())
     .pipe(gulp.dest(outputPath));
 });

lib/app/css/_fontpath_and_mixin_definition.css → lib/app/css/withoutstyles/styleguide-app.css

@@ -901,3 +901,7 @@ $fa-version: '4.2.0';
   color: #009926;
   font-weight: 700;
 }
+
+/* styleguide:ignore:start */
+@mixin styleguide_custom_styles;
+/* styleguide:ignore:end */

lib/app/css/_styleguide_default_styles.css → lib/app/css/withstyles/styleguide-app.css

@@ -1,3 +1,21 @@
+$fa-font-path: '{{{appRoot}}}/assets/fonts';
+$fa-version: '4.2.0';
+@import 'components/font-awesome/font-awesome.css';
+/*@import 'bourbon';*/
+
+@define-mixin styleguide_custom_styles {
+  /* User can re-define this mixin to create custom style overrides
+     This mixin is included in the end of the application stylesheet */
+}
+
+@import '_styleguide_custom_variables.css';
+@import '_styleguide_variables.css';
+@import '_styleguide_mixins.css';
+@import 'styleguide_helper_elements.css';
+
+@import 'components/colorpicker.css';
+@import 'components/github.css';
+
 $footer-padding: 2em;
 $footer-logo-height: 42px;
 
@@ -1699,4 +1717,7 @@ file: demo/testDirectiveTwo.js
 
 Styleguide 6.2
  */
-
+
+ /* styleguide:ignore:start */
+@mixin styleguide_custom_styles;
+/* styleguide:ignore:end */

lib/styleguide.js

@@ -13,7 +13,6 @@
 var path = require('path'),
   pug = require('pug'),
   through = require('through2'),
-  concat = require('gulp-concat'),
   gulp = require('gulp'),
   rename = require('gulp-rename'),
   mustache = require('gulp-mustache'),
@@ -83,7 +82,6 @@ function groupModuleFiles(allModules) {
     var files = _.uniq(_.reduce(modules, function(files, singleModule) {
       return files.concat(singleModule.files);
     }, []));
-
     return {
       name: moduleName,
       files: files
@@ -132,8 +130,8 @@ function generatePugMarkup(json, options) {
     } else {
       section.markup = pug.render(pugstring, pugOptions);
       pugCache.setItem(cacheKey, {
-        key: md5,
-        value: section.markup
+        key : md5,
+        value : section.markup
       });
     }
 
@@ -194,7 +192,6 @@ function copyUsedOptionsToInlineJsonConfig(opt, json) {
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
   });
-
   return json;
 }
 
@@ -242,7 +239,6 @@ function appendUsedVariablesToEachBlock(opt, styleguide) {
         section.variables.push(varName);
       }
     });
-
     return section;
   });
 }
@@ -254,11 +250,19 @@ function filterFiles(files, filter) {
       filtered[filePath] = files[filePath];
     }
   });
-
   return filtered;
 }
 
 module.exports.generate = function(options) {
+  try {
+    if (options.includeDefaultStyles) {
+      fs.copySync(distPath + '/css/withstyles/styleguide-app.css', distPath + '/css/styleguide-app.css');
+    } else {
+      fs.copySync(distPath + '/css/withoutstyles/styleguide-app.css', distPath + '/css/styleguide-app.css');
+    } 
+  } catch (err) {
+    console.log('ERROR: Unable to exclude default styles.');
+  }
   var opt = common.sanitizeOptions(options),
     filesBuffer = {},
     throughOpts = {
@@ -294,7 +298,6 @@ module.exports.generate = function(options) {
     // Make sure file goes through the next gulp plugin
     // jshint -W040
     this.push(file);
-
     // jshint +W040
     done();
   }
@@ -303,76 +306,17 @@ module.exports.generate = function(options) {
 
   // A stream through which each file will pass
   return through(throughOpts, bufferFileContents, function(callback) {
-    var _this = this,
-    generateStylesFile,
-    pushStylesFileToStream;
-
-    generateStylesFile = Q.promise(function(resolve) {
-      var srcFiles;
-      srcFiles = [distPath + '/css/_fontpath_and_mixin_definition.css'];
-      if (sgOptions.includeDefaultStyles) {
-        srcFiles.push(distPath + '/css/_styleguide_default_styles.css');
-      }
-
-      srcFiles.push(distPath + '/css/_custom_styles_mixin.css');
-      gulp.src(srcFiles)
-        .pipe(concat('styleguide-app.css'))
-        .pipe(gulp.dest(distPath + '/css/'))
-        .on('finish', resolve);
-    });
-
-    pushStylesFileToStream = Q.promise(function(resolve) {
-      if(!opt.isTesting) {
-        Q.all([generateStylesFile]).then(function() {
-          try {
-            gulp.src(distPath + '/css/styleguide-app.css')
-              .pipe(replace('{{{appRoot}}}', opt.appRoot))
-              .pipe(postcss([
-              require('postcss-partial-import'),
-              require('postcss-mixins'),
-              require('cssnext'),
-              require('postcss-advanced-variables'),
-              require('postcss-conditionals'),
-              require('postcss-color-function'),
-              require('postcss-color-alpha'),
-              require('postcss-nested'),
-              require('postcss-custom-media'),
-              require('autoprefixer'),
-              require('postcss-inline-comment')
-              ]))
-              // Strings hack
-              .pipe(replace(/url\((.*)\)/g, function(replacement, parsedPath) {
-                return 'url(\'' + parsedPath.replace(/'/g, '') + '\')';
-              }))
-              .pipe(through.obj(function(file, enc, cb) {
-                filesBuffer[file.path] = file.contents.toString('utf8');
-                //_this.push(file);
-              cb();
-            }))
-            .on('finish', resolve);
-          } catch (e) {
-            console.log('ERROR: styleguide-app.css does not exist.', e);
-          }
-        }).catch(function(error) {
-          console.error(error.toString());
-          emitCompileError(error);
-          callback();
-        });
-      } else {
-        resolve();
-      }
-    });
-    Q.all([pushStylesFileToStream]).then(function() {
-      // Styleguide object to be built
-      var styleguide = {},
-      // Parse KSS sections
-      parseKSSPromise = kssParser.parseKssSections(filesBuffer, opt.kssOpt, opt.parsers),
-      // Filter variable files
-      // File paths are full absolute paths so we need to add wildcard prefix
-      // Also empty wildcard should return all files
-      variableFiles = opt.styleVariables ? filterFiles(filesBuffer, '**/' + opt.styleVariables) : filesBuffer,
-      // Parse variable decarations from files
-      parseVariablesPromise = variableParser.parseVariableDeclarationsFromFiles(variableFiles, opt);
+      var _this = this,
+        // Styleguide object to be built
+        styleguide = {},
+        // Parse KSS sections
+        parseKSSPromise = kssParser.parseKssSections(filesBuffer, opt.kssOpt, opt.parsers),
+        // Filter variable files
+        // File paths are full absolute paths so we need to add wildcard prefix
+        // Also empty wildcard should return all files
+        variableFiles = opt.styleVariables ? filterFiles(filesBuffer, '**/' + opt.styleVariables) : filesBuffer,
+        // Parse variable decarations from files
+        parseVariablesPromise = variableParser.parseVariableDeclarationsFromFiles(variableFiles, opt);
 
       Q.all([parseKSSPromise, parseVariablesPromise]).spread(function(sections, variables) {
         styleguide.sections = sections;
@@ -393,7 +337,6 @@ module.exports.generate = function(options) {
             if (!opt.overviewPath) {
               resolve();
             }
-
             markdown.getStream(opt.overviewPath)
               .pipe(rename(function(path) {
                 path.basename = 'overview';
@@ -419,13 +362,15 @@ module.exports.generate = function(options) {
           path: 'styleguide.json',
           contents: new Buffer(JSON.stringify(styleguide))
         }));
+
         var stylesCompiled,
           overviewProcessed,
           filesCopied,
           favIcon,
           indexHtmlProcessed;
 
         overviewProcessed = processOverviewMarkdown(opt);
+
         var cssSrc = [distPath + '/css/styleguide-app.css', distPath + '/css/styleguide_helper_elements.css'];
 
         // Copy all files (except index.html) from dist from to output stream
@@ -452,7 +397,6 @@ module.exports.generate = function(options) {
               console.log('ERROR: Favicon option is defined but the file is not copyable. Using default favicon.');
             }
           }
-
           resolve();
         });
 
@@ -463,7 +407,6 @@ module.exports.generate = function(options) {
           if (opt.customColors) {
             try {
               fs.copySync(opt.customColors, distPath + '/css/_styleguide_custom_variables.css');
-
               // Add directory of custom colors file to SASS includePaths
               // This allows to including external files in custom variable file
             } catch (err) {
@@ -532,11 +475,7 @@ module.exports.generate = function(options) {
         emitCompileError(error);
         callback();
       });
-    }).catch(function(error) {
-      console.error(error.toString());
-      emitCompileError(error);
-    });
-  }
+    }
   ).on('error', console.error.bind(console)).on('end', function() {
     emitProgressEnd();
   });
@@ -627,7 +566,6 @@ function startServer(options) {
   if (!serverInstance) {
     serverInstance = {};
   }
-
   if (!serverInstance[options.port]) {
     var port = options.port;
     serverInstance[port] = sgServer(options);
@@ -641,8 +579,7 @@ function startServer(options) {
       }
     });
   }
-
   return serverInstance[options.port];
 }
 
-module.exports.addSection = addSection;
+module.exports.addSection = addSection;