From cdd60d1eb61df115546139c045afc4633b330623 Mon Sep 17 00:00:00 2001 From: anibalsanchez Date: Sat, 9 May 2020 10:00:13 +0200 Subject: [PATCH] feat(tailwind): Update to TailwindCSS v1.4 and general improv --- dist/main.css | 2 + package.json | 27 ++++++----- postcss.config.js | 56 ++++++++++++++--------- tailwind.config.js | 3 ++ webpack.config.js | 112 +++++++++++++++++++++++++++++++++++++++------ 5 files changed, 152 insertions(+), 48 deletions(-) create mode 100644 dist/main.css diff --git a/dist/main.css b/dist/main.css new file mode 100644 index 0000000..012c21b --- /dev/null +++ b/dist/main.css @@ -0,0 +1,2 @@ +@import url(https://fonts.googleapis.com/css?family=Muli); +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */a{background-color:transparent}b{font-weight:bolder}p{margin:0}*,:after,:before{box-sizing:border-box;border:0 solid #d2d6dc}a{color:inherit;text-decoration:inherit;--text-opacity:1;color:#ffa32b;color:rgba(255,163,43,var(--text-opacity));text-decoration:none}p{margin-top:1.5rem} diff --git a/package.json b/package.json index 50b6072..9b0048d 100644 --- 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 index fd68cf5..d860475 100644 --- 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-/.:]+(? 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 index d9f4e2f..5fed016 100644 --- 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 index 6d48711..3f7744f 100644 --- 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, };