Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/garthdb/postcss-inherit
A PostCSS port of https://github.com/reworkcss/rework-inherit
https://github.com/garthdb/postcss-inherit
css npm postcss
Last synced: 2 months ago
JSON representation
A PostCSS port of https://github.com/reworkcss/rework-inherit
- Host: GitHub
- URL: https://github.com/garthdb/postcss-inherit
- Owner: GarthDB
- License: apache-2.0
- Created: 2015-06-15T16:00:58.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-19T05:39:45.000Z (over 6 years ago)
- Last Synced: 2024-09-14T13:09:21.010Z (3 months ago)
- Topics: css, npm, postcss
- Language: JavaScript
- Homepage:
- Size: 154 KB
- Stars: 16
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Inherit
[](https://travis-ci.org/GarthDB/postcss-inherit) [](https://codeclimate.com/github/GarthDB/postcss-inherit) [](https://codeclimate.com/github/GarthDB/postcss-inherit) [](https://codecov.io/gh/GarthDB/postcss-inherit) [](https://david-dm.org/GarthDB/postcss-inherit) [](http://inch-ci.org/github/GarthDB/postcss-inherit) [](https://badge.fury.io/js/postcss-inherit)
---
Inherit plugin for [PostCSS](https://github.com/postcss/postcss). Allows you to inherit all the rules associated with a given selector. Modeled after [rework-inherit](https://github.com/reworkcss/rework-inherit).
## API
```js
var postcss = require('postcss');
var inherit = require('postcss-inherit')
postcss([ inherit ])
.process(css, { from: 'src/app.css', to: 'app.css' })
.then(function (result) {
fs.writeFileSync('app.css', result.css);
if ( result.map ) fs.writeFileSync('app.css.map', result.map);
});
```
### Inherit(options{})
Option parameters:
* `propertyRegExp` - Regular expression to match the "inherit" at-rule.
By default, it is `/^(inherit|extend)s?:?$/i`, so it matches "inherit", "inherits", "extend", and "extends".
For example, if you only want to allow the `extend` keyword,
set the regular expression to `/^extend$/`.
## Examples
### Regular inherit
```css
.gray {
color: gray;
}
.text {
@inherit: .gray;
}
```
yields:
```css
.gray,
.text {
color: gray;
}
```
### Multiple inherit
Inherit multiple selectors at the same time.
```css
.gray {
color: gray;
}
.black {
color: black;
}
.button {
@inherit: .gray, .black;
}
```
yields:
```css
.gray,
.button {
color: gray;
}
.black,
.button {
color: black;
}
```
### Placeholders
Any selector that includes a `%` is considered a placeholder.
Placeholders will not be output in the final CSS.
```css
%gray {
color: gray;
}
.text {
@inherit: %gray;
}
```
yields:
```css
.text {
color: gray;
}
```
### Partial selectors
If you inherit a selector,
all rules that include that selector will be included as well.
```css
div button span {
color: red;
}
div button {
color: green;
}
button span {
color: pink;
}
.button {
@inherit: button;
}
.link {
@inherit: div button;
}
```
yields:
```css
div button span,
div .button span,
.link span {
color: red;
}
div button,
div .button,
.link {
color: green;
}
button span,
.button span {
color: pink;
}
```
### Chained inheritance
```css
.button {
background-color: gray;
}
.button-large {
@inherit: .button;
padding: 10px;
}
.button-large-red {
@inherit: .button-large;
color: red;
}
```
yields:
```css
.button,
.button-large,
.button-large-red {
background-color: gray;
}
.button-large,
.button-large-red {
padding: 10px;
}
.button-large-red {
color: red;
}
```
### Media Queries
Inheriting from inside a media query will create a copy of the declarations.
It will act like a "mixin".
Thus, with `%`placeholders, you won't have to use mixins at all.
Each type of media query will need its own declaration,
so there will be some inevitable repetition.
```css
.gray {
color: gray
}
@media (min-width: 320px) {
.button {
@inherit: .gray;
}
}
@media (min-width: 320px) {
.link {
@inherit: .gray;
}
}
```
yields:
```css
.gray {
color: gray;
}
@media (min-width: 320px) {
.button,
.link {
color: gray;
}
}
```
### Limitations
* When in a media query, you can only inherit rules from root, or rules contained in a media query with the same parameters.