You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

bettercss-preprocessor

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bettercss-preprocessor

A modular processor for bettercss

0.0.5
latest
Source
npmnpm
Version published
Weekly downloads
10
Maintainers
1
Weekly downloads
 
Created
Source

bettercss-preprocessor

Build Status

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

Keywords

bettercss

FAQs

Package last updated on 25 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts