diff --git a/package.json b/package.json
index 12d074e..fc1cc9b 100644
--- a/package.json
+++ b/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",
diff --git a/readme.md b/readme.md
index 472c413..b9d5033 100644
--- a/readme.md
+++ b/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.
-
-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.
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? π€
\ No newline at end of file
+- [ ] Webpack 5? π€
diff --git a/src/components/layout/theme.js b/src/components/layout/theme.js
index de4e4e2..fe0fa0c 100644
--- a/src/components/layout/theme.js
+++ b/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())
\ No newline at end of file
diff --git a/src/components/layout/theme.liquid b/src/components/layout/theme.liquid
index ba8cd0b..50e7398 100644
--- a/src/components/layout/theme.liquid
+++ b/src/components/layout/theme.liquid
@@ -29,7 +29,7 @@
{{ seo_title | strip }}
{{ content_for_header }}
- {{ '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 }}
diff --git a/webpack.config.js b/webpack.config.js
index 68b3522..7e0f955 100644
--- a/webpack.config.js
+++ b/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;