A PostCSS plugin that helps you search CSS declarations and rules 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')({
declarations: [
{
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;
}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.
This plugin is made with love by a Hong Konger.
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-sparrowAs this plugin requires PostCSS to parse your CSS first, you need to include it after plugins like postcss-nested or postcss-mixins.
For matching CSS Rules. E.g. a{}.
An array of selectors that you want to match with. Use * as wildcard and select all selectors.
True for including and False for excluding selectors listed in options.selectors.
An array of callbacks that you use to transform the selected declarations. The selected declaration will be passed in as an argument.
For matching CSS Declarations. E.g. font-size: 18px;.
An array of selectors that you want to match with. Use * as wildcard and select all selectors.
True for including and False for excluding selectors listed in options.selectors.
An array of callbacks that you use to transform the selected declarations. The selected declaration will be passed in as an argument.
PostCSS Sparrow has upgraded its code for PostCSS 8. It will not be compatible with any version lower than 8.0.0.
PostCSS Sparrow now filter for Declarations, Rules and AtRules. Therefore, options.transformations which originally used for filtering declarations is renamed to options.declarations.