Fix issues with styleguide assets

Author: jschroed91

config/project.config.js

@@ -21,6 +21,14 @@ const config = {
   dir_test   : 'tests',
   dir_styleguide : 'dist/styleguide',
 
+  // ----------------------------------
+  // Styleguide Configuration
+  // ----------------------------------
+  styleguide_enabled : true,
+  styleguide_version : '0.0.1',
+  styleguide_title   : 'Caxy Front End Starter Kit Style Guide',
+  styleguide_hide_pattern_status: true,
+
   // ----------------------------------
   // Server Configuration
   // ----------------------------------
@@ -118,7 +126,7 @@ config.paths = {
   client : base.bind(null, config.dir_client),
   public : base.bind(null, config.dir_public),
   dist   : base.bind(null, config.dir_dist),
-  styleguide : base.bind(null, config.dir_styleguide)
+  styleguideOutput : base.bind(null, config.dir_styleguide)
 };
 
 // ========================================================

config/styleguide.config.js

@@ -1,33 +1,47 @@
 const project = require('../config/project.config');
-const builder = require('kss-caxy-zaba-template');
 
+/**
+ * Configuration object for the kss-node styleguide.
+ *
+ * This config is passed into StyleguidePlugin (caxy-styleguide-webpack-plugin) in webpack.config.js
+ * when the styleguide is enabled.
+ */
 const styleguideConfig = {
-    source: [
-        project.paths.client('styles'),
-        project.paths.client('styleguide/pattern-markup'),
-        project.paths.client('styleguide/project-assets')
+  // Project-specific settings pulled from project.config.js.
+  styleguide_version: project.styleguide_version,
+  title: project.styleguide_title,
+  hide_pattern_status: project.styleguide_hide_pattern_status,
+  destination: project.paths.styleguideOutput(),
+
+  // Source directories for KSS documentation.
+  source: [
+    project.paths.client('styles'),
+    project.paths.client('styleguide/pattern-markup'),
+    project.paths.client('styleguide/project-assets')
+  ],
+
+  // Custom SASS files to be included in styleguide, but not application.
+  sass: {
+    files: [
+      project.paths.client('styleguide/project-assets/_project-specific.scss')
     ],
-    sass: {
-        files: [
-            project.paths.client('styleguide/project-assets/_project-specific.scss')
-        ],
-        includePaths: [
-            project.paths.base('node_modules'),
-            project.paths.client('styles')
-        ]
-    },
-    styleguide_version: '0.0.1',
-    destination: project.paths.dist('styleguide'),
-    title: 'Caxy Front End Starter Kit Styleguide',
-    hide_pattern_status: true,
-    builder: project.paths.base('node_modules/kss-caxy-zaba-template/src'),
-    custom: [
-        'devnotes',
-        'hidemarkup',
-        'status',
-        'patterntype',
-        'containspatterns'
+    includePaths: [
+      project.paths.base('node_modules'),
+      project.paths.client('styles')
     ]
+  },
+
+  // Use the kss-caxy-zaba-template as the builder.
+  builder: project.paths.base('node_modules/kss-caxy-zaba-template'),
+
+  // Custom kss-node plugins.
+  custom: [
+    'devnotes',
+    'hidemarkup',
+    'status',
+    'patterntype',
+    'containspatterns'
+  ]
 };
 
 module.exports = styleguideConfig;

config/webpack.config.js

@@ -5,8 +5,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const project = require('./project.config');
 const debug = require('debug')('app:config:webpack');
-const StyleguidePlugin = require('caxy-styleguide-webpack-plugin');
-const styleguideConfig = require('./styleguide.config');
 
 // Helper variables to determine the environment.
 const __DEV__ = project.globals.__DEV__;
@@ -67,10 +65,17 @@ webpackConfig.plugins = [
     minify   : {
       collapseWhitespace : true
     }
-  }),
-  new StyleguidePlugin(styleguideConfig)
+  })
 ];
 
