PostCSS-Helper

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)

Argumentation

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
})

Install

npm i postcss-helper

API

Only one method main is exported with the following expectation:

main(source,[output],[options])

• 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";

$zIndex:100;
$width: 100px;
$fontSize: 10vh;
$viewport: 480px;

.foo {

    &__bar {
    font-size: calc(4 * $fontSize) ?if media (max-width: $viewport);
    border: 1px solid var(--blue);
    z-index:$zIndex;
        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;
    }
    z-index:calc($zIndex+100);
    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;

    z-index:100;

    height:70vh;

    width:(1.333*70vh);

    background-image:linear-gradient(to bottom, #3f7063, #2e6e65);
}

@media (max-width: 480px) {

    .foo__bar, .foo__baz {

        font-size:40vh;
    }
}

.foo__baz {

    position:absolute;

    top:1vw;

    right:1vm;

    right:1vmin;

    font-size:30em;

    font-weight:bold;

    z-index:200;

    animation:barbaz 1s;
}

@keyframes barbaz {
    0% {
        background-color:#3f7063;
    }

    100% {
        background-color:#2e6e65;
    }
}