feat(tailwind): Update to TailwindCSS v1.4 and general improv

anibalsanchez · May 9, 2020 · cdd60d1 · cdd60d1
1 parent 50e6734
commit cdd60d1
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 48 deletions.
diff --git a/dist/main.css b/dist/main.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xt-tailwindcss-starter",
-  "version": "3.0.0",
+  "version": "3.4.0",
   "description": "A Tailwind CSS Starter. Based on Tailwind CSS, Webpack, PostCSS, cssnano and purgecss. Fully optimized for top performance.",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server",
@@ -16,24 +16,29 @@
   "author": "Extly CB",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.0",
-    "@tailwindcss/ui": "^0.1.3",
-    "cross-env": "^7.0.2",
-    "css-loader": "^3.4.2",
+    "@fullhuman/postcss-purgecss": "^2.2.0",
+    "@tailwindcss/custom-forms": "^0.2.1",
+    "@tailwindcss/ui": "^0.3.0",
+    "browser-sync-webpack-plugin": "^2.2.2",
+    "browser-sync": "^2.26.7",
+    "cross-env": "^7.0",
+    "css-loader": "^3.5.3",
     "cssnano-preset-advanced": "^4.0.7",
     "cssnano": "^4.1.10",
+    "filemanager-webpack-plugin": "^2.0.5",
     "glob": "^7.1.6",
-    "html-webpack-plugin": "^4.0.4",
+    "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "^0.9.0",
     "postcss-clean": "^1.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
-    "postcss": "^7.0.27",
-    "style-loader": "^1.1.3",
-    "tailwindcss": "^1.2.0",
+    "postcss": "^7.0.29",
+    "style-loader": "^1.2.1",
+    "tailwindcss": "^1.4.6",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack": "^4.42.1"
+    "webpack-copy-on-build-plugin": "^1.0.4",
+    "webpack-dev-server": "^3.11.0",
+    "webpack": "^4.43.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -6,31 +6,43 @@
  * @see       https://www.extly.com
  */
 
-const postcssImport = require('postcss-import');
-const tailwindCss = require('tailwindcss');
-const postcssNested = require('postcss-nested');
+ // Declaration of PostCss plugins
+ const postcssImport = require('postcss-import');
+ const tailwindCss = require('tailwindcss');
+ const postcssNested = require('postcss-nested');
+ const autoprefixer = require('autoprefixer');
 
-const autoprefixer = require('autoprefixer');
+ const productionMode = process.env.NODE_ENV === 'production';
 
-const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: [
-    './src/**/*.html',
-  ],
+ // Configure PostCss
+ const purgecss = require('@fullhuman/postcss-purgecss')({
+   // Specify the paths to all of the template files in your project
+   content: [
+     './src/**/*.html',
+     './src/**/*.vue',
+     './src/**/*.jsx',
+     // etc.
+   ],
 
-  defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
-});
+   // Include any special characters you're using in this regular expression
+   //   Ref: https://tailwindcss.com/course/optimizing-for-production
+   defaultExtractor: content => content.match(/[A-Za-z0-9-_:]/g) || []
+ });
 
-const nano = require('cssnano')({
-  preset: 'advanced',
-});
+ // More minification of CSS
+ const cssnano = require('cssnano')({
+   preset: 'advanced',
+ });
 
