node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

postcss-helper

Build Status Codecov Dependency Status

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