Optimization

The tutorial below provides several ways to optimize CSS files

Limitation

In development, you will see a rather medium sized low-specificity CSS file (~150kb) because of dark mode, responsive spacing & other utility classes. However, the good news is you can still achieve very small CSS file in production mode by combining or using one of these 3 solutions below:

• selectively import CSS files
• minify the CSS
• remove the unused CSS

tip

Remember to regularly back up your project folder before doing optimization steps to avoid data loss

Selectively import CSS files

The easiest way to optimize CSS & achieve more efficient file size is by wisely import the components.

Open main.css (a CSS file which used to gather all other relevant CSS files). Remove the components or utilities which are not needed.

@import "src/components/alert.css";
@import "src/components/badge.css";
@import "src/components/button.css";
@import "src/components/card.css";

After that, compile the main.css file using this command

npx postcss main.css --output dist/Ravenbright.min.css

Minify the CSS

Minify means to delete unneeded characters such as blank, line break, etc. Consequently, in layman's terms, it can reduce the CSS file size so the browser can read CSS file faster.

There exists various CSS minify tools, however, to streamline the build process, we will use CSSnano as the example because it's available as PostCSS plugin.

Step 1: install CSSnano

Make sure you have already installed PostCSS. The easiest way to install CSSnano is by installing via CLI.

npm install cssnano PostCSS --save-dev

After that, you should install PostCSS runner. Run this command if you haven't install PostCSS runner yet

npm install --save-dev PostCSS-CLI

Then add the plugin into postcss.config.js file.

module.exports = {
  plugins: [
    require("postcss-mixins),
    require("postcss-import),
    require("postcss-nested),
    require("cssnano)({
      preset: "default",
    }),
  ],
};

Step 2: use CSSnano

You can now minify your CSS files! Try it out by creating a CSS file in your project named input.css.

npx postcss main.css --output dist/Ravenbright.min.css

For more information, check out the official CSSNano plugin: https://cssnano.co/.

Remove unused CSS using PurgeCSS

tip

It's recommended to utilize PurgeCSS in production environments.

After installed the PurgeCSS into PostCSS, unless you are setting up the Purge CSS in production, you have to rebuild Ravenbright CSS. This can happen every time you customize the stylesheets & when the utility is not existed yet in your current CSS file.

You can establish the option to only use Purge CSS in production by using these following codes:

const purgecss = require("@fullhuman/postcss-purgecss)({
    content: ["index.html", "./**/*.html", "./**/*.js"],
    options: {
        safelist: [/^html/, /"dark"^/, /^dark-/],
    },
});

module.exports = {
  plugins: [
        ...(process.env.NODE_ENV === "production" ? [purgecss, cssnano] : [])
  ],
};

After that, you can compile the PostCSS with this command:

cross-env NODE_ENV=production postcss main.css --output dist/ravenbright.min.css

info

Using purgeCSS in productions means you should use a tool to easily run that script across platforms. Ravenbright CSS currently use cross-env. You can utilize other tools to achieve this task.

Install PurgeCSS via npm

npm i -D @fullhuman/PostCSS-purgecss PostCSS

Then add the plugin to PostCSS.config.js file.

const purgecss = require("@fullhuman/PostCSS-purgecss);
module.exports = {
  plugins: [
    require("cssnano)({
      preset: "default",
    }),
    purgecss({
      content: ["./**/*.html"],
    }),
  ],
};

After that, compile the main.css file using this command

npx postcss main.css --output dist/ravenbright.min.css

For more information, read the official PurgeCSS plugin