Merge pull request #111 from uicrooks/dev

v4.1.0

Author: sergejcodes

.config/webpack/webpack.common.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
 
 module.exports = {
@@ -34,7 +35,37 @@ module.exports = {
             }
           }
         ]
-      }
+      },
+      ... (() => {
+        const rules = []
+
+        const loaders = [
+          { test: /\.(css|postcss)$/i },
+          { test: /\.s[ac]ss$/i, loader: 'sass-loader' },
+          { test: /\.less$/i, loader: 'less-loader' },
+          { test: /\.styl$/i, loader: 'stylus-loader' }
+        ]
+
+        loaders.forEach((element, index) => {
+          rules.push({
+            test: element.test,
+            use: [
+              MiniCssExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: require(path.resolve(__dirname, '../postcss.config.js'))
+                }
+              }
+            ]
+          })
+
+          if (element.loader) rules[index].use.push(element.loader)
+        })
+
+        return rules
+      })()
     ]
   },
   plugins: [
@@ -45,6 +76,13 @@ module.exports = {
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ['**/*', '!*static*']
     }),
+    /**
+     * docs: https://webpack.js.org/plugins/mini-css-extract-plugin
+     */
+    new MiniCssExtractPlugin({
+      filename: './bundle.css',
+      chunkFilename: '[id].css'
+    }),
     new VueLoaderPlugin(),
     new webpack.DefinePlugin({
       __VUE_OPTIONS_API__: 'true',

.config/webpack/webpack.dev.js

@@ -6,40 +6,6 @@ const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
   mode: 'development',
-  module: {
-    rules: [
-      ... (() => {
-        const rules = []
-
-        const loaders = [
-          { test: /\.(css|postcss)$/i },
-          { test: /\.s[ac]ss$/i, loader: 'sass-loader' },
-          { test: /\.less$/i, loader: 'less-loader' },
-          { test: /\.styl$/i, loader: 'stylus-loader' }
-        ]
-
-        loaders.forEach((element, index) => {
-          rules.push({
-            test: element.test,
-            use: [
-              'style-loader',
-              'css-loader',
-              {
-                loader: 'postcss-loader',
-                options: {
-                  postcssOptions: require(path.resolve(__dirname, '../postcss.config.js'))
-                }
-              }
-            ]
-          })
-
-          if (element.loader) rules[index].use.push(element.loader)
-        })
-
-        return rules
-      })()
-    ]
-  },
   plugins: [
     /**
      * docs: https://www.npmjs.com/package/eslint-webpack-plugin

.config/webpack/webpack.prod.js

@@ -1,6 +1,4 @@
-const path = require('path')
 const { merge } = require('webpack-merge')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const TerserPlugin = require('terser-webpack-plugin') // included in webpack 5, no need to add to package.json
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const common = require('./webpack.common.js')
@@ -20,48 +18,9 @@ module.exports = merge(common, {
           presets: [ '@babel/preset-env' ],
           plugins: [ '@babel/plugin-transform-runtime' ]
         }
-      },
-      ... (() => {
-        const rules = []
-
-        const loaders = [
-          { test: /\.(css|postcss)$/i },
-          { test: /\.s[ac]ss$/i, loader: 'sass-loader' },
-          { test: /\.less$/i, loader: 'less-loader' },
-          { test: /\.styl$/i, loader: 'stylus-loader' }
-        ]
-
-        loaders.forEach((element, index) => {
-          rules.push({
-            test: element.test,
-            use: [
-              MiniCssExtractPlugin.loader,
-              'css-loader',
-              {
-                loader: 'postcss-loader',
-                options: {
-                  postcssOptions: require(path.resolve(__dirname, '../postcss.config.js'))
-                }
-              }
-            ]
-          })
-
-          if (element.loader) rules[index].use.push(element.loader)
-        })
-
-        return rules
-      })()
+      }
     ]
   },
-  plugins: [
-    /**
-     * docs: https://webpack.js.org/plugins/mini-css-extract-plugin
-     */
-    new MiniCssExtractPlugin({
-      filename: './bundle.css',
-      chunkFilename: '[id].css'
-    })
-  ],
   optimization: {
     minimize: true,
     minimizer: [

package.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "license": "MIT",
   "scripts": {
     "start": "run-p -sr shopify:serve webpack:watch",
@@ -22,37 +22,36 @@
     "fix:shopify": "cd shopify && shopify theme check -a"
   },
   "dependencies": {
-    "tailwindcss": "^2.2.4",
+    "tailwindcss": "^2.2.7",
     "vue": "^3.1.5",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.14.8",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-env": "^7.14.8",
     "@vue/compiler-sfc": "^3.1.5",
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.0.0",
+    "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "eslint": "^7.30.0",
-    "eslint-plugin-vue": "^7.13.0",
-    "eslint-webpack-plugin": "^2.5.4",
+    "eslint": "^7.31.0",
+    "eslint-plugin-vue": "^7.14.0",
+    "eslint-webpack-plugin": "^3.0.1",
     "mini-css-extract-plugin": "^2.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.5",
+    "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
-    "style-loader": "^3.1.0",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
-    "stylelint-webpack-plugin": "^2.2.2",
+    "stylelint-webpack-plugin": "^3.0.1",
     "url-loader": "^4.1.1",
     "vue-loader": "^16.3.1",
-    "webpack": "^5.45.1",
+    "webpack": "^5.46.0",
     "webpack-cli": "^4.7.2",
     "webpack-merge": "^5.8.0"
   }

shopify/layout/theme.liquid

@@ -15,9 +15,6 @@
       <meta name="description" content="{{ page_description | escape }}">
     {% endif %}
 
-    {% comment %}
-      css bundle is not loaded during the development task, instead it displays a 404 error in the web console
-    {% endcomment %}
     {{ 'bundle.css' | asset_url | stylesheet_tag }}
 
     <!-- header hook for Shopify plugins -->