Bundle-css

Bundle css is a css bundler that internally leverages Closure Stylesheets to mangle and compress css files.

Why

To make it easier to adopt closure stylesheets for any project.

Getting started

npm i --save-dev bundle-css

Usage

The easiest way to get started is to create a config file (defaults to bcss.config.js). Example config:

module.exports = {
  input: {
    vendor: ['lib/*/**.css', 'bootstrap/*.css'],
    components: 'src/components/*/**.css',
  },
  output: {
    path: 'web/css',
    filename: '[name].min.css',
  }
  options: { 
    // js | ts
    extension: 'js', 
    // path to closure stylesheets java jar file
    executable: '$CLOSURE_STYLESHEET',
    // csj | esm
    format: 'esm',
  }
}

For every css file monitored, a file (js|ts) will be created. So given this example

/* index.css */
.my-class {
  font-size: 12px;
}
 
.my-second-class {
  font-size: 14px;
}
 

// index.js
import { myClass, mySecondClass } from './index.css'
 
console.log(myClass); // "a-b"

This autogenerated file will be created.

// index.css.js
// Managed by bundle-css.
const myClass = "a-b", mySecondClass = "a-c-b";
export { 
  myClass,
  mySecondClass
}

Running

Call program with with bcss.

• --config -c Specify config file. Defaults to bcss.config.js.
• --watch -w Setup a file watcher and recompile on change
• --clear Clear renaming map cache

Usage with js bundlers

To avoid name conflicts with webpack, e.g. resolving import index.css, add the webpack loader for css files which basically just redirects file access from the css file to the autogenerated js file bundle-css/loaders/webpack.

Roadmap

• Add tests
• Support sass/less integration.
• Disable renaming maps optimisation for development builds.
• Support proper integration with module bundlers, e.g. extracting the bundle configuration from webpack/rollup instead of the config file.