# bettercss-preprocessor

> A modular processor for bettercss

Latest version **0.0.5** (published 2015-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install bettercss-preprocessor
pnpm add bettercss-preprocessor
yarn add bettercss-preprocessor
bun add bettercss-preprocessor
```

Provides the command `bettercss`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2015-11-25 |
| First published | 2015-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.12.0 |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Mike Bailey |
| Maintainers | bettercss |
| Keywords | bettercss, postcss, css, preprocessor |

## Links

- npm: https://www.npmjs.com/package/bettercss-preprocessor
- Repository: https://github.com/bettercss/preprocessor
- Issues: https://github.com/bettercss/preprocessor/issues
- npm.io page: https://npm.io/package/bettercss-preprocessor

## Dependencies (11)

- [postcss](https://npm.io/package/postcss.md) ^5.0.11
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.1.0
- [postcss-calc](https://npm.io/package/postcss-calc.md) ^5.0.0
- [pretty-error](https://npm.io/package/pretty-error.md) ^1.2.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.0.1
- [postcss-import](https://npm.io/package/postcss-import.md) ^7.1.3
- [read-file-stdin](https://npm.io/package/read-file-stdin.md) ^0.2.0
- [write-file-stdout](https://npm.io/package/write-file-stdout.md) 0.0.2
- [postcss-custom-media](https://npm.io/package/postcss-custom-media.md) ^5.0.0
- [postcss-css-variables](https://npm.io/package/postcss-css-variables.md) ^0.5.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2015-11-25
- 0.0.4 — 2015-11-12
- 0.0.3 — 2015-11-12
- 0.0.2 — 2015-11-12
- 0.0.1 — 2015-11-12

## README

# bettercss-preprocessor

[![Build Status](https://travis-ci.org/bettercss/preprocessor.svg)](https://travis-ci.org/bettercss/preprocessor)

CSS preprocessor for BetterCSS built with [PostCSS](https://github.com/postcss/postcss).

## Installation

```
npm i --save bettercss-preprocessor
```

## Usage

#### CLI

Process via command line

```
bettercss input.css output.css [options]
```

#### PostCSS

```js
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.

```css
@import './style.css';
@import 'module'; /* == @import "./node_modules/module/index.css"; */
```
Plugin: [postcss-import](https://github.com/postcss/postcss-import)

#### Autoprefixer

Parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](http://caniuse.com/).

```css
.flex {
	display: flex
}

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

Plugin: [Autoprefixer](https://github.com/postcss/autoprefixer)

#### Variables

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

```css
:root {
	--example: red;
}

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

Plugin: [postcss-css-variables](https://github.com/MadLittleMods/postcss-css-variables)

#### Calc

Reduces calc() references whenever it's possible

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

Plugin: [postcss-calc](https://github.com/postcss/postcss-calc)

#### Media Queries

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

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

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

Plugin: [postcss-custom-media](https://github.com/postcss/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

```js
.bettercss({
  // options
});
```

---
_Source: https://npm.io/package/bettercss-preprocessor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._