❤
npm
Sign UpSign In

postcss-reuse

2.1.3 • Public • Published

PostCSS re-use

Re-use rules by inlining other previously declared rules' content using postcss.

Install

$ npm install postcss-reuse

Usage

Add postcss-reuse to your list of postcss plugins.

plugins: [
  'postcss-reuse',
]

Options

The first parameters is an options object with the following values.

  • {String} atRuleName = 'reuse' The name of the at rule.
  • {String} mode = 'selector' The way the at rule's parameter is parsed. Can be either 'selector' or 'class'. In selector mode the parameters are parsed as a comma separated list of selectors. In class mode the parameter are parsed as a space separated list of class names.
plugins: [
  ['postcss-reuse', {
    atRuleName: '@inline',
    mode: 'class',
  }],
]

Examples

Basic

Before After 
.a {
  color: red;
}

.b {
  @reuse .a;
  font-size: 14px;
}
 
.a {
  color: red;
}

.b {
  color: red;
  font-size: 14px;
}

Multiple blocks

Before After 
.a {
  color: red;
}

.a, .b {
  font-size: 14px
}

.c {
  @reuse .a;
}
 
.a {
  color: red;
}

.a, .b {
  font-size: 14px
}

.c {
  color: red;
  font-size: 14px;
}

Nested

Before After 
.foo + div.a {
  color: red;
}

.b {
  @reuse .a;
  font-size: 14px;
}
 
.foo + div.a {
  color: red;
}

.b {
  font-size: 14px;
}

.foo + div.b {
  color: red;
}

Media queries

Before After 
.a {
  color: red;
}

@media (min-width: 240px) {
  .a {
    color: green;
  }
}

.b {
  @reuse .a;
  font-size: 14px;
}
 
.a {
  color: red;
}

@media (min-width: 240px) {
  .a {
    color: green;
  }
}

.b {
  color: red;
  font-size: 14px;
}

@media (min-width: 240px) {
  .b {
    color: green;
  }
}

Readme

Keywords

Package Sidebar

Install

npm i postcss-reuse@2.1.3

Repository

github.com/redkenrok/postcss-plugins

Homepage

github.com/redkenrok/postcss-plugins/tree/main/packages/reuse/#readme

Version

2.1.3

License

MIT

Unpacked Size

15.9 kB

Total Files

9

Last publish

Collaborators

  • redkenrok
Try on RunKit
Report malware