Merge pull request #67 from 3daddict/feature/jit-engine-2

tailwindcss update and JIT engine update, not pretty but its working

Author: mike-diff

package.json

@@ -7,50 +7,50 @@
   "author": "Mike Salvati",
   "private": true,
   "scripts": {
-    "start": "webpack serve --mode=development --config webpack.dev.js",
-    "build": "webpack --mode=production --config webpack.prod.js && 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 --config webpack.prod.js && 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"
+    "start": "TAILWIND_MODE=watch webpack serve --mode=development --config webpack.dev.js",
+    "build": "webpack --mode=production --config webpack.prod.js && npx tailwindcss build -i 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 --config webpack.prod.js && npx tailwindcss build -i 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": {
     "validator": "^13.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.14.7",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@shopify/eslint-plugin": "^39.0.4",
+    "@shopify/eslint-plugin": "^40.4.0",
     "@shopify/themekit": "^1.1.7",
-    "autoprefixer": "^10.2.3",
+    "autoprefixer": "^10.3.1",
     "axios": "^0.21.1",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "browser-sync": "^2.26.14",
-    "clean-css-cli": "^4.3.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-css-cli": "^5.3.0",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "6.x",
     "core-js": "^3.8.3",
-    "css-loader": "^5.0.1",
+    "css-loader": "^6.2.0",
     "debug": "^4.3.1",
-    "eslint": "7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-webpack-plugin": "^2.4.3",
+    "eslint": "^7.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-webpack-plugin": "^3.0.1",
     "file-loader": "^6.2.0",
     "glob": "^7.1.6",
     "graphql": "^15.5.0",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.3.2",
     "liquidjs": "^9.20.1",
-    "mini-css-extract-plugin": "^1.3.4",
+    "mini-css-extract-plugin": "^2.1.0",
     "node-fetch": "^2.6.1",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.2.4",
-    "postcss-loader": "^4.2.0",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
     "prettier": "^2.2.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
-    "style-loader": "^2.0.0",
-    "tailwindcss": "^2.0.2",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "tailwindcss": "^2.2.7",
     "transform-class-properties": "^1.0.0-beta",
     "typescript": "^4.1.3",
     "webpack": "^5.18.0",
@@ -60,6 +60,6 @@
     "webpack-merge": "^5.7.3",
     "webpack-shell-plugin-next": "^2.2.2",
     "yaml": "^1.10.0",
-    "yargs": "^16.2.0"
+    "yargs": "^17.0.1"
   }
 }

postcss.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-    plugins: [require('autoprefixer')],
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
 };

shopify-dev-utils/tags/paginate.js

@@ -61,7 +61,7 @@ exports.Paginate = {
             .on('start', () => {
             const toknenizer = new liquidjs_1.Tokenizer(tagToken.args);
             const list = toknenizer.readValue();
-            const by = toknenizer.readWord();
+            const by = toknenizer.readIdentifier();
             const perPage = toknenizer.readValue();
             liquidjs_1.assert(list.size() &&
                 by.content === 'by' &&

src/components/layout/theme.js

@@ -1,3 +1,4 @@
+import '../tailwind.css';
 
 const themeFunction = () => 'Theme JS ES6 Function!';
 console.log(themeFunction());

tailwind.config.js

@@ -1,19 +1,12 @@
 const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
 
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
+  mode: 'jit',
   purge: {
     enabled: mode === "development" ? false : true,
-    content: [
-      './dist/layout/*.liquid',
-      './dist/templates/*.liquid',
-      './dist/sections/*.liquid',
-      './dist/snippets/*.liquid',
-    ],
+    content: ["./src/**/*.{js,liquid}"],
   },
+  darkMode: false,
   theme: {
     extend: {},
   },

webpack.dev.js

@@ -93,7 +93,7 @@ module.exports = merge(common, {
                     '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 ✓',
+                    'echo -- Deployment completed ✓',
                     'shopify-themekit open',
                 ],
                 blocking: true,