Tailwind minification

package.json

@@ -8,8 +8,8 @@
   "private": true,
   "scripts": {
     "start": "webpack serve --mode=development",
-    "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid",
-    "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy --env=production"
+    "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid",
+    "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid && shopify-themekit deploy --env=production"
   },
   "dependencies": {
     "tailwindcss": "^1.9.6",
@@ -19,10 +19,11 @@
     "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",
     "@shopify/themekit": "^1.1.6",
-    "autoprefixer": "^10.0.2",
+    "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "browser-sync": "^2.26.12",
+    "clean-css-cli": "^4.3.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.0",
     "css-loader": "^5.0.1",

readme.md

@@ -53,10 +53,23 @@ You can use node `v14` to install dependencies and run build commands.
 - Run `nvm install v14` in terminal
 - Install dependencies `yarn install`
 
+## Clean-CSS CLI
+This project uses [clean-css-cli](https://www.npmjs.com/package/clean-css-cli) to minify TailwindCSS during build.
+
+Install Clean-CSS CLI
+`yarn add clean-css-cli -g`
+**Note:** Global install via -g option is recommended unless you want to execute the binary via a relative path, i.e. ./node_modules/.bin/cleancss
+
 ## Getting Started
 - Install dependencies `yarn install` or `npm i`
 - Rename the `config.yml.example` to `config.yml` and add the Shopify Theme credentials
 - Run a build test `yarn build` if no errors then you are good to go
+**Note:** the first time you run `yarn start` or `yarn deploy` to a new theme you must comment out `ignore_files`.
+```
+# - config/settings_data.json
+# - "*.js"
+# - "*.hot-update.json"
+```
 
 ## Whitespace control
 In [Liquid](https://shopify.github.io/liquid/basics/whitespace/), you can include a hyphen in your tag syntax `{{-`, `-}}`, `{%-`, and `-%}` to strip whitespace from the left or right side of a rendered tag.
@@ -75,11 +88,9 @@ If you don’t want any of your tags to print whitespace, as a general rule you
 When in development mode `yarn start` hot module reloading is enabled. It watched for changes to `JavaScript`, `CSS` and `Liquid` files. When JS or CSS is changes the browser will change without the need to refresh. When changes are made to liquid files a manual browser reload is required.
 
 ## Self-Signed Certificate
-In the event that you find the HMR assets are not loading and the requests to localhost:9000 are 404 you will need to approve or pass a valid certificate.
-![image](https://user-images.githubusercontent.com/29803478/99157400-46787900-267d-11eb-96be-4796dbd01ef9.png)
-To solve this issue you can open a new browser window and approve the SSL Certificate or pass a valid certificate as mentioned here [devServer.https](https://webpack.js.org/configuration/dev-server/#devserverhttps).
+In the event that you find the HMR assets are not loading and the requests to localhost:9000 are 404 you will need to approve or pass a valid certificate.<br>![image](https://user-images.githubusercontent.com/29803478/99157400-46787900-267d-11eb-96be-4796dbd01ef9.png)<br>To solve this issue you can open a new browser window and approve the SSL Certificate or pass a valid certificate as mentioned here [devServer.https](https://webpack.js.org/configuration/dev-server/#devserverhttps).
 
 ## 🛣️ Roadmap
 - [ ] Finalization and First Release
 - [x] Update copy-webpack-plugin to v6 [Issue #519](https://github.com/webpack-contrib/copy-webpack-plugin/issues/519) Thanks [@felixmosh](https://github.com/felixmosh)!
-- [ ] Webpack 5? 🤔
+- [ ] Webpack 5? 🤔

src/components/layout/theme.js

@@ -1,4 +1,4 @@
 import "./theme.scss";
 
-const themeFunction = () => 'Theme JS ES6 Function';
+const themeFunction = () => 'Theme JS ES6 Function HMR TEST!';
 console.log(themeFunction())

src/components/layout/theme.liquid

@@ -29,7 +29,7 @@
   <title>{{ seo_title | strip }}</title>
 
   {{ content_for_header }} <!-- Header hook for plugins -->
-  {{ 'tailwind.css' | asset_url | stylesheet_tag }}
+  {{ 'tailwind.min.css' | asset_url | stylesheet_tag }}
   {{ 'bundle.theme.css' | asset_url | stylesheet_tag }}
   {{ 'bundle.theme.js' | asset_url | script_tag }}
 </head>

webpack.config.js

@@ -85,6 +85,8 @@ module.exports = {
                         'echo -- Webpack build complete ✓',
                         'echo -- Building TailwindCSS...',
                         'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
+                        'echo -- Minifying TailwindCSS',
+                        'cleancss -o dist/assets/tailwind.min.css.liquid dist/assets/tailwind.css.liquid',
                         'echo -- Deploying to theme ✈️',
                         'shopify-themekit deploy --env=development',
                         'echo -- Deployment competed ✓',
@@ -117,7 +119,7 @@ module.exports = {
                                       /{{\s*'([^']+)'\s*\|\s*asset_url\s*\|\s*(stylesheet_tag|script_tag)\s*}}/g,
                                       function (matched, fileName, type) {
                                           if (type === 'stylesheet_tag') {
-                                              if (fileName !== 'tailwind.css') {
+                                              if (fileName !== 'tailwind.min.css') {
                                                   return '';
                                               }
                                               return matched;