PostCSS-Fn

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-Fn in comparision to CSSNext is not a PostCSS plugin, rather that a ready to use PostCSS** parser with predefined plugins.

PostCSS-Fn 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 postCssFn = require("postcss-fn")
const filepath = "testCss.pcss"
const output = "testCss.css"

postCssFn( filepath, output, { cssnano: false } )
.then( result => {
  const fileContent = fs.readFileSync(output, "utf8")
  console.log(fileContent.trim() === result.trim()) // => true
})

Install

npm i postcss-fn

API

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