Merge pull request #1094 from junaidrsd/fix-dev-default-styles-option

Improvement in default styles management and fix dev gulp task

Author: varya

README.md

@@ -61,12 +61,6 @@ Install plugin locally:
 npm install sc5-styleguide --save-dev
 ```
 
-Install without global default styles
-
-```bash
-npm install sc5-styleguide --excludeDefaultStyles=true
-```
-
 The gulp plugin contains two functions that requires different set of file streams:
 
 `generate()`: All unprocessed styles containing the KSS markup and style variables. This will process the KSS markup and collects variable information.
@@ -228,8 +222,8 @@ Enables side navigation. When this option parameter is enabled, styleguide will
 
 When this option parameter is enabled, style guide will show reference numbers on navigation, headings and designer tool.
 
-<a name="option-excludeDefaultStyles"></a>
-**excludeDefaultStyles** (boolean, optional, default: false)
+<a name="option-includeDefaultStyles"></a>
+**includeDefaultStyles** (boolean, optional, default: true)
 
 Exclude defualt styles.
 

gulpfile.babel.js

@@ -91,7 +91,7 @@ gulp.task('dev:generate', () => {
       rootPath: outputPath,
       overviewPath: 'README.md',
       styleVariables: 'lib/app/css/_styleguide_variables.css',
-      excludeDefaultStyles: false,
+      includeDefaultStyles: true,
       parsers: {
         css: 'postcss'
       }
@@ -100,13 +100,14 @@ gulp.task('dev:generate', () => {
 });
 
 gulp.task('dev:applystyles', () => {
-  if (!fs.existsSync(distPath)) {
+  if (!fs.existsSync(distPath) || !fs.existsSync(distPath + '/css/styleguide-app.css')) {
     process.stderr.write(chalk.red.bold('Error:') + ' Directory ' + distPath + ' does not exist. You probably installed library by cloning repository directly instead of NPM repository.\n');
     process.stderr.write('You need to run ' + chalk.green.bold('gulp build') + ' first\n');
     process.exit(1);
     return 1;
   }
   return gulp.src(distPath + '/css/styleguide-app.css')
+    .pipe(replace('{{{appRoot}}}', ''))
     .pipe(postcss([
       require('postcss-partial-import'),
       require('postcss-mixins'),
@@ -120,14 +121,17 @@ gulp.task('dev:applystyles', () => {
       require('autoprefixer'),
       require('postcss-inline-comment')
     ]))
+    .pipe(replace(/url\((.*)\)/g, function(replacement, parsedPath) {
+      return 'url(\'' + parsedPath.replace(/'/g, '') + '\')';
+    }))
     .pipe(rename('styleguide-app.css'))
     .pipe(styleguide.applyStyles())
     .pipe(gulp.dest(outputPath));
 });
 
-gulp.task('dev', ['dev:doc', 'dev:static', 'dev:applystyles'], () => {
+gulp.task('dev', ['dev:doc', 'dev:static'], () => {
   //Do intial full build and create styleguide
-  runSequence('build:dist', 'dev:generate');
+  runSequence('build:dist', 'dev:generate', 'dev:applystyles');
 
   gulp.watch('lib/app/css/**/*.css', () => {
     runSequence('copy:css', 'dev:applystyles', 'dev:generate');

lib/modules/common.js

@@ -32,7 +32,7 @@ function sanitizeOptions(opt) {
     basicAuth: opt.basicAuth || null,
     rootPath: opt.rootPath,
     readOnly: opt.readOnly || false,
-    excludeDefaultStyles: opt.excludeDefaultStyles || false,
+    includeDefaultStyles: opt.includeDefaultStyles === false ? false : true,
     parsers: opt.parsers || {
       sass: 'sass',
       scss: 'scss',

lib/styleguide.js

@@ -147,7 +147,7 @@ function generateStyleguideAppStyles(opt) {
   var srcFiles;
   srcFiles = [distPath + '/css/_fontpath_and_mixin_definition.css'];
 
-  if (!opt.excludeDefaultStyles) {
+  if (opt.includeDefaultStyles) {
     srcFiles.push(distPath + '/css/_styleguide_default_styles.css');
   }
 
@@ -182,7 +182,7 @@ function copyUsedOptionsToJsonConfig(opt, json) {
     'afterSections',
     'showMarkupSection',
     'hideSubsectionsOnMainSection',
-    'excludeDefaultStyles',
+    'includeDefaultStyles',
     'additionalNgDependencies',
   ];
   json.config = {};
@@ -271,7 +271,6 @@ function filterFiles(files, filter) {
 }
 
 module.exports.generate = function(options) {
-  generateStyleguideAppStyles(options);
   var opt = common.sanitizeOptions(options),
     filesBuffer = {},
     throughOpts = {
@@ -375,34 +374,10 @@ module.exports.generate = function(options) {
           overviewProcessed,
           filesCopied,
           favIcon,
-          indexHtmlProcessed,
-          srcFiles,
-          cssCopiedLib,
-          cssCopiedDist;
-
-        srcFiles = [distPath + '/css/_fontpath_and_mixin_definition.css'];
-
-        if (!opt.excludeDefaultStyles) {
-          srcFiles.push(distPath + '/css/_styleguide_default_styles.css');
-        }
-
-        srcFiles.push(distPath + '/css/_custom_styles_mixin.css');
-
-        cssCopiedLib = Q.Promise(function(resolve) {
-          gulp.src(srcFiles)
-            .pipe(concat('styleguide-app.css'))
-            .pipe(gulp.dest(libPath + '/css/'))
-            .on('finish', resolve);
-        });
-
-        cssCopiedDist = Q.Promise(function(resolve) {
-          gulp.src(srcFiles)
-            .pipe(concat('styleguide-app.css'))
-            .pipe(gulp.dest(distPath + '/css/'))
-            .on('finish', resolve);
-        });
+          indexHtmlProcessed;
 
         overviewProcessed = processOverviewMarkdown(opt);
+        generateStyleguideAppStyles(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
@@ -489,7 +464,7 @@ module.exports.generate = function(options) {
             .on('finish', resolve);
         });
 
-        Q.all([cssCopiedLib, cssCopiedDist, stylesCompiled, overviewProcessed, filesCopied, favIcon, indexHtmlProcessed])
+        Q.all([stylesCompiled, overviewProcessed, filesCopied, favIcon, indexHtmlProcessed])
           .then(function() {
             if (opt.server) {
               opt.fileHashes = fileHashes;