From 8dcfab79cb7f969d33539233426686a3a2aaae1a Mon Sep 17 00:00:00 2001
From: MarcoGlauser <marco.glauser@gmail.com>
Date: Fri, 25 Sep 2020 16:03:04 +0100
Subject: [PATCH 1/2] update webpack config to work with current dependencies
change purgecss extractor to tailwind recommendation
fix CopyWebpackPlugin configuration syntax
---
webpack.config.js | 35 ++++++++++++++++-------------------
1 file changed, 16 insertions(+), 19 deletions(-)
diff --git a/webpack.config.js b/webpack.config.js
index fc0357e..d881172 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,16 +35,15 @@ if ( isProduction ) {
css: [
'./node_modules/tailwindcss/dist/base.css'
],
- extractors: [
- {
- extractor: class TailwindExtractor {
- static extract(content) {
- return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
- }
- },
- extensions: ['php', 'js', 'svg', 'css',]
- }
- ],
+ defaultExtractor: content => {
+ // Capture as liberally as possible, including things like `h-(screen-1.5)`
+ const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
+
+ // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+ const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
+
+ return broadMatches.concat(innerMatches)
+ },
whitelistPatterns: getCSSWhitelistPatterns()
})
)
@@ -87,7 +86,6 @@ const config = {
loader: 'css-loader',
options: {
importLoaders: 1,
- context: 'postcss',
sourceMap: ! isProduction
}
},
@@ -113,13 +111,12 @@ const config = {
new MiniCssExtractPlugin({
filename: `[name]${prefix}.css`,
}),
- new CopyWebpackPlugin([{
- from: './assets/images/',
- to: 'images',
- ignore: [
- '.DS_Store'
- ]
- }]),
+ new CopyWebpackPlugin({
+ patterns: [{
+ from: './assets/images/',
+ to: 'images',
+ }]
+ }),
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
]
}
@@ -180,4 +177,4 @@ function getCSSWhitelistPatterns() {
];
}
-module.exports = config
\ No newline at end of file
+module.exports = config
From da609ee12932609428ae5b3a3970a4d6966f8756 Mon Sep 17 00:00:00 2001
From: MarcoGlauser <marco.glauser@gmail.com>
Date: Sun, 27 Sep 2020 19:19:46 +0100
Subject: [PATCH 2/2] added comment to tailwind docs for purgecss extractor and
added ignoring of .DS_Store with the new CopyWebpackPlugin configuration
options
---
webpack.config.js | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/webpack.config.js b/webpack.config.js
index d881172..0a11582 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,6 +35,8 @@ if ( isProduction ) {
css: [
'./node_modules/tailwindcss/dist/base.css'
],
+ // Use Extractor configuration from Tailwind Docs
+ // https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
defaultExtractor: content => {
// Capture as liberally as possible, including things like `h-(screen-1.5)`
const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
@@ -115,6 +117,11 @@ const config = {
patterns: [{
from: './assets/images/',
to: 'images',
+ globOptions: {
+ ignore: [
+ '**/.DS_Store'
+ ]
+ }
}]
}),
new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })