From 7056fd5614fd2a41a5763d5ed33d53769b409598 Mon Sep 17 00:00:00 2001 From: Mike Date: Tue, 17 Nov 2020 09:17:45 -0800 Subject: [PATCH 1/4] Update readme.md --- readme.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index 472c413..ab05d77 100644 --- a/readme.md +++ b/readme.md @@ -75,11 +75,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.
![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). ## πŸ›£οΈ 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? πŸ€” From 007df8ce7b664c54ba518cd5ebaa06e677355c7c Mon Sep 17 00:00:00 2001 From: 3daddict Date: Wed, 18 Nov 2020 19:54:46 -0800 Subject: [PATCH 2/4] tailwind minification and readme update --- package.json | 7 ++++--- readme.md | 13 +++++++++++++ src/components/layout/theme.js | 2 +- src/components/layout/theme.liquid | 2 +- webpack.config.js | 6 ++++-- 5 files changed, 23 insertions(+), 7 deletions(-) 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 ab05d77..48b7cc4 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. 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..6bd9be2 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,8 +119,8 @@ 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') { - return ''; + if (fileName !== 'tailwind.min.css') { + return '';c } return matched; } From e240172a693bba6e8d72bd07cd1359b62eb0067a Mon Sep 17 00:00:00 2001 From: 3daddict Date: Wed, 18 Nov 2020 19:57:31 -0800 Subject: [PATCH 3/4] always mixing these up fix --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 48b7cc4..b9d5033 100644 --- a/readme.md +++ b/readme.md @@ -54,7 +54,7 @@ You can use node `v14` to install dependencies and run build commands. - 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. +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` From a4b42576ab40334090d8ca99e90d2f2d9cf82401 Mon Sep 17 00:00:00 2001 From: 3daddict Date: Wed, 18 Nov 2020 20:01:07 -0800 Subject: [PATCH 4/4] removed rouge c --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 6bd9be2..7e0f955 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -120,7 +120,7 @@ module.exports = { function (matched, fileName, type) { if (type === 'stylesheet_tag') { if (fileName !== 'tailwind.min.css') { - return '';c + return ''; } return matched; }