# jss-preprocessor

> Use JSS as a preprocessor to create CSS files.

Latest version **1.1.2** (published 2016-09-07) · MIT license · 0 weekly downloads

## Install

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

Provides the command `jss-preprocessor`.

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2016-09-07 |
| First published | 2016-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Todd Hancock |
| Maintainers | thancock20 |
| Keywords | jss, css, stylesheet, preprocessor |

## Links

- npm: https://www.npmjs.com/package/jss-preprocessor
- Repository: https://github.com/thancock20/jss-preprocessor
- Homepage: https://github.com/thancock20/jss-preprocessor#readme
- Issues: https://github.com/thancock20/jss-preprocessor/issues
- npm.io page: https://npm.io/package/jss-preprocessor

## Dependencies (5)

- [jss](https://npm.io/package/jss.md) ^5.4.0
- [postcss](https://npm.io/package/postcss.md) ^5.1.2
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.4.1
- [jss-preset-default](https://npm.io/package/jss-preset-default.md) ^0.2.0

## 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

- 1.1.2 (latest) — 2016-09-07
- 1.1.1 — 2016-09-06
- 1.1.0 — 2016-09-06

## README

# JSS Preprocessor

Use [JSS](https://github.com/cssinjs/jss) as a preprocessor to create CSS files.

 JSS Preprocessor includes JSS plugins to add the following features:
 * [Extend rules and rule definitions](https://github.com/cssinjs/jss-extend)
 * [Nested selectors and pseudo selectors](https://github.com/cssinjs/jss-nested)
 * [Camel cased rule properties](https://github.com/cssinjs/jss-camel-case)
 * [Add default units to numeric values](https://github.com/cssinjs/jss-default-unit)
 * [Style properties extend each other instead of override](https://github.com/cssinjs/jss-props-sort)


 Also, JSS Preprocessor uses autoprefixer to automatically add vendor prefixes.

## Installation

Install globally with npm:

```
npm install --global jss-prepocessor
```

Or install as a dev dependency and use in npm scripts.

```
npm install --save-dev jss-preprocessor
```

## Usage:

Write a js file with an export that is valid JSS. For example:

```javascript
const primaryColor = 'red';
const secondaryColor = 'blue';

module.exports = {
  header: {
    fontSize: 64,
    color: primaryColor,
    display: 'flex'
  },
  ul: {
    backgroundColor: secondaryColor
  }
};
```

Will result in the following CSS:
```css
header {
  color: red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 64px;
}
ul {
  background-color: blue;
}
```


Then use JSS Preprocessor like this:

```
jss-preprocessor --input styles.js --output styles.css
```

Or use shorter options:

```
jss-preprocessor -i styles.js -o styles.css
```

Also, a js file can be watched for changes by using the --watch or -w option:

```
jss-preprocessor -i styles.js -o styles.css -w
```

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