<commit_before># cssy
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
[![travis][travis-image]][travis-url]
[![npm][npm-image]][npm-url]
[![downloads][downloads-image]][downloads-url]

[travis-image]: https://img.shields.io/travis/nodys/cssy.svg?style=flat&branch=master
[travis-url]: https://travis-ci.org/nodys/cssy
[npm-image]: https://img.shields.io/npm/v/cssy.svg?style=flat
[npm-url]: https://npmjs.org/package/cssy
[downloads-image]: https://img.shields.io/npm/dm/cssy.svg?style=flat
[downloads-url]: https://npmjs.org/package/cssy


> A browserify transform for css (with vitamins): Use css sources **like any other module** but **without forgo** the benefits of **pre-processing** and **live source reload**.

```javascript
var myCss = require('foo/my.css')
myCss()                           // Inject the css in document
myCss(elsewhere)                  // To inject css elsewhere
myCss(elsewhere, 'tv')            // Media query...
myCss.update('h1 { }')            // Update source for all injected instances
myCss.onChange(function(css) { }) // Watch for change (hey, you like live source reload ?)
console.log('Source: %s', myCss)  // Use as a string
```

See [exemple with cssy, htmly and lrio](https://github.com/nodys/cssy/tree/master/exemples)

## Features

- **Require css as any other commonjs module**: `require('foo/common.css')`.
- **Pre/post processing**: Cssy is framework-agnostic:
  - Use any  [post/pre-processor](https://developer.chrome.com/devtools/docs/css-preprocessors) you like ([rework](https://github.com/reworkcss/rework), [postcss](https://github.com/postcss/postcss),  [less](http://lesscss.org/), [sass](http://sass-lang.com/), etc.)
  - At package level, you encapsulate your *css secret cooking* and export only standard css.
  - At application level you can do **global processing** for things like global `url()` rebasing.
- **A nice API to read, insert, update or remove**: Use the exported css wherever you want and as you like.
- **@import**: If enabled, the css at-rule [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) `require()` and inject another css module for you.
- **Source map**: If enabled, cssy inject a [source map](https://developer.chrome.com/devtools/docs/css-preprocessors).
- **Live source reload**: Provide a simple http(s) server hook reload seamlessly css source in development environnement.
- **Regex filter**: Configurable, you can apply cssy's transform selectively
- **Plugin**: Use [cssy as a plugin](#cssy-plugin) at application level to configure cssy finely
- **Remedy**: Enable [cssy remedy](#remedy) to handle package that does not export css as commonjs module

Want a nice cocktail recipe ? Use **source map** in combination with cssy's **live source reload feature** and chrome's [in-browser edition](https://developer.chrome.com/devtools/docs/workspaces).


## Installation

```bash
npm install --save cssy
```

**Then add cssy transform to your `package.json`**. Encapsulate your css processing logic inside your package: use [browserify.transform field](https://github.com/substack/browserify-handbook#browserifytransform-field).

```javascript
{
  // ...
  "browserify": { "transform": [ "cssy" ] ] }
}
```

## Options

In you `package.json` you can add some options for the current package (`[ "cssy", {  /* options */ } ]`)

- `parser` **{Array|String}**: One or many path to module that export a [parser](#parser)
- `processor` **{Array|String}**: One or many path to module that export a [Css processor](#processor)
- `import` **{Boolean}**: Allow [@import](#import-css) behavior (default: true)
- `match` **{String|Array}**: Filter which file cssy must handle. See [Regex filter](#regex-filter)

Path inside `parser` and `processor` options are either relative to package.json or npm package.


**Example:**

```javascript

  // ...
  "browserify": { "transform": [
    [ "cssy",
      {  
        "parser"   : [
          "./mySassParser",
          "./myLessParser"
        ],
        "processor": "./support/myCssProcessor",
        "import"   : false,
        "match"    : ["\\.(css|mycss)$",i]
      }
    ]
  ]}

```

## Global configuration

At *application level* you can change some *global* cssy behaviors

```javascript
var cssy = require('cssy')
cssy.config({
  // Enable css minification (default: false)
  minify:  false,
  // Enable source map in the generated source (default: true)
  sourcemap: true
})
```

*Css minification is done with [CSSWring](https://github.com/hail2u/node-csswring). Feel free to use another one inside a [global post-processor](#global-prepost-processor).*

## Internal workflow

1. **Parser** Cssy try each [parser](#parser) to transform any kind of source to css (from stylus, less, sass, etc.) with a source map.
2. **Global pre-processor**: Cssy call each [Global pre-processor](#global-prepost-processor)
3. **processor**: Cssy call each [local processor](#processor)
4. **Global post-processor**: Cssy call each [Global post-processor](#global-prepost-processor)
4. **@import**: If enable cssy extract `@import` at-rules (see [Import css](#import-css))
4. **minify**: If enable cssy minify css source
4. **source map**: If enable cssy add the source-map
4. **live reload**: If enable cssy add live source reload client to the generated bundle

## Context object

Each function that transform a css source ([parser](#parser), [global pre/post processor](#global-prepost-processor), [processor](#processor)), receive a **context object**:
<commit_msg>doc: Add a note on the use of cssnano for minification / optimization<commit_after># cssy
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
[![travis][travis-image]][travis-url]
[![npm][npm-image]][npm-url]
[![downloads][downloads-image]][downloads-url]

[travis-image]: https://img.shields.io/travis/nodys/cssy.svg?style=flat&branch=master
[travis-url]: https://travis-ci.org/nodys/cssy
[npm-image]: https://img.shields.io/npm/v/cssy.svg?style=flat
[npm-url]: https://npmjs.org/package/cssy
[downloads-image]: https://img.shields.io/npm/dm/cssy.svg?style=flat
[downloads-url]: https://npmjs.org/package/cssy


> A browserify transform for css (with vitamins): Use css sources **like any other module** but **without forgo** the benefits of **pre-processing** and **live source reload**.

```javascript
var myCss = require('foo/my.css')
myCss()                           // Inject the css in document
myCss(elsewhere)                  // To inject css elsewhere
myCss(elsewhere, 'tv')            // Media query...
myCss.update('h1 { }')            // Update source for all injected instances
myCss.onChange(function(css) { }) // Watch for change (hey, you like live source reload ?)
console.log('Source: %s', myCss)  // Use as a string
```

See [exemple with cssy, htmly and lrio](https://github.com/nodys/cssy/tree/master/exemples)

## Features

- **Require css as any other commonjs module**: `require('foo/common.css')`.
- **Pre/post processing**: Cssy is framework-agnostic:
  - Use any  [post/pre-processor](https://developer.chrome.com/devtools/docs/css-preprocessors) you like ([rework](https://github.com/reworkcss/rework), [postcss](https://github.com/postcss/postcss),  [less](http://lesscss.org/), [sass](http://sass-lang.com/), etc.)
  - At package level, you encapsulate your *css secret cooking* and export only standard css.
  - At application level you can do **global processing** for things like global `url()` rebasing.
- **A nice API to read, insert, update or remove**: Use the exported css wherever you want and as you like.
- **@import**: If enabled, the css at-rule [@import](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) `require()` and inject another css module for you.
- **Source map**: If enabled, cssy inject a [source map](https://developer.chrome.com/devtools/docs/css-preprocessors).
- **Live source reload**: Provide a simple http(s) server hook reload seamlessly css source in development environnement.
- **Regex filter**: Configurable, you can apply cssy's transform selectively
- **Plugin**: Use [cssy as a plugin](#cssy-plugin) at application level to configure cssy finely
- **Remedy**: Enable [cssy remedy](#remedy) to handle package that does not export css as commonjs module

Want a nice cocktail recipe ? Use **source map** in combination with cssy's **live source reload feature** and chrome's [in-browser edition](https://developer.chrome.com/devtools/docs/workspaces).


## Installation

```bash
npm install --save cssy
```

**Then add cssy transform to your `package.json`**. Encapsulate your css processing logic inside your package: use [browserify.transform field](https://github.com/substack/browserify-handbook#browserifytransform-field).

```javascript
{
  // ...
  "browserify": { "transform": [ "cssy" ] ] }
}
```

## Options

In you `package.json` you can add some options for the current package (`[ "cssy", {  /* options */ } ]`)

- `parser` **{Array|String}**: One or many path to module that export a [parser](#parser)
- `processor` **{Array|String}**: One or many path to module that export a [Css processor](#processor)
- `import` **{Boolean}**: Allow [@import](#import-css) behavior (default: true)
- `match` **{String|Array}**: Filter which file cssy must handle. See [Regex filter](#regex-filter)

Path inside `parser` and `processor` options are either relative to package.json or npm package.


**Example:**

```javascript

  // ...
  "browserify": { "transform": [
    [ "cssy",
      {  
        "parser"   : [
          "./mySassParser",
          "./myLessParser"
        ],
        "processor": "./support/myCssProcessor",
        "import"   : false,
        "match"    : ["\\.(css|mycss)$",i]
      }
    ]
  ]}

```

## Global configuration

At *application level* you can change some *global* cssy behaviors

```javascript
var cssy = require('cssy')
cssy.config({
  // Enable css minification (default: false)
  minify:  false,
  // Enable source map in the generated source (default: true)
  sourcemap: true
})
```

*Css minification is done with [cssnano](http://cssnano.co/) which do a lot of other optimizations. Feel free to use another one inside a [global post-processor](#global-prepost-processor).*

## Internal workflow

1. **Parser** Cssy try each [parser](#parser) to transform any kind of source to css (from stylus, less, sass, etc.) with a source map.
2. **Global pre-processor**: Cssy call each [Global pre-processor](#global-prepost-processor)
3. **processor**: Cssy call each [local processor](#processor)
4. **Global post-processor**: Cssy call each [Global post-processor](#global-prepost-processor)
4. **@import**: If enable cssy extract `@import` at-rules (see [Import css](#import-css))
4. **minify**: If enable cssy minify css source
4. **source map**: If enable cssy add the source-map
4. **live reload**: If enable cssy add live source reload client to the generated bundle

## Context object

Each function that transform a css source ([parser](#parser), [global pre/post processor](#global-prepost-processor), [processor](#processor)), receive a **context object**:

{'fraction_non_alphanumeric': 0.15811889973380658, 'fraction_numerical': 0.0020408163265306124, 'mean_word_length': 4.134851936218679, 'pattern_counts': {'":': 10, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 33, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6215296', 'n_tokens_mistral': 3545, 'n_tokens_neox': 3386, 'n_words': 1090}