Ember + TailwindCSS + PurgeCSS + CSS Modules

ember-cil-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const env = EmberApp.env();

const purgecssOptions = {
  content: ['./app/index.html', './app/**/*.hbs', './node_modules/**/*.hbs'],
  defaultExtractor: (content) => {
    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
  },
  // Leave css definitions starting with an underscore untouched.
  // This prevents css definitions generated by ember-css-modules
  // from being purged.
  whitelistPatterns: [/^_/, /js-/]
};

const cssModulesPlugins = [
  require('postcss-import')({ path: ['node_modules'] }),
  require('postcss-css-variables')({ preserve: true }),
  require('tailwindcss')('./app/styles/tailwind.config.js'),
  require('autoprefixer')({
    overrideBrowserslist: require('./config/targets').browsers
  })
];

if (env !== 'development' || process.env.PURGE_CSS === 'true') {
  const purgecss = require('@fullhuman/postcss-purgecss')(purgecssOptions);
  cssModulesPlugins.push(purgecss);
}

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    cssModules: {
      plugins: cssModulesPlugins
    }
  });

  return app.toTree();
};