Create Empty Project

These steps will help you understand how to install and configure the SASS preprocessor and PurgeCSS postprocessor to remove unused CSS classes from WEAVV.

Note: Just to be sure you have NodeJS installed.

Note: Require SASS preprocessor to use the @extend directive. (See Using WEAVV via CLI without doing it yourself.)

Let's Get Started

Create a new empty project directory.

$ mkdir new-project
$ cd new-project
# YARN
$ yarn init -y
# NPM
$ npm init -y

TERMINAL

Install mandatory gulp node modules.

# YARN
$ yarn add gulp node-sass gulp-sass gulp-sass-glob gulp-postcss gulp-purgecss gulp-rename autoprefixer --dev
# NPM
$ npm i gulp node-sass gulp-sass gulp-sass-glob gulp-postcss gulp-purgecss gulp-rename autoprefixer --save-dev

TERMINAL

Create an empty gulpfile.js task file.

$ nano gulpfile.js

TERMINAL

In the gulpfile.js, add these lines below to the file.

const gulp = require('gulp')
const sass = require('gulp-sass')(require('node-sass'))
const sassGlob = require('gulp-sass-glob')
const postCss = require('gulp-postcss')
const purgeCss = require('gulp-purgecss')
const autoPrefixer = require('autoprefixer')
const rename = require('gulp-rename')

// SASS Preprocessor
gulp.task('sass', () => {
return gulp.src('node_modules/weavv-css/weavv.scss')
.pipe(sassGlob())
.pipe(sass({ outputStyle: 'compressed' })
  .on('error', sass.logError))
.pipe(postCss([autoPrefixer()]))
// export `.scss` to `.css` in directory `css/`
.pipe(rename('style.css'))
.pipe(gulp.dest('css'))
})

// Remove unused CSS Classes
gulp.task('purge-css', () => {
return gulp.src('css/style.css')
.pipe(purgeCss({
    content: [
      'index.html'
    ],
    defaultExtractor: content => content.match(/[w-/:()]+(?<!:)/g) || [],
    // add whitelisting e.g. '/-webkit-scrollbar-thumb$/'
    whitelistPatterns: [],
    keyframes: true
}))
// export new CSS in directory `css/`
.pipe(rename('style.css'))
.pipe(gulp.dest('css'))
})

JavaScripts

Install weavv-css module.

# YARN
$ yarn add weavvcss
# NPM
$ npm i weavvcss

TERMINAL

Create a new directory for exported or preprocessed CSS.

$ mkdir css

TERMINAL

Create an empty index.html file.

$ nano index.html

TERMINAL

Add the basic HTML template below to the index.html. And import the final build CSS file css/styles.css with <link> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content=" width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link defer href="css/style.css" rel="stylesheet" rel="preload" as="style" media="all">
</head>
<body></body>
</html>

TERMINAL

Your new project setup is now ready for SASS preprocessing and purging unused CSS with the PurgeCSS.

Run the command below and check the CSS file located in css/style.css has only a few CSS classes that take a few couple hundred bytes of file size. The rest has stripped down by the PurgeCSS that refers to the target .html files.

# build WEAVV CSS
$ gulp sass
# create new `style.css` and remove
# unused CSS classes from `index.html`
$ gulp purge-css

TERMINAL

Try to add a new line in the <body> tag.

<div class="text-xl-2">
  TEXT
</div>

TERMINAL

Try run the build command again. This time the css/style.css file has added more CSS classes that index.html is being used.

# build WEAVV CSS
$ gulp sass
# create new `style.css` and remove
# unused CSS classes from `index.html`
$ gulp purge-css

TERMINAL