postcss-matter

PostCSS plugin that to add matter property

---

Install

npm i postcss-matter

Usage

Define matters using the @matter atrule.
Then use they.

@matter {
  common {
    -webkit-tap-highlight-color: #fff;
  }

  default-a {
    matter: common;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
}

@matter namespace {
  default-input {
    box-sizing: border-box;
    border: 1px solid #333;
  }
}

a.that {
  matter: default-a;
}

a.this {
  matter: default-a;
}

.input {
  matter: namespace-default-input;
}

.btn {
  matter: default-button;
}

.btn--small {
  matter: default-button;
  font-size: .85em;
}

@matter {
  default-button {
    padding: .5em 1em;
    background: #e42829;
  }
}

Transform

const fs = require('fs');
const postcss = require('postcss');
const matter = require('postcss-matter'):
const beautify = require('cssbeautify');

const css = fs.readFileSync('./sample.css', 'utf-8');

postcss([matter])
  .process(css)
  .then(result => console.log(beautify(result.css, {indent: '  '})));

Output

like this.

a.that,
a.this {
  -webkit-tap-highlight-color: #fff;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.input {
  box-sizing: border-box;
  border: 1px solid #333;
}

.btn {
  padding: .5em 1em;
  background: #e42829;
}

.btn--small {
  padding: .5em 1em;
  background: #e42829;
  font-size: .85em;
}

Syntax

AtRule

@matter <namespace-name> {
  <matter-name> {
    declaration;
    ...
  }
  (<matter-name> {...})
  (<matter-name> {...})
}

Declaration

<selector> {
  matter: <defined matter-name>;
}

Options

• isolateLength
  For example,

  @matter {
    that {
      color: #000;
      font-size: 15px;
      line-height: 1.7;
    }
  }
  .a {
    matter: that;
  }
  .b {
    matter: that;
  }

  That's now isolateLength: 3, you will get this.

  .a,
  .b {
    color: #000;
    font-size: 15px;
    line-height: 1.7
  }

  When that's isolateLength: 4, get it.

  .a {
    color: #000;
    font-size: 15px;
    line-height: 1.7;
  }
  
  .b {
    color: #000;
    font-size: 15px;
    line-height: 1.7;
  }

  3 by default.

Run to example

1 Clone this

git clone git@github.com:totora0155/postcss-matter.git

2 Change directory

cd postcss-matter

3 Install modules

npm install

4 Run to script

cd examples && node postcss.js

Change log

version	log
0.1.1	Change output. result.warn -> console.log
0.1.0	Use a matter from a matter
0.0.4	Bugfix for filter
0.0.3	Bugfix when a matter unused
0.0.2	Fix bug
0.0.1	Release!