express-slick-css

Slick CSS 🎈

No more bloated CSS styles 💩 in your websites.

How it works?

1. It intercepts the res.render method in the express framework
2. Strips out all the stylesheets from the html document
3. Extracts only used styles using uncss
4. Creates a new stylesheet in the path specified(cssPath) and caches it
5. Adds the newly created stylesheet to the html document
6. Send the response

How to use it?

1. Install the package

npm install express-slick-css --save

1. Add all the stylesheets to the layout

...
<!-- rel='stylesheet' must be there otherwise it won't be picked up -->
<link href='/stylesheets/style.css' rel='stylesheet'>
...

1. Add the middleware before all the routes

const slickify = require('express-slick-csss');
...
app.use(slickify(options));
...
app.use('/', indexRoutes);

Options

Options	Description	Mandatory	Default Value
outputPath	path to save the new slick stylesheets	Yes	N/A
cssPath	path to look for stylesheets specified in link tag	No	outputPath
publicPath	public path for serving css asset eg. href="/css/style.css"	No	'/'
uncssOptions	Supports all the options provided by uncss	No	Refer uncss

Example

app.use(
  slickify({
    cssPath: path.join(__dirname, 'css'),
    // outputPath must exists
    // Add the outputPath to .gitignore if you want
    outputPath: path.join(__dirname, 'slick-css'),
    publicPath: '/stylesheets/',
    uncssOptions: {
      // Include global CSS frameworks here to keep it clean
      stylesheets  : ['lib/bootstrap/dist/css/bootstrap.css']
    }
  });
);

How to contribute?

Feel free to create an issue for a feature request, bug and you can take up any of those to make a pull request

Show your support by ⭐️ the repo

License

MIT © Ameer Jhan