postcss-sparrow

Sparrow

A PostCSS plugin that helps you search CSS declarations by selectors. Avoid the hassle of reinventing the wheel and filter selectors you want again when you create a new PostCSS plugin.

/* Original Input */
.foo {
  padding: 4px;
  font-size: 20px;
  letter-spacing: 10px;
}
 
.bar {
  margin: 50px;
  padding: 4px;
}

//postcss.config.js or other files you use to config PostCSS
 
module.exports = {
  plugins: [
    //Other plugins...
 
    require('postcss-sparrow')({
      transformations: [
        {
          selectors: ['*'],
          inclusion: true,
          callbacks: [
            (decl) => {
              //Decl is the declaration object selected based on your options.
              //Do transformation to decl here
              if(decl.prop === 'padding'){
                decl.remove()
              }
            },
            //You can also import plugins here
            require("postcss-sparrow-auto-text-indent")
          ]
        }
      ]
    })
  ]
}

/* After the transformation of sparrow*/
.foo {
  font-size: 20px;
  letter-spacing: 10px;
  text-indent: 10px;
}
 
.bar {
  margin: 50px;
}

What can sparrow do for me?

With the power of Sparrow, you can easily filter selectors and transform them using PostCSS Sparrow plugins. You do not need to write filter logic again for a PostCSS plugin. Focus on transforming CSS instead.

Check out all PostCSS Sparrow plugins here.

Made in Hong Kong 🆓 🆓

This plugin is made with love by a Hong Konger.

Installation

As this plugin is a PostCSS plugin, you need to install and set up PostCSS first before use it. If you haven't used PostCSS before, set it up according to official docs.

Input this command in terminal and download this PostCSS plugin.

npm i postcss-sparrow

As this plugin requires PostCSS to parse your CSS first, you need to include it after plugins like postcss-nested or postcss-mixins.

API Reference

options.selectors : Array

An array of selectors that you want to match with. Use * as wildcard and select all selectors.

options.inclusion : Boolean

True for including and False for excluding selectors listed in options.selectors.

options.callbacks : Array

An array of callbacks that you use to transform the selected declarations. The selected declaration will be passed in as an argument.

Breaking changes

V1.0.0

PostCSS Sparrow has upgraded its code for PostCSS 8. It will not be compatible with any version lower than 8.0.0.