Noiseless Party Machine
Introducing npm Teams! Private packages + team management tools.Learn more »

express-slick-css

1.0.0 • Public • Published

Slick CSS 🎈

CircleCI codecov tested with jest

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

Install

npm i express-slick-css

DownloadsWeekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

29.5 kB

Total Files

24

Last publish

Collaborators

  • avatar