Skip to content

Instantly share code, notes, and snippets.

@StarWar
Forked from nerdcave/environment.js
Created December 25, 2018 14:28
Show Gist options
  • Save StarWar/1735d5a90e271477face76e4f73332b4 to your computer and use it in GitHub Desktop.
Save StarWar/1735d5a90e271477face76e4f73332b4 to your computer and use it in GitHub Desktop.
PurgeCSS config for Rails 5 and Webpacker (along with Tailwind CSS and Vue.js, in this case)
// first run:
// yarn add glob-all purgecss-webpack-plugin --dev
/*
config/webpack/environment.js
PurgeCSS configuration for Rails 5 + Webpacker + Tailwind CSS + Vue.js
Optionally, put this in production.js if you only want this to apply to production.
For example, your app is large and you want to optimize dev compilation speed.
*/
const { environment } = require('@rails/webpacker')
const vue = require('./loaders/vue') // if using Vue.js
const path = require('path')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
environment.loaders.append('vue', vue) // if using Vue.js
// ensure classes with special chars like -mt-1 and md:w-1/3 are included
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g);
}
}
environment.plugins.append('PurgecssPlugin', new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, '../../app/javascript/**/*.vue'), // if using Vue.js
path.join(__dirname, '../../app/javascript/**/*.js'),
]),
extractors: [ // if using Tailwind
{
extractor: TailwindExtractor,
extensions: ['html', 'js', 'vue']
}
]
}));
module.exports = environment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment