PostCSS Docta

PostCSS plugin that provides several improvements according to the Docta project guidelines.

Improvements

This plugin is not configurable (nor will it be) because it was created to meet specific guidelines. Any issue or push request must consider that the configurations are (and will be) unalterable. See configurations in the plugins folder.

charset

Remove all existing charset at-rules and add one at the beginning with utf-8 value.

Before:

.foo {
}

After:

@charset "utf-8";

.foo {
}

comments

Remove all comments, include marked as important.

Before:

/*! Example of important comment */

.foo {
}

After:

.foo {
}

mqtoem

Transform min/max-width/height media queries to em units.

Before:

@media (min-width: 960px) {
  .foo {
  }
}

After:

@media (min-width: 60em) {
  .foo {
  }
}

mqpacker

Group same media queries and then sort.

Before:

@media (min-width: 48em) {
  .foo {
  }
}

.foo {
}

@media (min-width: 60em) {
  .bar {
  }
}

@media (min-width: 48em) {
  .baz {
  }
}

After:

.foo {
}

@media (min-width: 48em) {
  .foo {
  }

  .baz {
  }
}

@media (min-width: 60em) {
  .bar {
  }
}

pxtorem

Transform px units to rem units.

Before:

.foo {
  font-size: 14px;
}

After:

.foo {
  font-size: 0.875rem;
}

values

Ensure values are ordered consistently.

Before:

.foo {
  border: solid 0.0625rem red;
}

After:

.foo {
  border: 0.0625rem solid red;
}

prefix

Add or remove vendor prefixes as necessary.

Before:

.foo {
  text-decoration: underline dotted;
}

After:

.foo {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

banner

Add a banner at the beginning with the data of package.json.

Before:

.foo {
}

After:

/*! postcss-docta v1.0.0 - Released under the MIT license */

.foo {
}

eol

Normalize all line ends with \n.

Options

min

• Type: Boolean
• Default: false

If the value is true, it will minify the styles with clean-css. If the value is false (by default), the styles will be formatted with several plugins: clean-css, perfectionist, csscomb and prettier. Keep in mind that the application of these plugins is not redundant (although it seems that yes) because each one offers its own advantages with respect to the others.

Usage

postcss([require("postcss-docta")]);

See PostCSS docs for examples for your environment.

Everything has a reason

For example, the separation of the banner in the minified styles, is to solve a problem of syntax highlighting in Sublime Text. Any doubt, ask me.