+// Add StyleguidePlugin if styleguide is enabled.
+if (project.styleguide_enabled) {
+  const StyleguidePlugin = require('caxy-styleguide-webpack-plugin');
+  const styleguideConfig = require('./styleguide.config');
+
+  webpackConfig.plugins.push(new StyleguidePlugin(styleguideConfig));
+}
+
 // Ensure that the compiler exits on errors during testing so that
 // they do not get skipped and misreported.
 if (__TEST__ && !argv.watch) {

package.json

@@ -74,9 +74,9 @@
   "bugs": "https://github.com/caxy/front-end-starter-kit/issues",
   "homepage": "https://github.com/caxy/front-end-starter-kit#readme",
   "dependencies": {
-    "normalize-css": "^2.3.1",
-    "caxy-styleguide-webpack-plugin": "^0.0.2",
-    "kss-caxy-zaba-template": "^0.0.2"
+    "caxy-styleguide-webpack-plugin": "^0.0.4",
+    "kss-caxy-zaba-template": "^0.0.5",
+    "normalize-css": "^2.3.1"
   },
   "devDependencies": {
     "babel-core": "^6.22.1",

server/main.js

@@ -47,7 +47,7 @@ if (project.env === 'development') {
   app.use(express.static(project.paths.public()));
 
   // Serve the KSS styleguide as static assets.
-  app.use('/styleguide', express.static(project.paths.styleguide()));
+  app.use('/styleguide', express.static(project.paths.styleguideOutput()));
 
   // This rewrites all routes requests to the root /index.html file
   // (ignoring file requests). If you want to implement universal

src/styleguide/project-assets/_project-specific.scss

@@ -1,4 +1,4 @@
-@import 'caxy-styleguide-core/src/styleguide/caxy-zaba-template/scss/_mixins-styleguide.scss';
+@import '~kss-caxy-zaba-template/scss/_mixins-styleguide.scss';
 
 // ------------------------------------------------------------------------------
 // Project Specific Settings

src/styleguide/project-assets/homepage.md

@@ -1,4 +1,4 @@
-# Welcome to the Caxy Boilerplate Style Guide
+# Welcome to the Caxy Front End Starter Kit Style Guide
 
 A record of patterns and components will be maintained here as they are
 added to the style guide, grouped by version number.

yarn.lock

@@ -779,23 +779,9 @@ caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
 
-caxy-styleguide-core@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/caxy-styleguide-core/-/caxy-styleguide-core-0.0.2.tgz#07924902bc89e7a0eb446d447e6a38f5eb73b81d"
-  dependencies:
-    debug "^2.6.0"
-    fs-extra "^2.0.0"
-    kss "^3.0.0-beta.17"
-    node-sass "^4.3.0"
-    normalize-css "^2.3.1"
-    path "^0.12.7"
-
-caxy-styleguide-webpack-plugin@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/caxy-styleguide-webpack-plugin/-/caxy-styleguide-webpack-plugin-0.0.2.tgz#61c7dbb2d2709e7acf6ad25bc8d0255ab975f228"
-  dependencies:
-    caxy-styleguide-core "^0.0.2"
-    kss "^3.0.0-beta.17"
+caxy-styleguide-webpack-plugin@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/caxy-styleguide-webpack-plugin/-/caxy-styleguide-webpack-plugin-0.0.4.tgz#c54ff39099ed8094a21cf53ad1fc6094e8ebc9ce"
 
 center-align@^0.1.1:
   version "0.1.3"
@@ -2394,12 +2380,11 @@ klaw@^1.0.0:
   optionalDependencies:
     graceful-fs "^4.1.9"
 
-kss-caxy-zaba-template@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/kss-caxy-zaba-template/-/kss-caxy-zaba-template-0.0.2.tgz#b466d5ae9cc751e529704012e45ced31a9dea264"
+kss-caxy-zaba-template@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/kss-caxy-zaba-template/-/kss-caxy-zaba-template-0.0.5.tgz#6d704cbab4a5c1758eea5213ba1945386ea45101"
   dependencies:
     fs-extra "^2.0.0"
-    kss "^3.0.0-beta.17"
     node-sass "^4.3.0"
     path "^0.12.7"