Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    postcss-helperpublic

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

    install

    npm i postcss-helper

    Downloadsweekly downloads

    18

    version

    2.2.2

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar