node package manager


Build Status Codecov Dependency Status


Generate css file out of PostCSS file

It can be used only with --harmony-async-await flag turned on (Node.js versions above 7.0.0)


With so many Postcss plugins, it is not a surprise to see libraries, that bundles several plugins altogether.

Such libraries are CSSNext and Rucksack.

PostCSS-Helper in comparision to CSSNext is not a PostCSS plugin, rather that a ready to use PostCSS** parser with predefined plugins.

PostCSS-Helper also could lift some weight from your Webpack configuration, so it doesn't reminiscent rocket science project.

Plugins used

  • autoprefixer
  • cssnano
  • postcss
  • postcss-calc
  • postcss-discard-empty
  • postcss-if-media
  • postcss-inherit
  • postcss-nested-props
  • postcss-nesting
  • postcss-partial-import(fork)
  • precss
  • rucksack-css
  • stylefmt

Simple Usage

const postCss = require("postcss-helper")
const filepath = "testCss.pcss"
const output = "testCss.css"
postCss.main( filepath, output, { cssnano: false } )
.then( result => {
  const fileContent = fs.readFileSync(output, "utf8")
  console.log(fileContent.trim() === result.trim()) // => true


npm i postcss-helper


Only one method main is exported with the following expectation:


  • source - full path to the .pcss file
  • output - full path to the output css file

If omited, output will be equal to the source with .css instead of .pcss extension

  • options - object of options

Default options:

    autoprefixer: "last 2 versions",
    rucksack: {
        fallbacks: true
    stylelint: true,
    cssnano: true

You overwrite those options with the object you pass in. So if you pass {autoprefixer: "last 4 versions", cssnano:false} the options will become:

    autoprefixer: "last 4 versions",
    rucksack: {
        fallbacks: true
    stylelint: true,
    cssnano: false

The stylelint options formats the source .postcss file with predefined options.

Example Input

// importing rules from ./files/_colors.css
@import "./files/colors";
$width: 100px;
$fontSize: 10vh;
$viewport: 480px;
.foo {
    &__bar {
    font-size: calc(4 * $fontSize) ?if media (max-width: $viewport);
    border: 1px solid var(--blue);
        height: 70vh;
        width: (1.333*70vh);
    background-image: linear-gradient(to bottom, var(--navy), var(--bluegreen-seventh));
    &__baz {
        @inherit: .foo__bar ;
    position: absolute;
    top: 1vw;
    right: 1vmin;
    font: {
      size: 30em;
      weight: bold;
    animation: barbaz 1s;
@keyframes barbaz {
    0% {
        background-color: var(--navy);
    100% {
        background-color: var(--bluegreen-seventh);

Output for the above Example

.foo__bar, .foo__baz {
    border:1px solid #5d9cec;
    background-image:linear-gradient(to bottom, #3f7063, #2e6e65);
@media (max-width: 480px) {
    .foo__bar, .foo__baz {
.foo__baz {
    animation:barbaz 1s;
@keyframes barbaz {
    0% {
    100% {