@utilitycss/extract-used-atoms-webpack-plugin

Create a CSS file with only the used classes from an atomic bundle

Usage no npm install needed!

<script type="module">
  import utilitycssExtractUsedAtomsWebpackPlugin from 'https://cdn.skypack.dev/@utilitycss/extract-used-atoms-webpack-plugin';
</script>

README

Build Status

extract-used-atoms-webpack-plugin

Create a CSS file with only the used classes from an atomic bundle.

When your atomic bundle is used in the context of a single build pipeline, its size can be greatly reduced by only including the used classes. This can also be useful to generate small self contained components with a minimal set of needed CSS.

Installation

$ yarn install @utilitycss/extract-used-atoms-webpack-plugin

Usage

In your webpack config plugins section add:

new ExtractUsedAtoms({
  filename: "used-atoms",
  scope: "@dx",
  cssBundle: "@dx/all",
  excluded: ["@dx/mocks"],
})

where:

  • filename is the name for the generated CSS assets
  • scope is the scope of your atom packages.
  • cssBundle [required] is your "all" atom generated package
  • excluded is a list of strings or RegExp of packages to exclude