Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winston0410/sparrow
A PostCSS plugin that helps you remove, replace, append or prepend CSS declarations without the need of writing another PostCSS plugin
https://github.com/winston0410/sparrow
hongkong postcss postcss-plugins
Last synced: about 1 month ago
JSON representation
A PostCSS plugin that helps you remove, replace, append or prepend CSS declarations without the need of writing another PostCSS plugin
- Host: GitHub
- URL: https://github.com/winston0410/sparrow
- Owner: winston0410
- License: mit
- Created: 2020-08-10T00:17:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-30T10:52:55.000Z (over 4 years ago)
- Last Synced: 2024-11-21T05:38:27.971Z (2 months ago)
- Topics: hongkong, postcss, postcss-plugins
- Language: JavaScript
- Homepage:
- Size: 2.77 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Sparrow
[](https://snyk.io/test/github/winston0410/sparrow?targetFile=package.json) [](https://codeclimate.com/github/winston0410/sparrow/maintainability) [](https://www.codacy.com/manual/winston0410/sparrow?utm_source=github.com&utm_medium=referral&utm_content=winston0410/sparrow&utm_campaign=Badge_Grade) [](https://codeclimate.com/github/winston0410/sparrow/test_coverage)
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.
```css
/* Original Input */
.foo {
padding: 4px;
font-size: 20px;
letter-spacing: 10px;
}
.bar {
margin: 50px;
padding: 4px;
}
```
```javascript
//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")
]
}
]
})
]
}
```
```css
/* 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](https://github.com/winston0410/sparrow/blob/master/LIST.md).
## Made in Hong Kong :free: :free:
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](https://github.com/postcss/postcss#usage).
Input this command in terminal and download this PostCSS plugin.
```shell
npm i postcss-sparrow
```
As this plugin requires PostCSS to parse your CSS first, you need to include it after plugins like [postcss-nested](https://www.npmjs.com/package/postcss-nested) or [postcss-mixins](https://www.npmjs.com/package/postcss-mixins).
## API Reference
### `options.rules`
For matching CSS Rules. E.g. `a{}`.
#### `options.rules.selectors` : Array
An array of selectors that you want to match with. Use `*` as wildcard and select all selectors.
#### `options.rules.inclusion` : Boolean
True for including and False for excluding selectors listed in `options.selectors`.
#### `options.rules.callbacks` : Array
An array of callbacks that you use to transform the selected declarations. The selected declaration will be passed in as an argument.
### `options.declarations`
For matching CSS Declarations. E.g. `font-size: 18px;`.
#### `options.declarations.selectors` : Array
An array of selectors that you want to match with. Use `*` as wildcard and select all selectors.
#### `options.declarations.inclusion` : Boolean
True for including and False for excluding selectors listed in `options.selectors`.
#### `options.declarations.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.
### V2.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`.