You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

css-byebye

Package Overview
Dependencies
1
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-byebye

Remove the CSS rules that you don't want, with a list of selectors


Version published
Maintainers
1
Created

Readme

Source

CSS Byebye

CSS Byebye is a node module that lets you explicitly remove the CSS rules that you don't want.


js-standard-style Build Status

Description

It's very simple: pass a list of selectors that you want to exclude and it will remove them and the associated rules from your CSS.

I've found some cases where this approach is easier than using more powerful tools like uncss. Use what's best for you and give some feedback :)

CSS Byebye is built with postcss.

Install

npm install postcss css-byebye -D

From v4, postcss is a peer dependency that you need to install yourself.

Usage

CSS Byebye is a CSS post processor and a postcss plugin.
Read the postcss docs to know how to use it for your setup.

Run it as indicated in postcss docs:

postcss(cssbyebye(options)).process(css)
  • css is your stylesheet
  • options is an object that has at least the rulesToRemove property defined.

options

rulesToRemove is an array of strings or regular expressions (selectors).

If you provide a string, it will remove the rule(s) for this exact selector.

Examples

Some CSS:

a {
  font-size: 12px;
}
.hello .h1 {
  background: red;
}
.world {
  color: blue;
}

Using the plugin:

var postcss = require('postcss')
var cssbyebye = require('css-byebye')

var rulesToRemove = ['.hello .h1', '.world']
var options = {rulesToRemove: rulesToRemove, map: false}

// pretend that css var contains the css above
var result = postcss(cssbyebye(options)).process(css)

result will be an object like this:

{
  css: 'a { font-size: 12px; }'
}

If you use the postcss map option, then source map will be added to the result object.

You can mix strings and regular expressions
var rulesToRemove = ['.hello', /.*\.world.*/]

In this case, it would:

  • remove a rule with the exact selector .hello
  • remove any rule that contains the .world class.
Control directives

You can ignore certain rules or certain block of rules to avoid them being removed, even if they match the criteria, adding comments with control directives. These comments will be removed from the final code.

var rulesToRemove = ['.hello .h1', '.world']
input
a {
  font-size: 12px;
}
/* byebye:ignore */
.hello .h1 {
  background: red;
}
.hello .h1 {
  text-align: left;
}
/* byebye:begin:ignore */
.world {
  color: blue;
}
.world {
  border: 1px solid #ccc;
}
/* byebye:end:ignore */
.world {
  background: white;
}
output
a {
  font-size: 12px;
}
.hello .h1 {
  background: red;
}
.world {
  color: blue;
}
.world {
  border: 1px solid #ccc;
}

Keywords

FAQs

Package last updated on 04 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc