feat: update Webpack config to use the latest Style Loader + new SVG icon system

Author: sghoweri

packages/uikit-workshop/package.json

@@ -29,7 +29,11 @@
   "repository": "https://github.com/pattern-lab/patternlab-node/tree/master/packages/uikit-workshop",
   "bugs": "https://github.com/pattern-lab/patternlab-node/issues",
   "devDependencies": {
+    "svgo": "^1.3.0",
     "lit-element": "^2.2.1",
+    "svg-sprite-loader": "^4.1.6",
+    "svg-transform-loader": "^2.0.8",
+    "svgo-loader": "^2.2.1",
     "@svgr/webpack": "^4.1.0",
     "autoprefixer": "^9.1.0",
     "babel-loader": "^8.0.2",
@@ -50,7 +54,7 @@
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.0.0",
     "uglifyjs-webpack-plugin": "^1.2.7",
     "webpack": "4.26.0",
     "webpack-cli": "^3.1.2",
@@ -80,7 +84,7 @@
     "clipboard": "^2.0.1",
     "core-js": "^3.1.4",
     "deepmerge": "^2.1.1",
-    "document-register-element": "^1.13.3",
+    "document-register-element": "^1.14.3",
     "element-closest": "2.0.2",
     "es6-promise": "^4.2.4",
     "fg-loadcss": "^2.1.0",

packages/uikit-workshop/webpack.config.js

@@ -158,7 +158,7 @@ module.exports = function() {
                   ],
                   '@babel/plugin-proposal-optional-chaining',
                   ['@babel/plugin-proposal-decorators', { legacy: true }],
-                  '@babel/plugin-proposal-class-properties',
+                  ['@babel/plugin-proposal-class-properties', { loose: true }],
                   '@babel/plugin-syntax-dynamic-import',
                   '@babel/plugin-syntax-jsx' /* [1] */,
                   [
@@ -177,9 +177,9 @@ module.exports = function() {
           {
             test: /\.svg$/,
             use: [
-              {
-                loader: '@svgr/webpack',
-              },
+              { loader: 'svg-sprite-loader', options: {} },
+              'svg-transform-loader',
+              'svgo-loader',
             ],
           },
           {
@@ -194,6 +194,7 @@ module.exports = function() {
                 use: [
                   {
                     loader: 'style-loader',
+                    options: { injectType: 'lazyStyleTag' },
                   },
                   scssLoaders,
                 ].reduce((acc, val) => acc.concat(val), []),