Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

This package has been deprecated

Author message:

end of development

postcss-matter

0.1.1 • Public • Published

postcss-matter

npm version Build Status XO code style

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!

Install

npm i postcss-matter

DownloadsWeekly Downloads

2

Version

0.1.1

License

MIT

Last publish

Collaborators

  • avatar