diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 6c594823..9c4d14f0 100644 --- a/gulpfile.babel.js +++ b/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)); }); diff --git a/lib/app/css/_custom_styles_mixin.css b/lib/app/css/_custom_styles_mixin.css deleted file mode 100644 index 2945a0c2..00000000 --- a/lib/app/css/_custom_styles_mixin.css +++ /dev/null @@ -1,3 +0,0 @@ -/* styleguide:ignore:start */ -@mixin styleguide_custom_styles; -/* styleguide:ignore:end */ diff --git a/lib/app/css/_fontpath_and_mixin_definition.css b/lib/app/css/withoutstyles/styleguide-app.css similarity index 99% rename from lib/app/css/_fontpath_and_mixin_definition.css rename to lib/app/css/withoutstyles/styleguide-app.css index 1446cf6a..a0ac8d3d 100644 --- a/lib/app/css/_fontpath_and_mixin_definition.css +++ b/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 */ diff --git a/lib/app/css/_styleguide_default_styles.css b/lib/app/css/withstyles/styleguide-app.css similarity index 98% rename from lib/app/css/_styleguide_default_styles.css rename to lib/app/css/withstyles/styleguide-app.css index 2dd8410b..aad0f0df 100644 --- a/lib/app/css/_styleguide_default_styles.css +++ b/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 */ - \ No newline at end of file + + /* styleguide:ignore:start */ +@mixin styleguide_custom_styles; +/* styleguide:ignore:end */ diff --git a/lib/styleguide.js b/lib/styleguide.js index aa6611b5..c7df771d 100644 --- a/lib/styleguide.js +++ b/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,6 +362,7 @@ module.exports.generate = function(options) { path: 'styleguide.json', contents: new Buffer(JSON.stringify(styleguide)) })); + var stylesCompiled, overviewProcessed, filesCopied, @@ -426,6 +370,7 @@ module.exports.generate = function(options) { 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; \ No newline at end of file