bettercss-preprocessor

bettercss-preprocessor

CSS preprocessor for BetterCSS built with PostCSS.

Installation

npm i --save bettercss-preprocessor

Usage

CLI

Process via command line

bettercss input.css output.css [options]

PostCSS

var postcss = require('postcss'),
    bettercss = require('bettercss');

postcss([ bettercss() ])
  .process(css, { from: 'input.css', to: 'output.css' })
  .then(function (result) {
      fs.writeFileSync('output.css', result.css);
  });

Features

Imports

Consume local files, node modules or bower packages.

@import './style.css';
@import 'module'; /* == @import "./node_modules/module/index.css"; */

Plugin: postcss-import

Autoprefixer

Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

.flex {
	display: flex
}

.flex {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

Plugin: Autoprefixer

Variables

Transforms CSS Custom Properties(CSS variables) syntax into a static representation.

:root {
	--example: red;
}

.example {
	color: var(--example);
}

Plugin: postcss-css-variables

Calc

Reduces calc() references whenever it's possible

.example {
	color: calc(20px + 20px);
}

Plugin: postcss-calc

Media Queries

Transforms W3C CSS Custom Media Queries syntax to more compatible CSS.

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  /* styles for small viewport */
}

Plugin: postcss-custom-media

Options

CLI

Usage: bettercss [<input>] [<output>]

Options:

-h, --help       output usage information
-V, --version    output the version number
-s, --sourcemap  enable source maps

Examples:

# Pass an input and output file:
$ bettercss input.css output.css

# Enable source maps:
$ bettercss input.css output.css --sourcemap

Node.js

All features in BetterCSS can be toggled on or off by passing options. By default all core features are set to true.

Features

• import
• autoprefixer
• variables
• calc
• media

.bettercss({
  // options
});