Socket
Socket
Sign inDemoInstall

postcss

Package Overview
Dependencies
89
Maintainers
1
Versions
252
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.0.4 to 4.0.5

711

API.md

@@ -38,4 +38,2 @@ # PostCSS API

[`PostCSS#use`]: https://github.com/postcss/postcss#useplugin
### `postcss.parse(css, opts)`

@@ -55,15 +53,12 @@

* `from`: the path to the source CSS file. You should always set `from`, because
it is used in map generation and in syntax error messages.
* `from`: the path to the source CSS file. You should always set `from`,
because it is used in map generation and in syntax error messages.
* `safe`: enable [Safe Mode], in which PostCSS will try
to fix CSS syntax errors.
* `map`: an object of [source map options]. Only `map.prev` is used in
`parse`.
* `map`: an object of [source map options].
Only `map.prev` is used in `parse`.
[source map options]: https://github.com/postcss/postcss#source-map
[Safe Mode]: https://github.com/postcss/postcss#safe-mode
### `postcss.root(props)`
Creates a new [`Root` node](#root-node).
Creates a new [`Root` node].

@@ -76,3 +71,3 @@ ```js

Creates a new [`AtRule` node](#atrule-node).
Creates a new [`AtRule` node].

@@ -85,3 +80,3 @@ ```js

Creates a new [`Rule` node](#rule-node).
Creates a new [`Rule` node].

@@ -94,3 +89,3 @@ ```js

Creates a new [`Declaration` node](#declaration-node).
Creates a new [`Declaration` node].

@@ -103,3 +98,3 @@ ```js

Creates a new [`Comment` node](#comment-node).
Creates a new [`Comment` node].

@@ -122,3 +117,3 @@ ```js

### `use(plugin)`
### `p.use(plugin)`

@@ -133,7 +128,7 @@ Adds a plugin to be used as a CSS processor.

Plugins can also be added by passing them as arguments when creating
a `postcss` instance (cf. [`postcss(plugins)`](#postcssplugins)).
a `postcss` instance (cf. [`postcss(plugins)`]).
Plugins can come in three formats:
1. A function. PostCSS will pass the function a `Root` node
1. A function. PostCSS will pass the function a [`Root` node]
as the first argument.

@@ -157,6 +152,6 @@ 2. An object with a `postcss` method. PostCSS will use that method

### `process(css, opts)`
### `p.process(css, opts)`
This is the main method of PostCSS. It will parse the source CSS
and create a `Root` node; send this `Root` to each plugin successively,
and create a [`Root` node]; send this `Root` to each plugin successively,
for transformations; and then return a `Result` instance created

@@ -174,3 +169,3 @@ from the transformed `Root`.

the already parsed `Root` from it.
* Any object with a `toString()` method -- for example, a file stream.
* Any object with a `toString()` method — for example, a file stream.

@@ -187,10 +182,9 @@ Options:

[Safe Mode]: https://github.com/postcss/postcss#safe-mode
[source map options]: https://github.com/postcss/postcss#source-map
## `Result` class
There is a two way to get `Result` instance. `PostCSS#process(css, opts)`
returns it or you can call `Root#toResult(opts)`.
Provides result of PostCSS transformations.
A `Result` instance is returned
by [`PostCSS#process(css, opts)`] and [`Root#toResult(opts)`].
```js

@@ -201,5 +195,5 @@ var result1 = postcss().process(css);

### `root`
### `result.root`
This property contains source `Root` instance.
The source `Root` instance.

@@ -210,5 +204,7 @@ ```js

### `opts`
### `result.opts`
Options from `PostCSS#process(css, opts)` or `Root#toResult(opts)` call.
Options from the [`PostCSS#process(css, opts)`] or
[`Root#toResult(opts)`] call that produced
this `Result` instance.

@@ -219,6 +215,5 @@ ```js

### `css`
### `result.css`
Lazy method, that will stringify `Root` instance to CSS string on first call
and generates source map to `map` property if it is necessary.
A CSS string representing this `Result`’s '`Root` instance.

@@ -229,8 +224,12 @@ ```js

### `map`
This property is generated *lazily*: `Root` is not stringified until
the first request for the `css` property (or the [`result.map`] property).
That initial request for `css` will also generate a source map.
Source map will inlined into CSS or assigned to the [`result.map`] property,
if user ask to save map to separated file.
Lazy method, that will generates source map for `Root` changes and stringify
CSS to `css` property.
### `result.map`
It contains instance of `SourceMapGenerator` class from [source-map] library.
An instance of the `SourceMapGenerator` class from the [`source-map`] library,
representing changes to the `Result`’s `Root` instance.

@@ -241,6 +240,16 @@ ```js

`Result` instance will contain `map` property only if PostCSS decide, that
source map should be in separated file. If source map will be inlined to CSS,
`Result` instance will not have this property.
This property is generated *lazily*: the source map for `Root` is not generated
until the first request for the `map` property (or the [`result.css`] property).
That initial request will also stringify `Root` and assign the generated
CSS string to the [`result.css`] property.
Additionally, *this property will receive a value only if the user does not wan
an inline source map*. By default, PostCSS generates inline source maps,
written directly into the processed CSS; so by default the `map` property
will be empty.
An external source map will be generated — and assigned to `map` — only if the
user has set the `map.inline` option to `false`, or if PostCSS was passed
an external input source map.
```js

@@ -252,15 +261,9 @@ if ( result.map ) {

By default, PostCSS will inline map to CSS, so in most cases this property will
be empty. PostCSS will create it only if user set `map.inline = false`
option or if input source map was in separated file.
[source-map]: https://github.com/mozilla/source-map
## Vendor module
Contains helpers to work with vendor prefixes.
Contains helpers for working with vendor prefixes.
### `prefix`
### `vendor.prefix(string)`
Returns vendor prefix.
Returns the vendor prefix extracted from an input string.

@@ -271,5 +274,5 @@ ```js

### `unprefixed`
### `vendor.unprefixed(string)`
Returns value without vendor prefix.
Returns the input string stripped of its vendor prefix.

@@ -282,3 +285,4 @@ ```js

Contains helpers to safely split CSS values with brackets and quotes detection.
Contains helpers for safely splitting lists of CSS values, preserving parentheses
and quotes.

@@ -289,18 +293,20 @@ ```js

### `list.space`
### `list.space(string)`
Safely splits space-separated values (like `background`).
Safely splits space-separated values (such as those for `background`,
`border-radius`, and other shorthand properties).
```js
list.split('1px calc(10% + 1px) "border radius"')
//=> ['1px', 'calc(10% + 1px)', '"border radius"']
list.space('1px calc(10% + 1px)')
//=> ['1px', 'calc(10% + 1px)']
```
### `list.comma`
### `list.comma(string)`
Safely splits comma-separated values (like `transition`).
Safely splits comma-separated values (such as those
for `transition-*` and `background` properties).
```js
list.split('1px 2px, rgba(255, 0, 0, 0.9), "border, top"')
//=> ['1px 2px', 'rgba(255, 0, 0, 0.9)', '"border, top"']
list.comma('black, linear-gradient(white, black)')
//=> ['black', 'linear-gradient(white, black)']
```

@@ -310,3 +316,3 @@

Represents input source of CSS.
Represents the source CSS.

@@ -318,5 +324,6 @@ ```js

### `file`
### `input.file`
Absolute path to CSS source file from `from` option.
The absolute path to the CSS source file defined with
the [`from` option](#pprocesscss-opts).

@@ -328,5 +335,6 @@ ```js

### `id`
### `input.id`
Unique ID of CSS source if user missed `from` and we didn’t know file path.
The unique ID of the CSS source. This is used if the user did not enter a `from`
options so PostCSS does not know about a file path.

@@ -339,9 +347,10 @@ ```js

### `from`
### `input.from`
Contains `file` if user set `from` option or `id` if he or she didn’t.
The CSS source identifier. Contains [`input.file`](#inputfile) if the user set the
[`from` option](#pprocesscss-opts), or [`input.id`](#inputid) if she did not.
```js
var root = postcss.parse(css, { from: 'a.css' });
root.source.input.file //=> '/home/ai/a.css'
root.source.input.from //=> '/home/ai/a.css'

@@ -352,9 +361,9 @@ var root = postcss.parse(css);

### `map`
### `input.map`
Represents input source map from compilation step before PostCSS,
(from example, from Sass compiler).
Represents the input source map passed from a compilation step before PostCSS
(for example, from the Sass compiler).
`map.consumer()` returns instance of `SourceMapConsumer` class
from [source-map] library.
`map.consumer()` returns an instance of the `SourceMapConsumer` class
from the [`source-map`] library.

@@ -365,9 +374,8 @@ ```js

[source-map]: https://github.com/mozilla/source-map
### `input.origin(line, column)`
### `origin(line, column)`
Reads the input source map and returns a symbol position in the input source
(for example, in a Sass file that was compiled to CSS before being passed
to PostCSS):
Uses input source map and returns symbol position in origin source
(for example, in Sass file):
```js

@@ -377,11 +385,12 @@ root.source.input.origin(1, 1) //=> { source: 'a.css', line: 3, column: 1 }

## Nodes common methods
## Nodes: common methods
All node classes have many common methods.
### `type`
### `node.type`
String with node’s type. It can be `root`, `atrule`, `rule`, `decl`
or `comment`.
Returns a string representing the node’s type.
Possible values are `root`, `atrule`, `rule`, `decl`, or `comment`.
```js

@@ -391,5 +400,5 @@ postcss.decl({ prop: 'color', value: 'black' }).type //=> 'decl'

### `parent`
### `node.parent`
Link to parent node.
Returns the node’s parent node.

@@ -400,7 +409,11 @@ ```js

### `source`
### `node.source`
Origin source of node. It contains start and end positions and `Input` instance
in `source.input` property.
Returns the input source of the node, with the following properties:
- `node.source.input`: An [`Input`] instance.
- `node.source.start`: The starting position of the node’s source —
line and column.
- `node.source.end`: The ending position of the node’s source — line and column.
```js

@@ -412,27 +425,47 @@ decl.source.input.from //=> '/home/ai/a.sass'

The property is used in map generation. If you will create node manually
(for example, by `postcss.decl`) node will not have a `source` property
and will be missed in source map. So plugin developer should clone nodes
(it saves `source`) or set `source` manually:
The property is used in source map generation.
If you create a node manually (for example, with `postcss.decl()`),
that node will not have a `source` property and will be absent
from the source map. For this reason, plugin developer should consider
cloning nodes to create new ones (in which case the new node’s source
will reference the original, cloned node) or setting the `source` property
manually.
```js
var rule = postcss.rule({ selector: 'a', source, atrule.source });
atrule.parent.insertBefore(atrule, rule);
// Bad
var prefixed = postcss.decl({ prop: '-moz-' + decl.prop, value: decl.value });
// Good
var prefixed = decl.clone({ prop: '-moz-' + decl.prop });
```
### `toString()`
```js
if ( atrule.name == 'add-link' ) {
var rule = postcss.rule({ selector: 'a' }); // Rule has no source
atrule.parent.insertBefore(atrule, rule); // We add it because of atrule
rule.source = atrule.source; // So we copy source from atrule
}
```
Stringifys node to CSS string.
### `node.toString()`
Returns a CSS string representing the node.
```js
postcss.rule({ selector: 'a' }) //=> 'a {}''
postcss.rule({ selector: 'a' }).toString() //=> 'a {}''
```
### `error(message)`
### `node.error(message)`
Returns `CssSyntaxError` instance with position of current node. It will use
input source map to get origin position even from compiltion step before PostCSS
(for example, in Sass file). Error message with also contains small example of
source code.
Returns a `CssSyntaxError` instance that presents the original position
of the node in the source, showing line and column numbers and also
a small excerpt to facilitate debugging.
It will use an input source map, if present, to get the original position
of the source, even from a previous compilation step
(for example, from Sass compilation).
This method produces very useful error messages.
```js

@@ -447,7 +480,3 @@ if ( !variables[name] ) {

}
```
You can also use this method for better warning messages:
```js
if ( oldSyntax.check(decl) ) {

@@ -459,6 +488,6 @@ console.warn( decl.error('Old syntax for variables').message );

### `next()` and `prev()`
### `node.next()` and `node.prev()`
Return next/previous children of node’s parent. Return `undefined`
for first/last child.
Returns the next/previous child of the node’s parent; or returns `undefined`
if the current node is the last/first child.

@@ -472,5 +501,5 @@ ```js

### `root()`
### `node.root()`
Returns `Root` instance of current nodes tree.
Returns the `Root` instance of the node’s tree.

@@ -481,6 +510,6 @@ ```js

### `removeSelf()`
### `node.removeSelf()`
Removes current node from parent and cleans `parent` property in this node
and node’s children.
Removes the node from its parent, and cleans the `parent` property in the node
and its children.

@@ -493,5 +522,5 @@ ```js

### `replaceWith(otherNode)`
### `node.replaceWith(otherNode)`
Inserts other node before and removes current node.
Inserts another node before the current node, and removes the current node.

@@ -504,8 +533,9 @@ ```js

### `clone(props)`
### `node.clone(props)`
Clones node, cleans `parent` and code style propeties in current node
and node’s children.. You can override some properties in clone by `props`
argument.
Returns a clones of the node.
The resultant clone node and its (clone) children will have clean `parent`
and code style properties. You can override properties in the clone node
by passing a `props` argument.

@@ -519,5 +549,6 @@ ```js

### `cloneBefore(props)` and `cloneAfter(props)`
### `node.cloneBefore(props)` and `node.cloneAfter(props)`
Shortcuts to clone node and insert clone before/after current node.
Shortcuts to clone the node and insert the resultant clone node before/after
the current node.

@@ -528,8 +559,10 @@ ```js

### `moveTo(newParent)`
### `node.moveTo(newParent)`
Removes node from current parent and inserts node to the end of `newParent`.
Removes the node from its current parent and inserts it
at the end of `newParent`.
It will clean `before` and `after` code style properties to use new indentation
in new parent. If will clean `between` property if new parent is in other root.
This will clean the `before` and `after` code style properties from the node,
and replace them with the indentation style of `newParent`. It will also clean
the `between` property if `newParent` is in another `Root`.

@@ -540,14 +573,15 @@ ```js

### `moveBefore(otherNode)` and `moveAfter(otherNode)`
### `node.moveBefore(otherNode)` and `node.moveAfter(otherNode)`
Remove node from current parent and insert it to new parent
Removes the node from its current parent and inserts it into a new parent
before/after `otherNode`.
It will also clean code style properties as `moveTo(newParent)` does.
This will also clean the node’s code style properties just
as `node.moveTo(newParent)` does.
### `style(prop, defaultType)`
### `node.style(prop, defaultType)`
Returns code style property value. If node code style property will be missed
(like from manually built nodes or from clones), PostCSS will try to autodetect
it by other nodes in tree.
Returns a code style property value. If the node is missing the code style
property (because the node was manually built or cloned), PostCSS will try
to autodetect the code style property by looking at other nodes in the tree.

@@ -560,21 +594,14 @@ ```js

If PostCSS can’t find any nodes to copy a code style, it will use `defaultType`
value from `node.defaultStyle` object.
## Containers: common methods
```js
postcss.decl({ prop: 'color', value: 'black' }).style('before') //=> '\n '
```
The `Root`, `AtRule`, and `Rule` container nodes have some common methods
to help work with their children.
## Containers common methods
Note that all containers can store *any* content. If you write a rule inside
a rule, PostCSS will parse it.
`Root`, `AtRule` and `Rule` classes has some common methods
to works with children.
### `container.nodes`
Note, that all containers can store any content. If you will write rule inside
rule, PostCSS will parse it.
An array containing the container’s children.
### `nodes`
Array with node’s children.
```js

@@ -587,5 +614,5 @@ var root = postcss.parse('a { color: black }');

### `first`
### `container.first`
Shortcut to get first child.
The container’s first child.

@@ -596,5 +623,5 @@ ```js

### `last`
### `container.last`
Shortcut to get last child.
The container’s last child.

@@ -605,5 +632,5 @@ ```js

### `index(child)`
### `container.index(child)`
Returns child’d index in parent `nodes`:
Returns `child`’s index within the container’s `nodes` array.

@@ -614,5 +641,6 @@ ```js

### `every(callback)` and `some(callback)`
### `container.every(callback)`
Return `true` if `callback` will return `true` on all/one children.
Returns `true` if `callback` returns a truthy value for all
of the container’s children.

@@ -623,2 +651,10 @@ ```js

});
```
### `container.some(callback)`
Return `true` if `callback` returns a truthy value
for (at least) one of the container’s children.
```js
var hasPrefix = rule.some(function (decl) {

@@ -629,6 +665,11 @@ return decl.prop[0] == '-';

### `each(callback)`
### `container.each(callback)`
Iterates through container’s children. Returning `false` will break iteration.
Iterates through the container’s immediate children, calling `callback`
for each child.
`callback` receives 2 arguments: the node itself and an index.
Returning `false` within `callback` will break iteration.
```js

@@ -644,5 +685,5 @@ var color;

Unlike `for {}`-cycle or `Array#forEach()` this iterator is safe.
So you can mutate the children during iteration and PostCSS will fix
the current index:
Unlike the `for {}`-cycle or `Array#forEach()` this iterator is safe
if you are mutating the array of child nodes during iteration.
PostCSS will adjust the current index to match the mutations.

@@ -666,8 +707,13 @@ ```js

Callback will receive 2 arguments with child instance and child index number.
`container.each()` only iterates through the container’s immediate children.
If you need to recursively iterate through all the container’s descendents,
use `container.eachInside()`.
### `eachInside(callback)`
### `container.eachInside(callback)`
Recursive iterates through children and children of children.
Recursively iterates through the container’s children,
those children’s children, etc., calling `callback` for each.
`callback` receives 2 arguments: the node itself and an index.
```js

@@ -679,8 +725,15 @@ root.eachInside(function (node) {

This method is also safe as `each()` method.
Like `container.each()`, this method is safe to use
if you are mutating arrays during iteration.
### `eachDecl(prop, callback)`
If you only need to iterate through the container’s immediate children,
use `container.each()`.
Recursive iterates through all declaration inside container.
### `container.eachDecl([propFilter,] callback)`
Recursively iterates through all declaration nodes within the container,
calling `callback` for each.
`callback` receives 2 arguments: the node itself and an index.
```js

@@ -694,3 +747,4 @@ root.eachDecl(function (decl) {

You can filter declarations by property name with string or regexp.
If you pass a string or regular expression as `filter`, only those declarations whose
property matches`filter` will be iterated over.

@@ -707,8 +761,13 @@ ```js

This method is also safe as `each()` method.
Like `container.each()`, this method is safe to use if you are mutating
arrays during iteration.
### `eachAtRule(name, calllback)`
### `container.eachAtRule([nameFilter,] callback)`
Recursive iterates through all at-rules inside container.
Recursively iterates through all at-rule nodes within the container,
calling `callback` for each.
`callback` receives 2 arguments: the node itself and an index.
```js

@@ -720,3 +779,4 @@ root.eachAtRule(function (rule) {

You can filter at-rules by name with string or regexp.
If you pass a string or regular expression as `filter`, only those at-rules whose name
matches `filter` will be iterated over.

@@ -734,8 +794,12 @@ ```js

This method is also safe as `each()` method.
Like `container.each()`, this method is safe to use if you are mutating arrays
during iteration.
### `eachRule(callback)`
### `container.eachRule(callback)`
Recursive iterates through all rules inside container.
Recursively iterates through all rule nodes within the container, calling
`callback` for each.
`callback` receives 2 arguments: the node itself and an index.
```js

@@ -749,7 +813,9 @@ var selectors = [];

This method is also safe as `each()` method.
Like `container.each()`, this method is safe to use if you are mutating arrays
during iteration.
### `eachComment(callback)`
### `container.eachComment(callback)`
Recursive iterates through all comments inside container.
Recursively iterates through all comment nodes within the container, calling
`callback` for each.

@@ -762,14 +828,28 @@ ```js

This method is also safe as `each()` method.
Like `container.each()`, this method is safe to use if you are mutating arrays
during iteration.
### `replaceValues(regexp, opts, callback)`
### `container.replaceValues(regexp, opts, callback)`
Replaces regexp in all declaration’s values inside container.
It is useful to add some custom unit or function. Callback will receive
same arguments as in `String#replace`.
Passes all declaration values within the container that match `regexp` through
`callback`, replacing those values with the returned result of `callback`.
You can make it faster by `fast` option. PostCSS will execute slow
regexp only after fast `value.indexOf(opts.fast)` check.
Also you can set a property names array in `props` option.
`callback` will receive the same arguments as those passed to a function
parameter of [`String#replace`].
You can speed up the search by passing `opts`:
- `props`: An array of property names. The method will only search for values
that match `regexp` within declarations of listed properties.
- `fast`: A string that will be used to narrow down values and speed up
the regexp search. Searching every single value with a regexp can be slow;
so if you pass a `fast` string, PostCSS will first check whether the value
contains the `fast` string; and only if it does will PostCSS check that value
against `regexp`. For example, instead of just checking for `/\d+rem/` on
all values, you can set `fast: 'rem'` to first check whether a value has
the `rem` unit, and only if it does perform the regexp check.
This method is useful if you are using a custom unit or function,
so need to iterate through all values.
```js

@@ -781,6 +861,8 @@ root.replaceValues(/\d+rem/, { fast: 'rem' }, function (string) {

### `prepend(node)` and `append(node)`
[`String#replace`]: (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter)
Insert a new node to start/end.
### `container.prepend(node)` and `container.append(node)`
Insert a new node to the start/end of the container.
```js

@@ -791,3 +873,4 @@ var decl = postcss.decl({ prop: 'color', value: 'black' });

Because each node class has unique properties, you can use these shortcuts:
Because each node class is identifiable by unique properties, you can use
the following shortcuts to create nodes to prepend/append:

@@ -801,6 +884,8 @@ ```js

### `insertBefore(oldNode, newNew)` and `insertAftr(oldNode, newNew)`
### `container.insertBefore(oldNode, newNew)` and `container.insertAftr(oldNode, newNew)`
Insert `newNode` before/after `oldNode` (index or node instance).
Insert `newNode` before/after `oldNode` within the container.
`oldNode` can be a node or a node’s index.
```js

@@ -810,3 +895,3 @@ rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }));

You can also use shortcuts here like in `append()` method.
You can also use the same shorcuts available to `container.append()`.

@@ -817,7 +902,9 @@ ```js

### `remove(node)`
### `container.remove(node)`
Removes `node` from container and clean `parent` properties in node
and node’s children.
Removes `node` from the container, and the `parent` properties of `node`
and its children.
`node` can be a node or a node’s index.
```js

@@ -830,8 +917,6 @@ rule.nodes.length //=> 5

You can use node instance or node index in `node` argument.
### `container.removeAll()`
### `removeAll()`
Removes all children from the container, and cleans their `parent` properties.
Removes all children from container and cleans their `parent` properties.
```js

@@ -844,3 +929,3 @@ rule.removeAll();

Represents CSS file and contains all nodes inside.
Represents a CSS file and contains all its parsed nodes.

@@ -853,7 +938,26 @@ ```js

### `after`
### `root.toResult(opts)`
Stores space symbols after last child like `\n` from end of the file.
Returns a [`Result`] instance representing the root's CSS.
```js
var root1 = postcss.parse(css1, { from: 'a.css' });
var root2 = postcss.parse(css2, { from: 'b.css' });
root1.append(root2);
var result = root1.toResult({ to: 'all.css', map: true });
```
Options:
* `to`: the path where you’ll put the output CSS file. You should always set
`to` to generate correct source maps.
* `map`: an object of [source map options].
### `root.after`
The space symbols after the last child of `root`,
such as `\n` at the end of a file.
```js
var root = parse('a {}\nb { color: black }\n');

@@ -863,7 +967,12 @@ root.after //=> '\n'

This is a code style property.
## `AtRule` node
Represents at-rule. Node will have `nodes` property if it have `{}` in CSS.
Represents an at-rule.
This node will have a `nodes` property, representing its children,
if it is followed in the CSS by a `{}` block.
```js

@@ -880,5 +989,5 @@ var root = postcss.parse('@charset "UTF-8"; @media print {}');

### `name`
### `atrule.name`
Stores at-rule name.
The at-rule’s name. This is the identifier that immediately follows the `@`.

@@ -891,5 +1000,7 @@ ```js

### `params`
### `atrule.params`
Stores at-rule parameters.
The at-rule’s parameters. These are the values that follow the at-rule’s name
but precede any `{}` block. The spec refers to this area
as the at-rule’s “prelude”.

@@ -899,12 +1010,16 @@ ```js

var media = root.first;
media.params //=> 'print, screen'
media.params //=> '[print, screen]'
```
Value will be cleaned from inner comments. Origin value with comments will be
in `_params.raw` property.
This value will be cleaned of comments. If the source at-rule’s prelude
contained comments, those comments will be available
in the `_params.raw` property.
If you have not changed the parameters, calling `atrule.toString()`
will stringify the original raw value (comments and all).
```js
var root = postcss.parse('@media print, /**/ screen {}');
var media = root.first;
media.params //=> 'print, screen'
media.params //=> '[print, screen]'
media._params.raw //=> 'print, /**/ screen'

@@ -914,7 +1029,8 @@ media.toString() //=> '@media print, /**/ screen {}'

If you will not change parameters, PostCSS will stringify origin raw value.
### `atrule.before`
### `before`
The space symbols before the at-rule.
Code style property with space symbols before at-rule.
The default value is `\n`, except for the first rule in a `Root`,
whose `before` property is empty.

@@ -927,8 +1043,10 @@ ```js

Default value is `\n`, except first rule in root where `before` will be empty.
This is a code style property.
### `afterName`
### `atrule.afterName`
Code style property with space symbols between at-rule name and parameters.
The space symbols between the at-rule’s name and its parameters.
The default value is ` `.
```js

@@ -940,8 +1058,11 @@ var root = postcss.parse('@media\n print,\n screen {}\n');

Default value is ` `.
This is a code style property.
### `between`
### `atrule.between`
Code style property with spaces between parametes and `{`.
The space symbols between the at-rule’s parameters
and `{`, the block-opening curly brace.
The default value is ` `.
```js

@@ -953,8 +1074,12 @@ var root = postcss.parse('@media print, screen\n{}\n');

Default value is ` `.
This is a code style property.
### `after`
### `atrule.after`
Code style property with spaces between last child and `}`.
The space symbols between the at-rule’s last child and `}`,
the block-closing curly brace.
The default value is `\n` if the at-rule has children,
and an empty string (`''`) if it does not.
```js

@@ -966,9 +1091,11 @@ var root = postcss.parse('@media print {\n a {}\n }\n');

Default value is `\n` if at-rule has children and empty string if it doesn’t.
This is a code style property.
### `semicolon`
### `atrule.semicolon`
Code style property for at-rules with declarations, that last children
has optional `;`.
`true` if at-rule’s last child declaration
is followed by an (optional) semicolon.
`undefined` if the semicolon is omitted.
```js

@@ -979,5 +1106,7 @@ postcss.parse('@page{color:black}').first.semicolon //=> undefined

This is a code style property.
## `Rule` node
Represents CSS rule with selector.
Represents a CSS rule: a selector followed by a declaration block.

@@ -991,5 +1120,6 @@ ```js

### `selector`
### `rule.selector`
Stores rule’s selector string.
The rule’s full selector represented as a string. If there are multiple
comma-separated selectors, the entire group will be included.

@@ -1002,5 +1132,8 @@ ```js

Value will be cleaned from inner comments. Origin value with comments will be
in `_selector.raw` property.
This value will be cleaned of comments. If the source selector contained
comments, those comments will be available in the `_selector.raw` property.
If you have not changed the selector, the result of `rule.toString()`
will include the original raw selector value (comments and all).
```js

@@ -1014,8 +1147,7 @@ var root = postcss.parse('a /**/ b {}');

If you will not change selector, PostCSS will stringify origin raw value.
### `rule.selectors`
### `selectors`
An array containing the rule’s individual selectors.
Groups of selectors are split at commas.
Dynamic property that will split `selector` by comma and return array.
```js

@@ -1032,6 +1164,9 @@ var root = postcss.parse('a, b { }');

### `before`
### `rule.before`
Code style property with space symbols before rule.
The space symbols before the rule.
The default value is `\n`, except for first rule in root,
whose `before` property is empty.
```js

@@ -1043,8 +1178,12 @@ var root = postcss.parse('a {}\nb {}\n');

Default value is `\n`, except first rule in root where `before` will be empty.
This is a code style property.
### `after`
### `rule.after`
Code style property with spaces between last child and `}`.
The space symbols between the rule’s last child and `}`,
the block-closing curly brace.
The default value is `\n` if rule has children and an empty string (`''`)
if it does not.
```js

@@ -1056,8 +1195,10 @@ var root = postcss.parse('@a {\n color: black\n }\n');

Default value is `\n` if rule has children and empty string if it doesn’t.
This is a code style property.
### `semicolon`
### `rule.semicolon`
Code style property, that last children has optional `;`.
`true` if rule’s last child declaration is followed by an (optional) semicolon.
`undefined` if the semicolon is omitted.
```js

@@ -1068,5 +1209,7 @@ postcss.parse('a{color:black}').first.semicolon //=> undefined

This is a code style property.
## `Declaration` node
Represents CSS declaration.
Represents a CSS declaration.

@@ -1080,5 +1223,5 @@ ```js

### `prop`
### `declaration.prop`
Stores property name.
The declaration’s property name.

@@ -1091,5 +1234,5 @@ ```js

### `value`
### `declaration.value`
Stores declaration value.
The declaration’s value.

@@ -1102,5 +1245,8 @@ ```js

Value will be cleaned from inner comments. Origin value with comments will be
in `_value.raw` property.
This value will be cleaned of comments. If the source value contained comments,
those comments will be available in the `_value.raw` property.
If you have not changed the value, the result of `decl.toString()` will include
the original raw value (comments and all).
```js

@@ -1114,7 +1260,7 @@ var root = postcss.parse('a { border-radius: 3px /**/ 0 }');

If you will not change value, PostCSS will stringify origin raw value.
### `declaration.before`
### `before`
The space symbols before the declaration.
Code style property with space symbols before declaration.
Default value is `\n `.

@@ -1127,8 +1273,10 @@ ```js

Default value is `\n `.
This is a code style property.
### `between`
### `declaration.between`
Code style property with symbols between property and value.
The symbols between the declaration’s property and its value.
Default value is `: `.
```js

@@ -1140,7 +1288,7 @@ var root = postcss.parse('a { color/**/: black }');

Default value is `: `.
This is a code style property.
### `important`
### `declaration.important`
Property is `true` if declaration has `!important` statement.
`true` if the declaration has an `!important` annotation.

@@ -1153,4 +1301,4 @@ ```js

If value has comments before `!important` statement, they will be stored
in `_important` property.
If there are comments between the declaration’s value and its
`!important` annotation, they will be available in the `_important` property.

@@ -1164,5 +1312,5 @@ ```js

Represents comment between declarations or rules.
Comments inside selectors, at-rules params, or declaration values
will be stored in the raw properties.
Represents a comment between declarations or statements (rule and at-rules).
Comments inside selectors, at-rules parameters, or declaration values
will be stored in the raw properties explained above.

@@ -1178,5 +1326,5 @@ ```js

### `text`
### `comment.text`
Stores comment text.
The comment’s text.

@@ -1189,6 +1337,8 @@ ```js

### `left` and `right`
### `comment.left` and `comment.right`
Code style properties with spaces before/after comment’s text.
The space symbols before/after the comment’s text.
Default value is ` `.
```js

@@ -1203,8 +1353,10 @@ var root = postcss.parse('/* long */ /*short*/');

Default value is ` `.
This is a code style property.
### `before`
### `comment.before`
Code style property with space symbols before comment.
The space symbols before the comment.
Default value is `\n`.
```js

@@ -1216,2 +1368,21 @@ var root = postcss.parse('a {\n /**/}\n');

Default value is `\n`.
This is a code style property.
[`source-map`]: https://github.com/mozilla/source-map
[source map options]: https://github.com/postcss/postcss#source-map
[Safe Mode]: https://github.com/postcss/postcss#safe-mode
[`PostCSS#process(css, opts)`]: #pprocesscss-opts
[`Root#toResult(opts)`]: #roottoresult-opts
[`postcss(plugins)`]: #postcssplugins
[`Declaration` node]: #declaration-node
[`Comment` node]: #comment-node
[`PostCSS#use`]: #puseplugin
[`AtRule` node]: #atrule-node
[`result.map`]: #resultmap
[`result.css`]: #resultcss
[`Root` node]: #root-node
[`Rule` node]: #rule-node
[`Input`]: #inputclass
[`Result`]: #result-class

3

ChangeLog.md

@@ -0,1 +1,4 @@

## 4.0.5
* Fix error message on double colon in declaration.
## 4.0.4

@@ -2,0 +5,0 @@ * Fix indent detection in some rare cases.

6

lib/at-rule.js

@@ -14,2 +14,3 @@ "use strict";

// Can contain declarations (like this.font-face or this.page) ot another rules.
var AtRule = (function (Container) {

@@ -26,2 +27,3 @@ function AtRule(defaults) {

// Stringify at-rule
AtRule.prototype.stringify = function stringify(builder, semicolon) {

@@ -48,2 +50,3 @@ var name = "@" + this.name;

// Hack to mark, that at-rule contains children
AtRule.prototype.append = function append(child) {

@@ -55,2 +58,3 @@ if (!this.nodes) this.nodes = [];

// Hack to mark, that at-rule contains children
AtRule.prototype.prepend = function prepend(child) {

@@ -62,2 +66,3 @@ if (!this.nodes) this.nodes = [];

// Hack to mark, that at-rule contains children
AtRule.prototype.insertBefore = function insertBefore(exist, add) {

@@ -69,2 +74,3 @@ if (!this.nodes) this.nodes = [];

// Hack to mark, that at-rule contains children
AtRule.prototype.insertAfter = function insertAfter(exist, add) {

@@ -71,0 +77,0 @@ if (!this.nodes) this.nodes = [];

2

lib/comment.js

@@ -12,2 +12,3 @@ "use strict";

// CSS comment between declarations or rules
var Comment = (function (Node) {

@@ -24,2 +25,3 @@ function Comment(defaults) {

// Stringify declaration
Comment.prototype.stringify = function stringify(builder) {

@@ -26,0 +28,0 @@ var before = this.style("before");

50

lib/container.js

@@ -18,2 +18,3 @@ "use strict";

// CSS node, that contain another nodes (like at-rules or rules with selectors)
var Container = (function (Node) {

@@ -31,6 +32,7 @@ function Container() {

// Stringify container children
Container.prototype.stringifyContent = function stringifyContent(builder) {
if (!this.nodes) return;
var i,
if (!this.nodes) {
return;
}var i,
last = this.nodes.length - 1;

@@ -50,2 +52,3 @@ while (last > 0) {

// with child inside
Container.prototype.stringifyBlock = function stringifyBlock(builder, start) {

@@ -72,2 +75,3 @@ var before = this.style("before");

// Please, use `append()` method, `push()` is mostly for parser.
Container.prototype.push = function push(child) {

@@ -93,2 +97,3 @@ child.parent = this;

// });
Container.prototype.each = function each(callback) {

@@ -102,5 +107,5 @@ if (!this.lastEach) this.lastEach = 0;

if (!this.nodes) return;
var index, result;
if (!this.nodes) {
return;
}var index, result;
while (this.indexes[id] < this.nodes.length) {

@@ -116,3 +121,5 @@ index = this.indexes[id];

if (result === false) return false;
if (result === false) {
return false;
}
};

@@ -129,2 +136,3 @@

// Also as `each` it is safe of insert/remove nodes inside iterating.
Container.prototype.eachInside = function eachInside(callback) {

@@ -157,2 +165,3 @@ return this.each(function (child, i) {

// css.eachDecl('background', (decl) => { });
Container.prototype.eachDecl = function eachDecl(prop, callback) {

@@ -195,2 +204,3 @@ if (!callback) {

// });
Container.prototype.eachRule = function eachRule(callback) {

@@ -220,2 +230,3 @@ return this.eachInside(function (child, i) {

// css.eachAtRule('keyframes', (atrule) => { });
Container.prototype.eachAtRule = function eachAtRule(name, callback) {

@@ -258,2 +269,3 @@ if (!callback) {

// Also as `each` it is safe of insert/remove nodes inside iterating.
Container.prototype.eachComment = function eachComment(callback) {

@@ -275,2 +287,3 @@ return this.eachInside(function (child, i) {

// rule.append({ prop: 'color', value: 'black' });
Container.prototype.append = function append(child) {

@@ -280,2 +293,3 @@ var nodes = this.normalize(child, this.last);

var _ref;
if (_isArray) {

@@ -289,2 +303,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -302,2 +317,3 @@ this.nodes.push(node);

// rule.prepend({ prop: 'color', value: 'black' });
Container.prototype.prepend = function prepend(child) {

@@ -307,2 +323,3 @@ var nodes = this.normalize(child, this.first, "prepend").reverse();

var _ref;
if (_isArray) {

@@ -316,2 +333,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -334,2 +352,3 @@ this.nodes.unshift(node);

// rule.insertBefore(1, { prop: 'color', value: 'black' });
Container.prototype.insertBefore = function insertBefore(exist, add) {

@@ -342,2 +361,3 @@ exist = this.index(exist);

var _ref;
if (_isArray) {

@@ -351,2 +371,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -373,2 +394,3 @@ this.nodes.splice(exist, 0, node);

// rule.insertAfter(1, { prop: 'color', value: 'black' });
Container.prototype.insertAfter = function insertAfter(exist, add) {

@@ -380,2 +402,3 @@ exist = this.index(exist);

var _ref;
if (_isArray) {

@@ -389,2 +412,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -406,2 +430,3 @@ this.nodes.splice(exist + 1, 0, node);

// css.remove(2);
Container.prototype.remove = function remove(child) {

@@ -426,5 +451,7 @@ child = this.index(child);

// css.removeAll();
Container.prototype.removeAll = function removeAll() {
for (var _iterator = this.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {

@@ -438,2 +465,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -458,2 +486,3 @@ node.parent = undefined;

// })
Container.prototype.replaceValues = function replaceValues(regexp, opts, callback) {

@@ -477,2 +506,3 @@ if (!callback) {

// Just shorcut for `nodes.every`.
Container.prototype.every = function every(condition) {

@@ -484,2 +514,3 @@ return this.nodes.every(condition);

// Just shorcut for `nodes.some`.
Container.prototype.some = function some(condition) {

@@ -490,2 +521,3 @@ return this.nodes.some(condition);

// Return index of child
Container.prototype.index = function index(child) {

@@ -500,4 +532,6 @@ if (typeof child == "number") {

// Normalize child before insert. Copy before from `sample`.
Container.prototype.normalize = function normalize(nodes, sample) {
var _this = this;
if (!Array.isArray(nodes)) {

@@ -541,2 +575,3 @@ if (nodes.type == "root") {

// Shortcut to get first child
get: function () {

@@ -551,2 +586,3 @@ if (!this.nodes) return undefined;

// Shortcut to get first child
get: function () {

@@ -553,0 +589,0 @@ if (!this.nodes) return undefined;

3

lib/css-syntax-error.js

@@ -14,2 +14,3 @@ "use strict";

// Error while CSS parsing
var CssSyntaxError = (function (SyntaxError) {

@@ -41,2 +42,3 @@ function CssSyntaxError(message, line, column, source, file) {

// Return source of broken lines
CssSyntaxError.prototype.highlight = function highlight(color) {

@@ -89,3 +91,2 @@ var num = this.line - 1;

CssSyntaxError.prototype.name = "CssSyntaxError";

2

lib/declaration.js

@@ -14,2 +14,3 @@ "use strict";

// CSS declaration like “color: black” in rules
var Declaration = (function (Node) {

@@ -26,2 +27,3 @@ function Declaration(defaults) {

// Stringify declaration
Declaration.prototype.stringify = function stringify(builder, semicolon) {

@@ -28,0 +30,0 @@ var before = this.style("before");

29

lib/input.js

@@ -20,2 +20,3 @@ "use strict";

var opts = arguments[1] === undefined ? {} : arguments[1];
_classCallCheck(this, Input);

@@ -51,3 +52,14 @@

// Throw syntax error from this input
Input.prototype.error = function error(message, line, column) {
Input.prototype.error = (function (_error) {
var _errorWrapper = function error() {
return _error.apply(this, arguments);
};
_errorWrapper.toString = function () {
return _error.toString();
};
return _errorWrapper;
})(function (message, line, column) {
var error = new CssSyntaxError(message);

@@ -70,13 +82,15 @@

return error;
};
});
// Get origin position of code if source map was given
Input.prototype.origin = function origin(line, column) {
if (!this.map) return false;
var consumer = this.map.consumer();
if (!this.map) {
return false;
}var consumer = this.map.consumer();
var from = consumer.originalPositionFor({ line: line, column: column });
if (!from.source) return false;
var result = {
if (!from.source) {
return false;
}var result = {
file: this.mapResolve(from.source),

@@ -94,2 +108,3 @@ line: from.line,

// Return path relative from source map root
Input.prototype.mapResolve = function mapResolve(file) {

@@ -96,0 +111,0 @@ return path.resolve(this.map.consumer().sourceRoot || ".", file);

6

lib/list.js

@@ -8,3 +8,3 @@ "use strict";

// cheching
split: function (string, separators, last) {
split: function split(string, separators, last) {
var array = [];

@@ -61,3 +61,3 @@ var current = "";

// list.space('calc(1px + 1em) "b c"') #=> ['calc(1px + 1em)', '"b c"']
space: function (string) {
space: function space(string) {
return this.split(string, [" ", "\n", "\t"]);

@@ -73,3 +73,3 @@ },

// list.comma('rgba(0, 0, 0, 0) white') #=> ['rgba(0, 0, 0, 0)', '"white"']
comma: function (string) {
comma: function comma(string) {
return this.split(string, [","], true);

@@ -76,0 +76,0 @@ }

29

lib/map-generator.js

@@ -10,2 +10,3 @@ "use strict";

var Base64 = require("js-base64").Base64;
var mozilla = _interopRequire(require("source-map"));

@@ -16,2 +17,3 @@

// All tools to generate source maps
var MapGenerator = (function () {

@@ -27,2 +29,3 @@ function MapGenerator(root, opts) {

// Should map be generated
MapGenerator.prototype.isMap = function isMap() {

@@ -37,4 +40,6 @@ if (typeof this.opts.map != "undefined") {

// Return source map arrays from previous compilation step (like Sass)
MapGenerator.prototype.previous = function previous() {
var _this = this;
if (!this.previousMaps) {

@@ -56,2 +61,3 @@ this.previousMaps = [];

// Should we inline source map to annotation comment
MapGenerator.prototype.isInline = function isInline() {

@@ -77,2 +83,3 @@ if (typeof this.mapOpts.inline != "undefined") {

// Should we set sourcesContent
MapGenerator.prototype.isSourcesContent = function isSourcesContent() {

@@ -92,6 +99,7 @@ if (typeof this.mapOpts.sourcesContent != "undefined") {

// Clear source map annotation comment
MapGenerator.prototype.clearAnnotation = function clearAnnotation() {
if (this.mapOpts.annotation === false) return;
var node;
if (this.mapOpts.annotation === false) {
return;
}var node;
for (var i = this.root.nodes.length - 1; i >= 0; i--) {

@@ -108,4 +116,6 @@ node = this.root.nodes[i];

// Set origin CSS content
MapGenerator.prototype.setSourcesContent = function setSourcesContent() {
var _this = this;
var already = {};

@@ -125,5 +135,7 @@ this.root.eachInside(function (node) {

// Apply source map from previous compilation step (like Sass)
MapGenerator.prototype.applyPrevMaps = function applyPrevMaps() {
for (var _iterator = this.previous(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {

@@ -137,3 +149,5 @@ if (_i >= _iterator.length) break;

}
var prev = _ref;
var from = this.relative(prev.file);

@@ -157,2 +171,3 @@ var root = prev.root || path.dirname(prev.file);

// Should we add annotation comment
MapGenerator.prototype.isAnnotation = function isAnnotation() {

@@ -173,2 +188,3 @@ if (this.isInline()) {

// Add source map annotation comment if it is needed
MapGenerator.prototype.addAnnotation = function addAnnotation() {

@@ -189,2 +205,3 @@ var content;

// Return output CSS file path
MapGenerator.prototype.outputFile = function outputFile() {

@@ -201,2 +218,3 @@ if (this.opts.to) {

// Return Result object with map
MapGenerator.prototype.generateMap = function generateMap() {

@@ -216,2 +234,3 @@ this.stringify();

// Return path relative from output CSS file
MapGenerator.prototype.relative = function relative(file) {

@@ -233,2 +252,3 @@ var from = this.opts.to ? path.dirname(this.opts.to) : ".";

// Return path of node source for map
MapGenerator.prototype.sourcePath = function sourcePath(node) {

@@ -239,4 +259,6 @@ return this.relative(node.source.input.from);

// Return CSS string and source map
MapGenerator.prototype.stringify = function stringify() {
var _this = this;
this.css = "";

@@ -294,2 +316,3 @@ this.map = new mozilla.SourceMapGenerator({ file: this.outputFile() });

// Return Result object with or without map
MapGenerator.prototype.generate = function generate() {

@@ -296,0 +319,0 @@ this.clearAnnotation();

107

lib/node.js

@@ -9,4 +9,29 @@ "use strict";

// Default code style
var defaultStyle = {
colon: ": ",
indent: " ",
beforeDecl: "\n",
beforeRule: "\n",
beforeOpen: " ",
beforeClose: "\n",
beforeComment: "\n",
after: "\n",
emptyBody: "",
commentLeft: " ",
commentRight: " "
};
// Recursivly clone objects
var clone = function (obj, parent) {
var cloneNode = (function (_cloneNode) {
var _cloneNodeWrapper = function cloneNode() {
return _cloneNode.apply(this, arguments);
};
_cloneNodeWrapper.toString = function () {
return _cloneNode.toString();
};
return _cloneNodeWrapper;
})(function (obj, parent) {
if (typeof obj != "object") return obj;

@@ -25,6 +50,6 @@ var cloned = new obj.constructor();

cloned[i] = value.map(function (i) {
return clone(i, cloned);
return cloneNode(i, cloned);
});
} else if (i != "before" && i != "after" && i != "between" && i != "semicolon") {
cloned[i] = clone(value, cloned);
cloned[i] = cloneNode(value, cloned);
}

@@ -34,8 +59,10 @@ }

return cloned;
};
});
// Some common methods for all CSS nodes
var Node = (function () {
function Node() {
var defaults = arguments[0] === undefined ? {} : arguments[0];
_classCallCheck(this, Node);

@@ -56,6 +83,7 @@

//
// if ( deprectedSyntax ) {
// var error = decl.error('Deprected syntax');
// if ( deprecatedSyntax ) {
// var error = decl.error('Deprecated syntax');
// console.warn(error.toString());
// }
Node.prototype.error = function error(message) {

@@ -77,2 +105,3 @@ if (this.source) {

// rule.each( (decl, i) => rule.remove(i) );
Node.prototype.removeSelf = function removeSelf() {

@@ -89,2 +118,3 @@ if (this.parent) {

// importNode.replace( loadedRoot );
Node.prototype.replace = function replace(nodes) {

@@ -99,2 +129,3 @@ this.parent.insertBefore(this, nodes);

// decl.toString(); //=> " color: black"
Node.prototype.toString = function toString() {

@@ -116,15 +147,7 @@ var result = "";

// rule.append( decl.clone({ value: '0' }) );
Node.prototype.clone = (function (_clone) {
var _cloneWrapper = function clone() {
return _clone.apply(this, arguments);
};
_cloneWrapper.toString = function () {
return _clone.toString();
};
Node.prototype.clone = function clone() {
var overrides = arguments[0] === undefined ? {} : arguments[0];
return _cloneWrapper;
})(function () {
var overrides = arguments[0] === undefined ? {} : arguments[0];
var cloned = clone(this);
var cloned = cloneNode(this);
for (var name in overrides) {

@@ -134,5 +157,4 @@ cloned[name] = overrides[name];

return cloned;
});
};
// Clone node and insert clone before current one.

@@ -142,4 +164,6 @@ // It accept properties to change in clone and return new node.

// decl.cloneBefore({ prop: '-webkit-' + del.prop });
Node.prototype.cloneBefore = function cloneBefore() {
var overrides = arguments[0] === undefined ? {} : arguments[0];
var cloned = this.clone(overrides);

@@ -154,4 +178,6 @@ this.parent.insertBefore(this, cloned);

// decl.cloneAfter({ value: convertToRem(decl.value) });
Node.prototype.cloneAfter = function cloneAfter() {
var overrides = arguments[0] === undefined ? {} : arguments[0];
var cloned = this.clone(overrides);

@@ -165,2 +191,3 @@ this.parent.insertAfter(this, cloned);

// decl.replaceWith(fixedDecl);
Node.prototype.replaceWith = function replaceWith(node) {

@@ -177,2 +204,3 @@ this.parent.insertBefore(this, node);

// rule.moveTo(atRule);
Node.prototype.moveTo = function moveTo(container) {

@@ -190,2 +218,3 @@ this.cleanStyles(this.root() == container.root());

// rule.moveBefore(rule.parent);
Node.prototype.moveBefore = function moveBefore(node) {

@@ -203,2 +232,3 @@ this.cleanStyles(this.root() == node.root());

// rule.moveAfter(rule.parent);
Node.prototype.moveAfter = function moveAfter(node) {

@@ -218,2 +248,3 @@ this.cleanStyles(this.root() == node.root());

// }
Node.prototype.next = function next() {

@@ -231,2 +262,3 @@ var index = this.parent.index(this);

// }
Node.prototype.prev = function prev() {

@@ -238,2 +270,3 @@ var index = this.parent.index(this);

// Remove `parent` node on cloning to fix circular structures
Node.prototype.toJSON = function toJSON() {

@@ -262,2 +295,3 @@ var fixed = {};

// Copy code style from first node with same type
Node.prototype.style = function style(own, detect) {

@@ -270,3 +304,5 @@ var value;

value = this[own];
if (typeof value != "undefined") return value;
if (typeof value != "undefined") {
return value;
}
}

@@ -284,5 +320,5 @@

// Floating child without parent
if (!parent) return this.defaultStyle[detect];
// Detect style by other nodes
if (!parent) {
return defaultStyle[detect];
} // Detect style by other nodes
var root = this.root();

@@ -417,3 +453,3 @@ if (!root.styleCache) root.styleCache = {};

if (typeof value == "undefined") value = this.defaultStyle[detect];
if (typeof value == "undefined") value = defaultStyle[detect];

@@ -425,2 +461,3 @@ root.styleCache[detect] = value;

// Return top parent , parent of parents.
Node.prototype.root = function root() {

@@ -433,2 +470,3 @@ var result = this;

// Recursivelly remove all code style properties (`before` and `between`).
Node.prototype.cleanStyles = function cleanStyles(keepBetween) {

@@ -442,2 +480,3 @@ delete this.before;

var _ref;
if (_isArray) {

@@ -451,2 +490,3 @@ if (_i >= _iterator.length) break;

}
var node = _ref;

@@ -459,2 +499,3 @@ node.cleanStyles(keepBetween);

// Use raw value if origin was not changed
Node.prototype.stringifyRaw = function stringifyRaw(prop) {

@@ -473,18 +514,2 @@ var value = this[prop];

module.exports = Node;
// Default code style
Node.prototype.defaultStyle = {
colon: ": ",
indent: " ",
beforeDecl: "\n",
beforeRule: "\n",
beforeOpen: " ",
beforeClose: "\n",
beforeComment: "\n",
after: "\n",
emptyBody: "",
commentLeft: " ",
commentRight: " "
};
module.exports = Node;

32

lib/parser.js

@@ -9,3 +9,3 @@ "use strict";

var tokenize = _interopRequire(require("./tokenize"));
var tokenizer = _interopRequire(require("./tokenize"));

@@ -21,2 +21,3 @@ var Comment = _interopRequire(require("./comment"));

// CSS parser
var Parser = (function () {

@@ -38,15 +39,6 @@ function Parser(input) {

Parser.prototype.tokenize = (function (_tokenize) {
var _tokenizeWrapper = function tokenize() {
return _tokenize.apply(this, arguments);
};
Parser.prototype.tokenize = function tokenize() {
this.tokens = tokenizer(this.input);
};
_tokenizeWrapper.toString = function () {
return _tokenize.toString();
};
return _tokenizeWrapper;
})(function () {
this.tokens = tokenize(this.input);
});
Parser.prototype.loop = function loop() {

@@ -384,4 +376,8 @@ var token;

} else if (brackets === 0 && type == ":") {
if (prev[0] == "word" && prev[1] == "progid") {
if (!prev && this.input.safe) {
continue;
} else if (!prev) {
throw this.input.error("Double colon", token[2], token[3]);
} else if (prev[0] == "word" && prev[1] == "progid") {
continue;
} else {

@@ -396,5 +392,5 @@ colon = i;

if (colon === false) return;
if (this.input.safe) {
if (colon === false) {
return;
}if (this.input.safe) {
var split;

@@ -449,2 +445,3 @@ for (split = colon - 1; split >= 0; split--) {

}
if (token[0] == "comment") {

@@ -467,2 +464,3 @@ clean = false;

}
origin += token[1];

@@ -469,0 +467,0 @@ }node["_" + prop] = { value: value, raw: origin };

12

lib/postcss.js

@@ -22,6 +22,9 @@ "use strict";

// List of functions to process CSS
var PostCSS = (function () {
function PostCSS() {
var _this = this;
var plugins = arguments[0] === undefined ? [] : arguments[0];
_classCallCheck(this, PostCSS);

@@ -35,2 +38,3 @@

// Add function as PostCSS plugins
PostCSS.prototype.use = function use(plugin) {

@@ -47,4 +51,6 @@ plugin = this.normalize(plugin);

// Process CSS throw installed plugins
PostCSS.prototype.process = function process(css) {
var opts = arguments[1] === undefined ? {} : arguments[1];
var parsed;

@@ -64,2 +70,3 @@ if (css instanceof Root) {

var _ref;
if (_isArray) {

@@ -73,3 +80,5 @@ if (_i >= _iterator.length) break;

}
var plugin = _ref;
var returned = plugin(parsed, opts);

@@ -83,2 +92,3 @@ if (returned instanceof Root) parsed = returned;

// Return plugin function
PostCSS.prototype.normalize = function normalize(plugin) {

@@ -102,3 +112,3 @@ var type = typeof plugin;

// processor.process(css)
var postcss = function () {
var postcss = function postcss() {
for (var _len = arguments.length, plugins = Array(_len), _key = 0; _key < _len; _key++) {

@@ -105,0 +115,0 @@ plugins[_key] = arguments[_key];

19

lib/previous-map.js

@@ -8,2 +8,3 @@ "use strict";

var Base64 = require("js-base64").Base64;
var mozilla = _interopRequire(require("source-map"));

@@ -16,2 +17,3 @@

// Detect previous map
var PreviousMap = (function () {

@@ -29,2 +31,3 @@ function PreviousMap(css, opts) {

// Return SourceMapConsumer object to read map
PreviousMap.prototype.consumer = function consumer() {

@@ -38,2 +41,3 @@ if (!this.consumerCache) {

// Is map has sources content
PreviousMap.prototype.withContent = function withContent() {

@@ -44,8 +48,11 @@ return !!(this.consumer().sourcesContent && this.consumer().sourcesContent.length > 0);

// Is `string` is starting with `start`
PreviousMap.prototype.startWith = function startWith(string, start) {
if (!string) return false;
return string.substr(0, start.length) == start;
if (!string) {
return false;
}return string.substr(0, start.length) == start;
};
// Load for annotation comment from previous compilation step
PreviousMap.prototype.loadAnnotation = function loadAnnotation(css) {

@@ -57,2 +64,3 @@ var match = css.match(/\/\*\s*# sourceMappingURL=(.*)\s*\*\//);

// Encode different type of inline
PreviousMap.prototype.decodeInline = function decodeInline(text) {

@@ -73,6 +81,7 @@ var uri = "data:application/json,";

// Load previous map
PreviousMap.prototype.loadMap = function loadMap(file, prev) {
if (prev === false) return;
if (prev) {
if (prev === false) {
return;
}if (prev) {
if (typeof prev == "string") {

@@ -79,0 +88,0 @@ return prev;

6

lib/result.js

@@ -12,5 +12,7 @@ "use strict";

// Object with processed CSS
var Result = (function () {
function Result(root) {
var opts = arguments[1] === undefined ? {} : arguments[1];
_classCallCheck(this, Result);

@@ -23,2 +25,3 @@

// Return CSS string on any try to print
Result.prototype.toString = function toString() {

@@ -29,2 +32,3 @@ return this.css;

// Generate CSS and map
Result.prototype.stringify = function stringify() {

@@ -41,2 +45,3 @@ var map = new MapGenerator(this.root, this.opts);

// Lazy method to return source map
get: function () {

@@ -51,2 +56,3 @@ if (!this.cssCached) this.stringify();

// Lazy method to return CSS string
get: function () {

@@ -53,0 +59,0 @@ if (!this.cssCached) this.stringify();

9

lib/root.js

@@ -22,2 +22,3 @@ "use strict";

// Root of CSS
var Root = (function (Container) {

@@ -35,2 +36,3 @@ function Root(defaults) {

// Fix space when we remove first child
Root.prototype.remove = function remove(child) {

@@ -47,2 +49,3 @@ child = this.index(child);

// Fix spaces on insert before first rule
Root.prototype.normalize = function normalize(child, sample, type) {

@@ -61,2 +64,3 @@ var nodes = Container.prototype.normalize.call(this, child);

var _ref;
if (_isArray) {

@@ -70,3 +74,5 @@ if (_i >= _iterator.length) break;

}
var node = _ref;
if (this.first != sample) node.before = sample.before;

@@ -81,2 +87,3 @@ }

// Stringify styles
Root.prototype.stringify = function stringify(builder) {

@@ -88,4 +95,6 @@ this.stringifyContent(builder);

// Generate processing result with optional source map
Root.prototype.toResult = function toResult() {
var opts = arguments[0] === undefined ? {} : arguments[0];
return new Result(this, opts);

@@ -92,0 +101,0 @@ };

2

lib/rule.js

@@ -18,2 +18,3 @@ "use strict";

// CSS rule like “a { }”
var Rule = (function (Container) {

@@ -31,2 +32,3 @@ function Rule(defaults) {

// Stringify rule
Rule.prototype.stringify = function stringify(builder) {

@@ -33,0 +35,0 @@ this.stringifyBlock(builder, this.stringifyRaw("selector"));

2

lib/tokenize.js

@@ -35,3 +35,3 @@ "use strict";

var unclosed = function (what, end) {
var unclosed = function unclosed(what, end) {
if (input.safe) {

@@ -38,0 +38,0 @@ css += end;

4

lib/vendor.js

@@ -10,3 +10,3 @@ "use strict";

// vendor.prefix('box-sizing') #=> ''
prefix: function (prop) {
prefix: function prefix(prop) {
if (prop[0] == "-") {

@@ -24,3 +24,3 @@ var sep = prop.indexOf("-", 1);

// vendor.prefix('box-sizing') #=> 'box-sizing'
unprefixed: function (prop) {
unprefixed: function unprefixed(prop) {
if (prop[0] == "-") {

@@ -27,0 +27,0 @@ var sep = prop.indexOf("-", 1);

18

package.json
{
"name": "postcss",
"version": "4.0.4",
"description": "Tool to transform CSS by JS plugins",
"version": "4.0.5",
"description": "Tool for transforming CSS with JS plugins",
"keywords": [

@@ -10,5 +10,6 @@ "css",

"source map",
"transform",
"manipulation",
"preprocess",
"transform"
"transpiler"
],

@@ -23,3 +24,4 @@ "author": "Andrey Sitnik <andrey@sitnik.ru>",

"source-map": "~0.2.0",
"js-base64": "~2.1.7"
"js-base64": "~2.1.7",
"babel": "4.4.5"
},

@@ -33,2 +35,4 @@ "devDependencies": {

"gonzales-pe": "3.0.0-26",
"browserify": "9.0.3",
"gulp-babel": "4.0.0",
"gulp-bench": "1.1.0",

@@ -38,3 +42,2 @@ "gulp-mocha": "2.0.0",

"gulp-util": "3.0.3",
"gulp-6to5": "3.0.0",
"execSync": "1.0.2",

@@ -46,3 +49,3 @@ "fs-extra": "0.16.3",

"request": "2.53.0",
"cssnext": "1.0.0",
"cssnext": "1.0.1",
"rework": "1.0.1",

@@ -55,4 +58,3 @@ "mensch": "0.3.1",

"less": "2.4.0",
"chai": "2.0.0",
"6to5": "3.6.4"
"chai": "2.0.0"
},

@@ -59,0 +61,0 @@ "scripts": {

464

README.md

@@ -5,27 +5,54 @@ # PostCSS [![Build Status](https://travis-ci.org/postcss/postcss.svg)](https://travis-ci.org/postcss/postcss) [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/postcss/postcss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

PostCSS is a tool to transform CSS by JS plugins. This plugins can add vendor
prefixes, polyfill CSS 4 features, inline images, add variables
and mixins support. PostCSS with most popular [Autoprefixer] plugin
is used by Google, Twitter, Alibaba and Shopify.
PostCSS is a tool for transforming CSS with JS plugins. The growing ecosystem
of PostCSS plugins can add vendor prefixes, support variables and mixins,
transpile future CSS syntax, inline images, and more.
PostCSS does same work as Sass, LESS or Stylus. But, instead of preprocessors,
PostCSS is modular, 4—40 times faster and much powerful
(Autoprefixer is impossible on preprocessors).
PostCSS is used by Google, Twitter, Alibaba, and Shopify.
Its most popular plugin, [Autoprefixer], is one of the most universally
praised CSS processors available.
PostCSS is very small. It contains only CSS parser, CSS node tree API,
source map generator and node tree stringifier. All features (like variables
or nesting) are made by plugins. PostCSS plugin is just a JS function, that
accepts CSS node tree, reads and transforms some of nodes in tree.
PostCSS can do the same work as preprocessors like Sass, Less, and Stylus.
But PostCSS is modular, 4-40x faster, and much more powerful.
For example, with [Autoprefixer], [cssnext], [CSS Grace],
[postcss-nested], [postcss-mixins] and [postcss-easings] plugins
you will be able to write this CSS:
PostCSS itself is very small. It includes only a CSS parser,
a CSS node tree API, a source map generator, and a node tree stringifier.
All CSS transformations are encapsulated in modular plugins. And these plugins
are themselves small plain JS functions, which receive a CSS node tree,
apply transformations to it, and return a modified tree.
You can use the [cssnext] plugin pack and write future CSS code right now:
```css
:root {
--row: 1rem;
--mainColor: #ffbbaaff;
}
@custom-media --mobile (width <= 640px);
@custom-selector --heading h1, h2, h3, h4, h5, h6;
.post-article --heading {
margin-top: calc(10 * var(--row));
color: color(var(--mainColor) blackness(+20%));
font-variant-caps: small-caps;
}
@media (--mobile) {
.post-article --heading {
margin-top: 0;
}
}
```
Or if you like the power provided by preprocessors like Sass,
you could combine [postcss-nested], [postcss-mixins], [postcss-easings]
and [postcss-media-minmax]:
```css
$mobile: width <= 640px;
@define-mixin social-icon $color {
& {
background: $color;
&:hover {
background: color($color whiteness(+10%))
}
background: $color;
&:hover {
background: color($color whiteness(+10%));
}

@@ -36,3 +63,2 @@ }

transition: background 200ms ease-in-sine;
font-variant-caps: small-caps;
&.is-twitter {

@@ -44,15 +70,8 @@ @mixin social-icon #55acee;

}
&:active {
opacity: 0.6;
}
}
@custom-media --mobile (width <= 640px);
@custom-selector --heading h1, h2, h3, h4, h5, h6;
.post-article --heading {
margin-top: 10rem;
@media (--mobile) {
margin-top: 0;
.post-article {
padding: 10px 5px;
@media ($mobile) {
padding: 0;
}

@@ -62,3 +81,3 @@ }

Twitter account for articles, releases and new plugins: [@postcss].
Twitter account for articles, releases, and new plugins: [@postcss].
Weibo account: [postcss].

@@ -70,24 +89,19 @@

[Autoprefixer]: https://github.com/postcss/autoprefixer
[CSS Grace]: https://github.com/cssdream/cssgrace
[@postcss]: https://twitter.com/postcss
[postcss]: http://weibo.com/postcss
[cssnext]: https://github.com/cssnext/cssnext
## Differences with preprocessors
## How PostCSS differs from Preprocessors
1. With preprocessors you write your CSS on special programming language.
It is like a PHP, but you mix control statement with styles. As result your
styles is slow, because programming language is too compilcated. With PostCSS
you write styles on normal CSS, just with custom at-rules and functions.
2. Preprocessors tools (like Compass) is written mainly in same
preprocessors language. As result this tools is very limited. The libraries
adds only a custom functions, variables or mixins. There is no way to add new
syntax for CSS 4 polyfills. In PostCSS all magic is written on JS and uses
big universe of npm packages. So you have better and smarter tools.
3. All features is built in this preprocessor’s language. Adding new features
is very difficult for developers, so languages develop slow. All features
of PostCSS is just a small JS functions, which transform CSS nodes tree.
Many developers create new features and you have bigger choice.
Sass, Less and Stylus provide specialized languages that you can use to write
CSS templates. These languages and their compilers are defined together
in large codebases. Tools and libraries for preprocessors must work within
each preprocessor’s limitations: usually they can only offer sets
of pre-defined mixins, functions, and variables.
In contrast, PostCSS provides a simple API that modular plugins can use
to understand, transform, and create CSS. PostCSS plugins, therefore,
can be created, maintained, and implemented independently. And they can perform
many different tasks, not just compile special syntaxes to CSS.
Each plugin does one thing well.
## Features

@@ -97,42 +111,35 @@

Without a plugins, PostCSS just parse your CSS and stringify it back without
change of any byte. All features is made by small JS funcions
from PostCSS plugins. You can choose only features, that you need.
Without any plugins, PostCSS will parse your CSS and stringify it back
to you without changing a single byte. All of the processing that enables
special features and syntax in your stylesheets is made possible
by PostCSS plugins, which are nothing more than JS functions.
Variables is a nice example. There are 2 different plugins for variables.
[postcss-simple-vars] has Sass like syntax:
Because each PostCSS plugin is an independent module, different plugins can take
different approaches. This flexibility allows plugin authors to create whatever
features they can imagine, while empowering PostCSS users to add only
those features that they want to their workflow.
```css
a {
color: $link-color;
}
```
Some plugins, like [postcss-custom-properties], [postcss-media-minmax],
and [postcss-calc], implement syntax from present and future W3C specs,
transpiling it to cross-browser-compatible output. Other plugins,
like [postcss-mixins] and [postcss-simple-extend], add new powers
to your stylesheets that are not yet part of any spec. With PostCSS,
you can decide for yourself which plugins match your own needs and preferences.
[postcss-custom-properties] is a polyfill for [W3C CSS Custom Properties] draft:
Another advantage of PostCSS’s modularity is that anybody can contribute easily
to the PostCSS ecosystem. Plugins are simple npm packages;
so there are no barriers to writing your own plugins, or contributing ideas
and bug fixes to the plugins that you use.
```css
a {
color: var(--link-color);
}
```
In PostCSS you can choose what variables syntax you want or even take both.
[W3C CSS Custom Properties]: http://www.w3.org/TR/css-variables/
[postcss-custom-properties]: https://github.com/postcss/postcss-custom-properties
[postcss-simple-vars]: https://github.com/postcss/postcss-simple-vars
### Perfomance
PostCSS is one of the fastest CSS parsers written on JS. Only [CSSOM] is 10%
faster and only because it parses CSS not so accurate as PostCSS does.
Modular architecture makes PostCSS code is simple and easy to maintain.
PostCSS is one of the fastest CSS parsers written in JS. (Only [CSSOM] is
faster, and only because it is less accurate.) So PostCSS will read your CSS
and apply transformations faster than any other stylesheet processor out there.
As result PostCSS is incredible fast. PostCSS is written on JS, but even with
big [cssnext] plugin pack, it is 4 times faster than [libsass] written on C++.
If you use Ruby Sass now, PostCSS could significantly improve your development
process: PostCSS processing is *40 times faster* than Ruby Sass compilation.
And even if you throw in the entire [cssnext] plugin pack, PostCSS,
written in JS, is still *4 times faster* than [libsass], written on C++.
If you uses Ruby Sass right now, you will be excited with PostCSS developing
process, because PostCSS is 40 times faster that Ruby Sass.
[cssnext]: https://github.com/cssnext/cssnext
[libsass]: https://github.com/sass/libsass

@@ -143,31 +150,48 @@ [CSSOM]: https://github.com/NV/CSSOM

PostCSS plugins can read and rebuild entire CSS node tree.
As result PostCSS has many powerful tools that would be impossible
on preprocessors. Autoprefixer is a good example of how PostCSS plugin could
be useful.
PostCSS plugins can read and rebuild an entire CSS node tree. With this power,
plugin authors are able to create tools that would be impossible
to build into preprocessors (like [Autoprefixer]).
PostCSS allows you to build linters (like [doiuse] or [BEM Linter]),
code review tools (like [list-selectors]) or minifiers (like [CSSWring]).
With [postcss-data-packer] plugin you can create a “sprite” from inlined images
by moving all `data:uri` values to separated file.
PostCSS-powered tools can do much more than transform special syntax into
browser-friendly CSS. PostCSS plugin authors have built linters
(like [doiuse] and [postcss-bem-linter]), code review tools
(like [list-selectors]), and minifiers (like [csswring]).
With [postcss-data-packer], you can create a cacheable “sprite”
by moving all `data:uri` values to separate file.
But my favorite example of PostCSS power is [RTLCSS]. As you know Jews and Arabs
has right-to-left writing. Because writing affects to people perspective
you need to change your site design (check out [Arabic Wikipedia]).
RTLCSS plugin mirrors you design, replace `left` to `right` in your styles,
change values order in `margin`, etc.
One unique example of PostCSS’s power is [RTLCSS]. As you know,
in Arabic and Hebrew, writing moves from right-to-left (RTL), instead
of the more widespread left-to-right convention. Because a language’s
directionality affects its readers’ perspective, an international site’s layout
needs to change for RTL users, not just its text. (Check out [Arabic Wikipedia]
as an example.) The [RTLCSS] plugin effectively “mirrors” your stylesheet
by swapping `left` and `right`, changing the value order in `margin` shorthands,
and more.
[postcss-data-packer]: https://github.com/Ser-Gen/postcss-data-packer
[Arabic Wikipedia]: https://ar.wikipedia.org/wiki/%D9%84%D8%BA%D8%A9_%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9
[list-selectors]: https://github.com/davidtheclark/list-selectors
[BEM Linter]: https://github.com/necolas/postcss-bem-linter
[CSSWring]: https://github.com/hail2u/node-csswring
[doiuse]: https://github.com/anandthakker/doiuse
[RTLCSS]: https://github.com/MohammadYounes/rtlcss
[Arabic Wikipedia]: https://ar.wikipedia.org/wiki/%D9%84%D8%BA%D8%A9_%D8%B9%D8%B1%D8%A8%D9%8A%D8%A9
### Use the CSS of the Future
CSS3 added valuable features, but some of them are not yet available in all
of the browsers that developers need to support. And exciting future CSS modules
are being drafted now — some even implemented in cutting-edge browsers —
that will not be widely available for quite a while. But PostCSS plugins
can allow us to write this CSS of the future, then transpile it to code usable
in all the browsers we must support.
[Autoprefixer] exemplifies this power: you write spec-compliant, future-friendly
CSS, pretending that vendor prefixes don’t exist, and it does the dirty work
of inserting the prefixes you’ll need. All of the plugins bundled into [cssnext]
do similar work, allowing authors to use syntax and functions
from the latest W3C specs without worrying about the fallbacks they’ll need.
As more CSS specs are drafted, more PostCSS plugins will be written. Users will
be able to write stylesheets using standard, interoperable syntax, instead of
a specialized language for a specialized tool (as with preprocessors).
## Quick Start
1. Add PostCSS to your build tool. See [Grunt], [Gulp] and [webpack] plugins
for further instructions.
2. Select plugins from list below and add them to your PostCSS.
1. Implement PostCSS with your build tool of choice. See the PostCSS [Grunt],
[Gulp], and [webpack] plugins more detailed instructions.
2. Select plugins from the list below and add them to your PostCSS process.
3. Make awesome products.

@@ -181,4 +205,5 @@

* [cssnext] is a pack of CSS 4 polyfills plugins.
* [ACSS] contains plugins to control your CSS by special annotation comments.
* [cssnext] contains plugins that allow you to use future CSS features today.
* [ACSS] contains plugins that transform your CSS according
to special annotation comments.

@@ -190,44 +215,85 @@ [cssnext]: https://github.com/putaindecode/cssnext

* [Autoprefixer] adds vendor prefixes to rules by Can I Use.
* [cssgrace] with helpers and CSS 3 polyfills for IE and other old browsers.
### Future CSS Syntax
* [postcss-color-function] supports functions to transform colors.
* [postcss-color-gray] supports the `gray()` function.
* [postcss-color-hex] transforms `rgb()` and `rgba()` to hex.
* [postcss-color-hex-alpha] supports `#rrggbbaa` and `#rgba` notation.
* [postcss-color-hwb] transforms `hwb()` to widely compatible `rgb()`.
* [postcss-color-rebeccapurple] supports the `rebeccapurple` color.
* [postcss-custom-media] supports custom aliases for media queries.
* [postcss-custom-properties] supports variables, using syntax from
the W3C Custom Properties.
* [postcss-custom-selectors] adds custom aliases for selectors.
* [postcss-font-variant] transpiles human-readable `font-variant` to more widely
supported CSS.
* [postcss-host] makes the Shadow DOM’s `:host` selector work properly
with pseudo-classes.
* [postcss-media-minmax] adds `<=` and `=>` statements to media queries.
* [mq4-hover-shim] supports the `@media (hover)` feature.
### Fallbacks
* [postcss-epub] adds the `-epub-` prefix to relevant properties.
* [postcss-opacity] adds opacity filter for IE8.
* [postcss-vmin] generates `vm` fallback for `vmin` unit in IE9.
* [postcss-will-change] inserts 3D hack before `will-change` property.
* [Autoprefixer] adds vendor prefixes for you, using data from Can I Use.
* [cssgrace] provides various helpers and transpiles CSS3 for IE
and other old browsers.
* [pixrem] generates pixel fallbacks for `rem` units.
* [pleeease-filters] converts WebKit filters to SVG filters,
for cross-browser compatibility.
### Language Extensions
* [postcss-mixins] enables mixins more powerful than Sass’s,
defined within stylesheets or in JS.
* [postcss-nested] unwraps nested rules, as Sass does.
* [postcss-simple-extend] supports extending of silent classes,
like Sass’s `@extend`.
* [postcss-simple-vars] supports for Sass-style variables.
* [csstyle] adds components workflow to your styles.
### Optimizations
* [postcss-assets] allows you to simplify URLs, insert image dimensions,
and inline files.
* [postcss-calc] reduces `calc()` to values
(when expressions involve the same units).
* [postcss-data-packer] moves embedded Base64 data out of the stylesheet
and into a separate file.
* [postcss-import] inlines the stylesheets referred to by `@import` rules.
* [postcss-url] rebases or inlines `url()`s.
* [csswring] is a CSS minifier.
* [css-byebye] removes the CSS rules that you don’t want.
* [css-mqpacker] joins matching CSS media queries into a single statement.
* [webpcss] adds URLs for WebP images, so they can be used by browsers
that support WebP.
### Shortcuts
* [postcss-easings] replaces easing names from easings.net
with `cubic-bezier()` functions.
* [postcss-size] adds a `size` shortcut that sets width and height
with one declaration.
### Others
* [postcss-brand-colors] inserts company brand colors
in the `brand-colors` module.
* [postcss-color-palette] transforms CSS2 color keywords to a custom palette.
* [postcss-single-charset] ensures that there is one
and only one `@charset` rule at the top of file.
* [rtlcss] mirrors styles for right-to-left locales.
* [pixrem] is a `rem` unit polyfill.
* [css-mqpacker] joins same CSS media queries into one rule.
* [postcss-assets] inlines files and inserts image width and height.
* [css2modernizr] analyzes your CSS and output only used Modernizr’s settings.
* [postcss-bem-linter] lints CSS for SUIT CSS methodology.
* [pleeease-filters] converts WebKit filters to SVG filter for other browsers.
* [postcss-custom-selectors] to add custom alias for selectors.
* [doiuse] lints CSS for browser support against Can I Use database.
* [webpcss] adds links to WebP images for browsers that support it.
* [postcss-import] inlines `@import` rules content.
* [postcss-nested] unwraps nested rules.
* [postcss-media-minmax] adds `<=` and `=>` statements to CSS media queries.
* [postcss-mixins] to use mixins.
* [postcss-easings] replaces easing name to `cubic-bezier()`.
* [postcss-url] rebases or inlines `url()`.
* [postcss-epub] adds `-epub-` prefix.
* [postcss-custom-properties] is a polyfill for W3C CSS variables spec.
* [mq4-hover-shim] is a shim for the `@media (hover: hover)` feature.
* [postcss-color-palette] transforms CSS 2 color keywords to a custom palette.
* [postcss-custom-media] to add custom alias for media queries.
* [css-byebye] removes CSS rules by some criteria.
* [postcss-simple-vars] adds Sass-style variables support.
* [postcss-data-packer] moves an inlined data into a separate file.
* [postcss-color-gray] adds `gray()` function.
* [postcss-brand-colors] inserts branding colors by companies name.
* [list-selectors] is a code review tool for your CSS.
* [postcss-calc] reduce `calc()` with same units.
* [postcss-font-variant] adds readable front variant properies support.
* [postcss-simple-extend] adds `@extend` support.
* [postcss-size] adds `size` shorcut to set width and height in one property.
* [postcss-color-hex] transforms `rgb()` and `rgba()` to hex.
* [postcss-host] make `:host` selectors work properly with pseudo-classes.
* [postcss-color-rebeccapurple] is a `rebeccapurple` color polyfill.
* [postcss-color-function] adds functions to transform colors.
* [postcss-color-hex-alpha] adds `#rrggbbaa` and `#rgba` notation support.
* [postcss-color-hwb] transforms `hwb()` to `rgb()`.
* [postcss-single-charset] pops first `@charset` rule.
### Analysis
* [postcss-bem-linter] lints CSS for conformance to SUIT CSS methodology.
* [css2modernizr] creates a Modernizr config file
that requires only the tests that your CSS uses.
* [doiuse] lints CSS for browser support, using data from Can I Use.
* [list-selectors] lists and categorizes the selectors used in your CSS,
for code review and analysis.
[postcss-color-rebeccapurple]: https://github.com/postcss/postcss-color-rebeccapurple

@@ -245,2 +311,3 @@ [postcss-custom-properties]: https://github.com/postcss/postcss-custom-properties

[postcss-font-variant]: https://github.com/postcss/postcss-font-variant
[postcss-will-change]: https://github.com/postcss/postcss-will-change
[postcss-simple-vars]: https://github.com/postcss/postcss-simple-vars

@@ -254,2 +321,3 @@ [postcss-data-packer]: https://github.com/Ser-Gen/postcss-data-packer

[postcss-easings]: https://github.com/postcss/postcss-easings
[postcss-opacity]: https://github.com/iamvdo/postcss-opacity
[postcss-assets]: https://github.com/borodean/postcss-assets

@@ -268,2 +336,3 @@ [postcss-import]: https://github.com/postcss/postcss-import

[postcss-host]: https://github.com/vitkarpov/postcss-host
[postcss-vmin]: https://github.com/iamvdo/postcss-vmin
[postcss-url]: https://github.com/postcss/postcss-url

@@ -273,4 +342,6 @@ [css-byebye]: https://github.com/AoDev/css-byebye

[csswring]: https://github.com/hail2u/node-csswring
[csstyle]: https://github.com/geddski/csstyle
[webpcss]: https://github.com/lexich/webpcss
[rtlcss]: https://github.com/MohammadYounes/rtlcss
[RTLCSS]: https://github.com/MohammadYounes/rtlcss
[pixrem]: https://github.com/robwierzbowski/node-pixrem

@@ -291,3 +362,3 @@ [doiuse]: https://github.com/anandthakker/doiuse

Read [postcss function], [processor] and [Result] API docs for more details.
Read the [postcss function], [processor], and [Result] API docs for more details.

@@ -300,40 +371,17 @@ [postcss function]: https://github.com/postcss/postcss/blob/master/API.md#postcss-function

By using [source maps], a browser’s development tools can indicate the
original position of your styles before the css file was transformed.
For example, an inspector will show the position in a Sass file, even if
the file has been compiled to CSS, concatenated, and minified.
PostCSS has great [source maps] support. It can read and interpret maps
from previous transformation steps, autodetect the format that you expect,
and output both external and inline maps.
To ensure a correct source map is generated, every CSS processing step should
update the map generated by the previous step. For example, a Sass compiler
will generate the first map, a concatenation tool should update the Sass step’s
map, and a minifier should update the map generated by the concatenation tool.
To ensure that you generate an accurate source map, you must indicate the input
and output CSS files paths — using the options `from` and `to`, respectively.
There are two ways to store a source map:
To generate a new source map with the default options, simply set `map: true`.
This will generate an inline source map that contains the source content.
If you don’t want the map inlined, you can use set `map.inline: false`.
* You can place it in a separate file which contains a special annotation
comments pointing to another file:
```css
a { }
/*# sourceMappingURL=main.out.css.map */
```
* Or you can inline a base64-encoded source map within a CSS comment:
```css
a { }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5taW4uY3NzIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxJQUFLIn0= */
```
PostCSS has great source map support. To ensure that you generate the correct
source map, you must indicate the input and output CSS files
paths (using the options `from` and `to` respectively).
To generate a new source map with the default options, provide `map: true`.
This will inline sourcemap with source content. If you don’t want the map
inlined, you can use `map.inline: false` option.
```js
var result = processor.process(css, {
from: 'main.css',
to: 'main.out.css'
to: 'main.out.css',
map: { inline: false },

@@ -345,4 +393,4 @@ });

If PostCSS is handling CSS and finds source maps from previous transformations,
it will automatically update the CSS with the same options.
If PostCSS finds source maps from a previous transformation,
it will automatically update that source map with the same options.

@@ -356,36 +404,34 @@ ```js

If you want more control over source map generation, you can define the `map`
option as an object with the following parameters:
option as an object with the following parameters:
* `inline` (boolean): indicates the source map should be inserted into the CSS
base64 string as a comment. By default it is `true`. But if all previous map
are in separated too, PostCSS will not inline map too.
* `inline` boolean: indicates that the source map should be embedded
in the output CSS as a Base64-encoded comment. By default it is `true`.
But if all previous maps are external, not inline, PostCSS will not embed
the map even if you do not set this option.
If you inline a source map, `result.map` will be empty, as the source map
will be contained within the text of `result.css`.
If you have an inline source map, the `result.map` property will be empty,
as the source map will be contained within the text of `result.css`.
* `prev` (string, object, or boolean): map content from a previous processing
step (for example, Sass compilation). PostCSS will try to read the previous
source map automatically from the comment within origin CSS, but you can also
set manually. If desired, you can omit the previous map with `prev: false`.
* `prev` string, object or boolean: source map content from
a previous processing step (for example, Sass compilation).
PostCSS will try to read the previous source map automatically
(based on comments within the source CSS), but you can use this option
to identify it manually. If desired, you can omit the previous map
with `prev: false`.
This is a source map option which can be passed to `postcss.parse(css, opts)`.
Other options can be passed to the `toResult(opts)` or `process(css, opts)`
methods.
* `sourcesContent` boolean: indicates that PostCSS should set the origin
content (for example, Sass source) of the source map. By default it is `true`.
But if all previous maps do not contain sources content, PostCSS will also
leave it out even if you do not set this option.
* `sourcesContent` (boolean): indicates that we should set the origin content
(for example, Sass source) of the source map. By default it is `true`.
But if all previous map do not contain sources content,
PostCSS will miss it too.
* `annotation` boolean or string: indicates that PostCSS should add annotation
comments to the CSS. By default, PostCSS will always add a comment with a path
to the source map. But if the input CSS does not have any annotation
comment, PostCSS will omit it, too, even if you do not set this option.
* `annotation` (boolean or string): indicates if we should add annotation
comments to the CSS. By default, PostCSS will always add a comment with a path
to the source map. But if the previous CSS does not have an annotation
comment, PostCSS will omit it too.
By default, PostCSS presumes that you want to save the source map as
`opts.to + '.map'` and will use this path in the annotation comment.
But you can set another path by providing a string value as the `annotation`
option.
`opts.to + '.map'` and will use this path in the annotation comment.
But you can set another path by providing a string value for `annotation`.
If you set `inline: true`, annotation cannot be disabled.
If you have set `inline: true`, annotation cannot be disabled.

@@ -397,3 +443,3 @@ [source maps]: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

If you provide a `safe: true` option to the `process` or `parse` methods,
PostCSS will try to correct any syntax error that it finds in the CSS.
PostCSS will try to correct any syntax errors that it finds in the CSS.

@@ -405,4 +451,4 @@ ```js

This is useful for legacy code filled with plenty of hacks. Another use case
is interactive tools with live input, for example,
This is useful for legacy code filled with hacks. Another use-case
is interactive tools with live input — for example,
the [Autoprefixer demo](http://jsfiddle.net/simevidas/udyTs/show/light/).

@@ -409,0 +455,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc