Optimization

Lazyy CSS can be optimized using PurgeCSS. This will remove unused CSS from your project.

Scripts

1. Install the npm package as described on the Installation page. Create an index.scss file and import the index.scss file from node modules.

@import '../node_modules/lazyy-css/src/sass/index.scss';

2. Open package.json

3. Add the following scripts.

"lazyy": "sass  --no-source-map styles/index.scss:styles/index.css",
"watch:lazyy": "sass  --no-source-map styles/index.scss:styles/index.css --watch",
"purge:lazyy": "purgecss --css styles/index.css --content "./**/*.html" --output styles/",
"build:lazyy": "npm run purge:lazyy && postcss styles/index.css -u autoprefixer cssnano -r --no-map"

4. Install these dependencies.

npm i @fullhuman/postcss-purgecss autoprefixer cssnano postcss-cli purgecss sass

5. Run this command.

npm run lazyy

This will import every class available. To watch constant changes in the index.scss file, run this command.

npm run watch:lazyy

Optimizing for Production

To purge the unused styles, run the following command before production.

npm run build:lazyy

Using a framework?

Replace .html in the scripts with your directory, .js/jsx/ts/tsx.

For example,

"lazyy": "sass  --no-source-map styles/index.scss:styles/index.css",
"watch:lazyy": "sass  --no-source-map styles/index.scss:styles/index.css --watch",
"purge:lazyy": "purgecss --css styles/index.css --content "pages/**/*.js" --output styles/",
"build:lazyy": "npm run purge:lazyy && postcss styles/index.css -u autoprefixer cssnano -r --no-map"