Production Build

Let's get hgrid CSS optimized for a live environment in a few, simple steps.

Every build pipeline is different. Here is one way to optimize global CSS, without a bundler, in a Node driven project.

Step 1: Minify

We already have sass installed in our project, so let's ask it to build our SCSS as a compressed CSS file. Edit the file paths in this package.json script to work with your folder structure:

  {
  "scripts": {
    "build:css": "sass --no-source-map --style=compressed assets/scss/main.scss:dist/css/style.min.css",
  }
}

Step 2: Prefix

Let's add some backwards compatibility for older browsers. We need to install postcss.

  $ npm i -D postcss postcss-cli

Then we add a new script in package.json where we replace X with how many older browser versions we want to support (check the Autoprefixer documentation for more information):

  {
  "scripts": {
    "build:css": "sass --no-source-map --style=compressed assets/scss/main.scss:dist/css/style.min.css",
    "prefix:css": "postcss --use autoprefixer --no-map -b 'last X versions' dist/css/style.min.css -o dist/css/style.min.css"
  }
}

Step 3: Purge

Time for a final cleanup. Let's remove every class from both hgrid and any custom CSS which isn't being used by our HTML or JS.

3a. Install PurgeCSS:

  $ npm i -D purgecss

3b. Tell it to scan the compiled CSS and compare the class names with what it finds in our HTML and JS files. All unused CSS will be removed.

In development mode, main.scss spits out 160 kB of CSS for the website you're looking at right now. When it goes live after compression and purging, only 54.3 kB is left, a 66% reduction.

  {
  "scripts": {
    "build:css": "sass --no-source-map --style=compressed assets/scss/main.scss:dist/css/style.min.css",
    "prefix:css": "postcss --use autoprefixer --no-map -b 'last X versions' dist/css/style.min.css -o dist/css/style.min.css",
    "purge:css": "purgecss --css ./dist/css/style.min.css --content ./dist/**/*.html ./dist/assets/js/*.js --output ./dist/css/style.min.css"
  }
}

3c. PurgeCSS wants to remove standalone pseudo classes from hgrid, so we have to tell it not to. Create purgecss.config.js at the root of your project. Add this regex to preserve selectors starting with :

  module.exports = {
  safelist: [/^:/]
}

3d. If you need to protect other CSS rules from the purgatory, add them to the safelist like this:

  module.exports = {
  safelist: ['some-class-name', 'hello' ]

  // Only names, no . or #

}

Another method is to add /* purgecss ignore */ right above the rule you want to preserve, in your (S)CSS file(s). There are a couple of other ways to do this, read more about safelisting in the PurgeCSS docs.

3e. Tell your purge script to look for the config file. Append this at the end of purge:css in package.json:

  --config ./purgecss.config.js

Step 4: Build

Now you can add a build command that combines the tree previous steps:

  {
  "scripts": {
    "build:css": "sass --no-source-map --style=compressed assets/scss/main.scss:dist/css/style.min.css",
    "prefix:css": "postcss --use autoprefixer --no-map -b 'last X versions' dist/css/style.min.css -o dist/css/style.min.css",
    "purge:css": "purgecss --css ./dist/css/style.min.css --content ./dist/**/*.html ./dist/assets/js/*.js --output ./dist/css/style.min.css --config ./purgecss.config.js",
    "build": "npm run build:css && npm run prefix:css && npm run purge:css"
  }
}

Before going live with your project, make sure npm run build is executed manually or by a continuous deployment script.

← Previous: Animations