-module.exports = {
-  plugins: [
-    postcssImport,
-    tailwindCss,
-    postcssNested,
+ // Declare export for PostCss processing
+ module.exports = {
+   plugins: [
+     postcssImport,
+     tailwindCss,
+     postcssNested,
+     autoprefixer,
 
-    autoprefixer,
-    ...process.env.NODE_ENV === 'production' ? [purgecss, nano] : [],
-  ],
-};
+     // Only purge and minify in production
+     ...(productionMode ? [purgecss, cssnano] : []),
+   ],
+ };
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,6 +2,9 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
+  // Purge and minification on PostCSS, postcss.config.js
+  purge: false,
+
   theme: {
     extend: {
       screens: defaultTheme.screens,

diff --git a/webpack.config.js b/webpack.config.js
@@ -6,15 +6,103 @@
  * @see       https://www.extly.com
  */
 
+// Define the pages to be prototyped
+const prototypePages = [
+  'index',
+];
+
+// Declaration of Webpack plugins
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+const WebpackOnBuildPlugin = require('webpack-copy-on-build-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
-const devMode = process.env.NODE_ENV !== 'production';
+// Read the package configuration
+const packageConfig = require('./package.json');
 
-const prototypePages = [
-  'index',
+// Read the control flags
+const devMode = process.env.NODE_ENV === 'development';
+const productionMode = !devMode;
+
+// The proxy mode is only used within a template package
+const proxyMode = process.env.npm_lifecycle_event === 'dev-proxy' &&
+  packageConfig.config &&
+  packageConfig.config.proxyURL;
+
+// Output filenames
+const cssOutputfilename = devMode ? '[name].css' : '[name].css'; // [hash].
+const cssOutputchunkFilename = devMode ? '[id].css' : '[id].css'; // [hash].
+
+// Configure plugins for Webpack
+const plugins = [
+  new MiniCssExtractPlugin({
+    filename: cssOutputfilename,
+    chunkFilename: cssOutputchunkFilename,
+  }),
 ];
 
+// In Dev mode and not proxied,
+//  declare the pages to be processed
+if (devMode && !proxyMode) {
+  plugins.push(
+    ...prototypePages.map(
+      page => new HtmlWebpackPlugin({
+        filename: page + '.html',
+        template: 'src/' + page + '.html',
+      }))
+  );
+}
+
+// In proxy mode, keep php files updated
+if (proxyMode) {
+  // Watch php files
+  plugins.push(
+    new BrowserSyncPlugin({
+      proxy: {
+        target: packageConfig.config.proxyURL,
+      },
+      files: ['**/*.php'],
+      cors: true,
+      reloadDelay: 0,
+    }),
+  );
+}
+
+// In proxy mode or production mode,
+//  copy the css and js files to the template
+if (proxyMode || productionMode) {
+  // Copy files
+  plugins.push(
+    new WebpackOnBuildPlugin([{
+        from: path.resolve(__dirname, './dist/main.css'),
+        to: path.resolve(__dirname, './css/template.css'),
+      },
+      {
+        from: path.resolve(__dirname, './dist/main.js'),
+        to: path.resolve(__dirname, './js/template.js'),
+      },
+    ]),
+  );
+
+  // If there is an extra folder,
+  //  copy also the css file to the extra destination
+  if (packageConfig.config && packageConfig.config.extraCCProxyFolder) {
+    plugins.push(
+      new WebpackOnBuildPlugin([{
+          from: path.resolve(__dirname, './dist/main.css'),
+          to: path.resolve(packageConfig.config.extraCCProxyFolder, './css/template.css'),
+        },
+        {
+          from: path.resolve(__dirname, './dist/main.js'),
+          to: path.resolve(packageConfig.config.extraCCProxyFolder, './js/template.js'),
+        },
+      ]),
+    );
+  }
+}
+
+// Declare export for webpack processing
 module.exports = {
   entry: './src/styles.css',
   mode: process.env.NODE_ENV,
@@ -24,23 +112,17 @@ module.exports = {
       use: [{
           loader: MiniCssExtractPlugin.loader,
           options: {
-            hmr: process.env.NODE_ENV === 'development',
+            hmr: devMode,
           },
         },
+
+        // Load css
         'css-loader',
+
+        // Load PostCss, see postcss.config.js
         'postcss-loader',
       ],
     }, ],
   },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: devMode ? '[name].css' : '[name].[hash].css',
-      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-    }),
-    ...prototypePages.map(
-      page => new HtmlWebpackPlugin({
-        filename: page + '.html',
-        template: 'src/' + page + '.html',
-      })),
-  ],
+  plugins,
 };