update patternlab to v5.14.0

in addition update packages for vue, switch from node-sass to sass and a lot more

Author: hadl

package-lock.json

@@ -12,38 +12,38 @@
     "version": "patternlab --version"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.6"
+    "core-js": "^3.8.3",
+    "vue": "^2.6.12",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
-    "@pattern-lab/cli": "^5.7.0",
-    "@pattern-lab/core": "^5.7.0",
-    "@pattern-lab/engine-twig-php": "^5.7.1",
-    "@pattern-lab/starterkit-twig-demo": "^5.8.0",
-    "@pattern-lab/uikit-workshop": "^5.7.2",
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-router": "~4.3.0",
-    "@vue/cli-service": "~4.3.0",
-    "@vue/cli-shared-utils": "latest",
-    "@vue/eslint-config-airbnb": "^5.0.2",
+    "@pattern-lab/cli": "^5.14.0",
+    "@pattern-lab/core": "^5.14.0",
+    "@pattern-lab/engine-twig-php": "^5.14.0",
+    "@pattern-lab/starterkit-twig-demo": "^5.14.0",
+    "@pattern-lab/uikit-workshop": "^5.14.0",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-plugin-router": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
+    "@vue/cli-shared-utils": "^4.5.11",
+    "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "event-hooks-webpack-plugin": "^2.1.6",
+    "eslint": "^7.19.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-vue": "^7.5.0",
+    "event-hooks-webpack-plugin": "^2.2.0",
     "fs-extra": "latest",
     "globby": "latest",
-    "html-webpack-plugin": "latest",
-    "minimatch": "latest",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2",
-    "stylelint": "^13.3.2",
+    "html-webpack-plugin": "^5.0.0",
+    "minimatch": "^3.0.4",
+    "sass": "^1.32.6",
+    "sass-loader": "^10.1.1",
+    "stylelint": "^13.9.0",
     "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.17.0",
-    "stylelint-webpack-plugin": "^1.2.3",
-    "vue-template-compiler": "^2.6.11",
+    "stylelint-scss": "^3.18.0",
+    "stylelint-webpack-plugin": "^2.1.1",
+    "vue-template-compiler": "^2.6.12",
     "webpack-config-utils": "^2.3.1"
   }
 }

package.json

@@ -52,7 +52,7 @@
         "general-header": "views/partials/general-header.mustache",
         "general-footer": "views/partials/general-footer.mustache",
         "patternSection": "views/partials/patternSection.mustache",
-        "patternSectionSubtype": "views/partials/patternSectionSubtype.mustache",
+        "patternSectionSubgroup": "views/partials/patternSectionSubgroup.mustache",
         "viewall": "views/viewall.mustache"
       }
     },
@@ -79,6 +79,8 @@
   "patternExportPatternPartials": [],
   "patternExportPreserveDirectoryStructure": true,
   "patternExportRaw": false,
+  "patternMergeVariantArrays": true,
+  "renderFlatPatternsOnViewAllPages": false,
   "serverOptions": {
     "wait": 1000
   },
@@ -93,6 +95,7 @@
   "uikits": [
     {
       "name": "uikit-workshop",
+      "package": "@pattern-lab/uikit-workshop",
       "outputDir": "",
       "enabled": true,
       "excludedPatternStates": [],
@@ -106,35 +109,35 @@
           "id": "atoms",
           "recursive": true,
           "paths": [
-            "source/_patterns/00-atoms"
+            "source/_patterns/atoms"
           ]
         },
         {
           "id": "molecules",
           "recursive": true,
           "paths": [
-            "source/_patterns/01-molecules"
+            "source/_patterns/molecules"
           ]
         },
         {
           "id": "organisms",
           "recursive": true,
           "paths": [
-            "source/_patterns/02-organisms"
+            "source/_patterns/organisms"
           ]
         },
         {
           "id": "templates",
           "recursive": true,
           "paths": [
-            "source/_patterns/03-templates"
+            "source/_patterns/templates"
           ]
         },
         {
           "id": "pages",
           "recursive": true,
           "paths": [
-            "source/_patterns/04-pages"
+            "source/_patterns/pages"
           ]
         },
         {

patternlab-config.json

@@ -0,0 +1,9 @@
+
+<!--DO NOT REMOVE-->
+{{ patternLabFoot | raw }}
+
+  {# webpack dev serv js files must include to make HMR work inside patternlab iframe #}
+<script type="text/javascript" src="/js/chunk-vendors.js"></script>
+<script type="text/javascript" src="/js/app.js"></script>
+</body>
+</html>

source/_meta/_00-head.twig

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="{{ htmlClass }}">
+<head>
+  <title>{{ title }}</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+  <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
+  {#  webpack dev-server css file  #}
+  <link rel="stylesheet" href="/css/app.css">
+
+  <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
+  {{ patternLabHead | raw }}
+  <!-- End Pattern Lab -->
+</head>
+<body class="{{ bodyClass }}">

source/_meta/_01-foot.twig

@@ -45,14 +45,17 @@ export default {
 h3 {
   margin: 40px 0 0;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
 }
+
 li {
   display: inline-block;
   margin: 0 10px;
 }
+
 a {
   color: #42b983;
 }

source/_meta/_01-foot.mustache renamed to source/_meta/_foot.mustache

@@ -8,15 +8,17 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        prependData: `
-          @import "@/scss/_variables.scss";
+        additionalData: `
+          @import "~@/scss/_variables.scss";
         `,
       },
     },
   },
 
   chainWebpack: (config) => {
     patternlabVuePluginConfig(config);
-    config.plugin('stylelint-webpack-plugin').use(StyleLintPlugin);
+    config.plugin('stylelint-webpack-plugin').use(new StyleLintPlugin({
+      files: ['**/*.{vue,scss}'],
+    }));
   },
 };