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 <selector-name>, <reffered-property-name>( ,<new-property-name>)

Example

.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(<selector-name>, <reffered-property-name>)

Example

.foo {
  font-size: 12px;
  color: #333;
}

.bar {
  font-size: ref(.foo, font-size);
  color: #444;
}

with media queries

It also works with @media rules

.foo {
  font-size: 10px;
}

@media (min-width: 1602px) {
  .foo {
    font-size: 12px;
    color: #333;
  }
}

.bar {
  @ref @media (min-width: 1602px) .foo, font-size;
}

or

.bar {
  font-size: ref(@media (min-width: 1602px) .foo, font-size);
}

This allows you to be more verbose with what you are doing.

Installation

$ npm install postcss-ref

How to use postcss-ref

in Node.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:

.foo {
  font-size: 12px;
  color: #333;
}

.bar {
  @ref .foo, font-size;
  color: #444;
}

Output:

.foo {
  font-size: 12px;
  color: #333;
}

.bar {
  font-size: 12px;
  color: #444;
}

Works well with custom properties

Input:

.foo {
  --font-m: 12px;
  color: #333;
}

.bar {
  @ref .foo, --font-m, font-size;
}

Output:

.foo {
  --font-m: 12px;
  color: #333;
}

.bar {
  font-size: var(--font-m);
}

Input:

.foo {
  --font-m: 12px;
  color: #333;
}

.bar {
  font-size: ref(.foo, --font-m);
}

Output:

.foo {
  --font-m: 12px;
  color: #333;
}

.bar {
  font-size: var(--font-m);
}

License

The MIT License (MIT)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!