Make styleguide development inside running application possible

nuxt.config.js

@@ -1,7 +1,14 @@
 const pkg = require('./package')
 const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
-const path = require('path')
+
+const styleguidePath = '../Nitro-Styleguide'
+const styleguideStyles = process.env.STYLEGUIDE_DEV
+  ? [
+      `${styleguidePath}/src/system/styles/main.scss`,
+      `${styleguidePath}/src/system/styles/shared.scss`
+    ]
+  : '@human-connection/styleguide/dist/shared.scss'
 
 module.exports = {
   mode: 'universal',
@@ -9,7 +16,7 @@ module.exports = {
   dev: dev,
   debug: dev ? 'nuxt:*,app' : null,
 
-  modern: 'server',
+  modern: !dev ? 'server' : false,
 
   transition: {
     name: 'slide-up',
@@ -66,11 +73,22 @@ module.exports = {
   ** Global CSS
   */
   css: ['~assets/styles/main.scss'],
+
+  /*
+  ** Global processed styles
+  */
+  styleResources: {
+    scss: styleguideStyles
+  },
+
   /*
   ** Plugins to load before mounting the App
   */
   plugins: [
-    { src: '~/plugins/styleguide.js', ssr: true },
+    {
+      src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
+      ssr: true
+    },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
@@ -102,10 +120,6 @@ module.exports = {
     'portal-vue/nuxt'
   ],
 
-  styleResources: {
-    scss: ['@human-connection/styleguide/dist/shared.scss']
-  },
-
   /*
   ** Axios module configuration
   */
@@ -180,6 +194,20 @@ module.exports = {
           exclude: /(node_modules)/
         })
       }
+      if (process.env.STYLEGUIDE_DEV) {
+        const path = require('path')
+        config.resolve.alias['@@'] = path.resolve(
+          __dirname,
+          `${styleguidePath}/src/system`
+        )
+        config.module.rules.push({
+          resourceQuery: /blockType=docs/,
+          loader: require.resolve(
+            `${styleguidePath}/src/loader/docs-trim-loader.js`
+          )
+        })
+      }
+
       const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
       svgRule.test = /\.(png|jpe?g|gif|webp)$/
       config.module.rules.push({

package.json

@@ -6,12 +6,11 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn dev",
     "build": "nuxt build",
     "start": "cross-env node server/index.js",
     "generate": "nuxt generate",
     "lint": "eslint --ext .js,.vue .",
-    "styleguide": "echo 'Command styleguide is Deprecated!'",
-    "styleguide:build": "echo 'Command styleguide:build is Deprecated!'",
     "test": "jest",
     "precommit": "yarn lint"
   },
@@ -50,7 +49,7 @@
     "nuxt": "~2.4.3",
     "nuxt-env": "~0.1.0",
     "portal-vue": "~1.5.1",
-    "@human-connection/styleguide": "~0.5.0",
+    "@human-connection/styleguide": "~0.5.2",
     "v-tooltip": "~2.0.0-rc.33",
     "vue-count-to": "~1.0.13",
     "vue-izitoast": "1.1.2",

plugins/styleguide-dev.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import Styleguide from '@@'
+
+Vue.use(Styleguide)

plugins/styleguide.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Styleguide from '@human-connection/styleguide'
 import '@human-connection/styleguide/dist/system.css'
-// import '@human-connection/styleguide/dist/shared.scss'
 
 Vue.use(Styleguide)