https://github.com/matype/postcss-ref
PostCSS plugin to refer properties from another rule (@ref rule)
https://github.com/matype/postcss-ref
Last synced: over 1 year ago
JSON representation
PostCSS plugin to refer properties from another rule (@ref rule)
- Host: GitHub
- URL: https://github.com/matype/postcss-ref
- Owner: matype
- License: other
- Created: 2016-10-23T08:45:11.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-03-24T09:31:48.000Z (over 4 years ago)
- Last Synced: 2025-03-18T14:11:25.365Z (over 1 year ago)
- Language: JavaScript
- Size: 43 KB
- Stars: 26
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-ref [](https://travis-ci.org/morishitter/postcss-ref)
PostCSS plugin to refer properties from another rule (@ref rule)
## Spec
### Abstract
This specification defines the @ref rule, which allows an author to refer properties in another style rule.
### Using @ref rule
```
@ref = @ref , ( ,)
```
#### Example
```css
.foo {
font-size: 12px;
color: #333;
}
.bar {
@ref .foo, font-size;
color: #444;
}
```
### `ref()` notation (with `atRule` option)
You can pass an option to `postcss-ref` which lets you use `ref` as a function (`ref()`) instead of an atRule (`@ref`)
```
ref() = ref(, )
```
#### Example
```css
.foo {
font-size: 12px;
color: #333;
}
.bar {
font-size: ref(.foo, font-size);
color: #444;
}
```
### with media queries
It also works with @media rules
```css
.foo {
font-size: 10px;
}
@media (min-width: 1602px) {
.foo {
font-size: 12px;
color: #333;
}
}
.bar {
@ref @media (min-width: 1602px) .foo, font-size;
}
```
or
```css
.bar {
font-size: ref(@media (min-width: 1602px) .foo, font-size);
}
```
This allows you to be more verbose with what you are doing.
## Installation
```shell
$ npm install postcss-ref
```
## How to use postcss-ref
### in Node.js
```js
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var ref = require("postcss-ref")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(ref()) // If using the function way change it to `ref({ atRule: false })`
.process(css)
.css
```
## Example
Input:
```css
.foo {
font-size: 12px;
color: #333;
}
.bar {
@ref .foo, font-size;
color: #444;
}
```
Output:
```css
.foo {
font-size: 12px;
color: #333;
}
.bar {
font-size: 12px;
color: #444;
}
```
### Works well with custom properties
Input:
```css
.foo {
--font-m: 12px;
color: #333;
}
.bar {
@ref .foo, --font-m, font-size;
}
```
Output:
```css
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: var(--font-m);
}
```
Input:
```css
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: ref(.foo, --font-m);
}
```
Output:
```css
.foo {
--font-m: 12px;
color: #333;
}
.bar {
font-size: var(--font-m);
}
```
## License
The MIT License (MIT)
Copyright (c) 2016 Masaaki Morishita