https://github.com/ameerthehacker/express-slick-css
:balloon: An express middleware which cleans all the unused css in the template and makes the css slick
https://github.com/ameerthehacker/express-slick-css
css express middleware
Last synced: 5 months ago
JSON representation
:balloon: An express middleware which cleans all the unused css in the template and makes the css slick
- Host: GitHub
- URL: https://github.com/ameerthehacker/express-slick-css
- Owner: ameerthehacker
- License: mit
- Created: 2018-08-03T14:29:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-14T06:04:16.000Z (almost 8 years ago)
- Last Synced: 2025-10-09T01:29:10.492Z (9 months ago)
- Topics: css, express, middleware
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/express-slick-css
- Size: 148 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Slick CSS :balloon:
[](https://circleci.com/gh/ameerthehacker/express-slick-css/tree/master)
[](https://codecov.io/gh/ameerthehacker/express-slick-css)
[](https://github.com/facebook/jest)
No more bloated CSS styles :poop: 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
```bash
npm install express-slick-css --save
```
2. Add all the stylesheets to the layout
```html
...
...
```
3. Add the middleware before all the routes
```javascript
const slickify = require('express-slick-css');
...
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
```javascript
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 :star: the repo
## License
MIT © [Ameer Jhan](mailto:ameerjhanprof@gmail.com)
[uncss]: https://github.com/uncss/uncss