The container’s first child.
rule.first === rules.nodes[0]
The container’s last child.
rule.last === rule.nodes[rule.nodes.length - 1]
Insert new node after current node to current node’s parent.
Just alias for node.parent.insertAfter(node, add)
.
decl.after('color: black')
New node.
This node for methods chain.
Inserts new nodes to the end of the container.
const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.append(decl1, decl2)
root.append({ name: 'charset', params: '"UTF-8"' }) // at-rule
root.append({ selector: 'a' }) // rule
rule.append({ prop: 'color', value: 'black' }) // declaration
rule.append({ text: 'Comment' }) // comment
root.append('a {}')
root.first.append('color: black; z-index: 1')
Rest
...nodes: NewChild[]New nodes.
This node for methods chain.
Insert new node before current node to current node’s parent.
Just alias for node.parent.insertBefore(node, add)
.
decl.before('content: ""')
New node.
This node for methods chain.
It creates clone of an existing node, which includes all the properties
and their values, that includes raws
but not type
.
decl.raws.before //=> "\n "
const cloned = decl.clone({ prop: '-moz-' + decl.prop })
cloned.raws.before //=> "\n "
cloned.toString() //=> -moz-transform: scale(0)
Duplicate of the node instance.
Iterates through the container’s immediate children,
calling callback
for each child.
Returning false
in the callback will break iteration.
This method only iterates through the container’s immediate children.
If you need to recursively iterate through all the container’s descendant
nodes, use Container#walk
.
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.
const root = postcss.parse('a { color: black; z-index: 1 }')
const rule = root.first
for (const decl of rule.nodes) {
decl.cloneBefore({ prop: '-webkit-' + decl.prop })
// Cycle will be infinite, because cloneBefore moves the current node
// to the next index
}
rule.each(decl => {
decl.cloneBefore({ prop: '-webkit-' + decl.prop })
// Will be executed only for color and z-index
})
Iterator receives each node and index.
Returns false
if iteration was broke.
It creates an instance of the class CssSyntaxError
and parameters passed
to this method are assigned to the error instance.
The error instance will have description for the error, original position of the node in the source, showing line and column number.
If any previous map is present, it would be used to get original position of the source.
The Previous Map here is referred to the source map generated by previous compilation, example: Less, Stylus and Sass.
This method returns the error instance instead of throwing it.
if (!variables[name]) {
throw decl.error(`Unknown variable ${name}`, { word: name })
// CssSyntaxError: postcss-vars:a.sass:4:3: Unknown variable $black
// color: $black
// a
// ^
// background: white
}
Description for the error instance.
Optional
options: NodeErrorOptionsOptions for the error instance.
Error instance is returned.
Returns true
if callback returns true
for all of the container’s children.
const noPrefixes = rule.every(i => i.prop[0] !== '-')
Iterator returns true or false.
Is every child pass condition.
Returns a child
’s index within the Container#nodes
array.
rule.index( rule.nodes[2] ) //=> 2
Child of the current container.
Child index.
Protected
markIf this node isn't already dirty, marks it and its ancestors as such. This indicates to the LazyResult processor that the Root has been modified by the current plugin and may need to be processed again by other plugins.
Inserts new nodes to the start of the container.
const decl1 = new Declaration({ prop: 'color', value: 'black' })
const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
rule.prepend(decl1, decl2)
root.append({ name: 'charset', params: '"UTF-8"' }) // at-rule
root.append({ selector: 'a' }) // rule
rule.append({ prop: 'color', value: 'black' }) // declaration
rule.append({ text: 'Comment' }) // comment
root.append('a {}')
root.first.append('color: black; z-index: 1')
Rest
...nodes: NewChild[]New nodes.
This node for methods chain.
Get the range for a word or start and end index inside the node. The start index is inclusive; the end index is exclusive.
Optional
opts: Pick<WarningOptions, "index" | "word" | "endIndex">Options.
Range.
Returns a raws
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.
const root = postcss.parse('a { background: white }')
root.nodes[0].append({ prop: 'color', value: 'black' })
root.nodes[0].nodes[1].raws.before //=> undefined
root.nodes[0].nodes[1].raw('before') //=> ' '
Name of code style property.
Optional
defaultType: stringName of default value, it can be missed if the value is the same as prop.
Code style value.
Removes node from the container and cleans the parent properties from the node and its children.
rule.nodes.length //=> 5
rule.removeChild(decl)
rule.nodes.length //=> 4
decl.parent //=> undefined
Child or child’s index.
This node for methods chain.
Passes all declaration values within the container that match pattern through callback, replacing those values with the returned result of callback.
This method is useful if you are using a custom unit or function and need to iterate through all values.
root.replaceValues(/\d+rem/, { fast: 'rem' }, string => {
return 15 * parseInt(string) + 'px'
})
Replace pattern.
Options to speed up the search.
String to replace pattern or callback
that returns a new value. The callback
will receive the same arguments
as those passed to a function parameter
of String#replace
.
This node for methods chain.
Returns true
if callback returns true
for (at least) one
of the container’s children.
const hasPrefix = rule.some(i => i.prop[0] === '-')
Iterator returns true or false.
Is some child pass condition.
Returns a Result
instance representing the root’s CSS.
const root1 = postcss.parse(css1, { from: 'a.css' })
const root2 = postcss.parse(css2, { from: 'b.css' })
root1.append(root2)
const result = root1.toResult({ to: 'all.css', map: true })
Optional
options: ProcessOptions<Document_ | Root_>Options.
Result with current root’s CSS.
It compiles the node to browser readable cascading style sheets string depending on it's type.
new Rule({ selector: 'a' }).toString() //=> "a {}"
Optional
stringifier: Stringifier | Syntax<Document_ | Root_>A syntax to use in string generation.
CSS string of this node.
Traverses the container’s descendant nodes, calling callback for each node.
Like container.each(), this method is safe to use if you are mutating arrays during iteration.
If you only need to iterate through the container’s immediate children,
use Container#each
.
root.walk(node => {
// Traverses all descendant nodes.
})
Iterator receives each node and index.
Returns false
if iteration was broke.
Traverses the container’s descendant nodes, calling callback for each at-rule node.
If you pass a filter, iteration will only happen over at-rules that have matching names.
Like Container#each
, this method is safe
to use if you are mutating arrays during iteration.
root.walkAtRules(rule => {
if (isOld(rule.name)) rule.remove()
})
let first = false
root.walkAtRules('charset', rule => {
if (!first) {
first = true
} else {
rule.remove()
}
})
Returns false
if iteration was broke.
Traverses the container’s descendant nodes, calling callback for each declaration node.
If you pass a filter, iteration will only happen over declarations with matching properties.
root.walkDecls(decl => {
checkPropertySupport(decl.prop)
})
root.walkDecls('border-radius', decl => {
decl.remove()
})
root.walkDecls(/^background/, decl => {
decl.value = takeFirstColorFromGradient(decl.value)
})
Like Container#each
, this method is safe
to use if you are mutating arrays during iteration.
Iterator receives each node and index.
Returns false
if iteration was broke.
Traverses the container’s descendant nodes, calling callback for each rule node.
If you pass a filter, iteration will only happen over rules with matching selectors.
Like Container#each
, this method is safe
to use if you are mutating arrays during iteration.
const selectors = []
root.walkRules(rule => {
selectors.push(rule.selector)
})
console.log(`Your CSS uses ${ selectors.length } selectors`)
Returns false
if iteration was broke.
It is a wrapper for Result#warn, providing convenient way of generating warnings.
Declaration: {
bad: (decl, { result }) => {
decl.warn(result, 'Deprecated property: bad')
}
}
The Result
instance that will receive the warning.
Description for the warning.
Optional
options: WarningOptionsOptions for the warning.
Warning
instance is returned
An array containing the container’s children.
const root = postcss.parse('a { color: black }')
root.nodes.length //=> 1
root.nodes[0].selector //=> 'a'
root.nodes[0].nodes[0].prop //=> 'color'
It represents parent of the current node.
root.nodes[0].parent === root //=> true
It represents unnecessary whitespace and characters present in the css source code.
Information to generate byte-to-byte equal node string as it was in the origin input.
The properties of the raws object are decided by parser, the default parser uses the following properties:
before
: the space symbols before the node. It also stores *
and _
symbols before the declaration (IE hack).after
: the space symbols after the last child of the node
to the end of the node.between
: the symbols between the property and value
for declarations, selector and {
for rules, or last parameter
and {
for at-rules.semicolon
: contains true if the last child has
an (optional) semicolon.afterName
: the space between the at-rule name and its parameters.left
: the space symbols between /*
and the comment’s text.right
: the space symbols between the comment’s text
and */
.important
: the content of the important statement,
if it is not just !important
.PostCSS filters out the comments inside selectors, declaration values and at-rule parameters but it stores the origin content in raws.
const root = postcss.parse('a {\n color:black\n}')
root.first.first.raws //=> { before: '\n ', between: ':' }
Optional
sourceIt represents information related to origin of a node and is required for generating source maps.
The nodes that are created manually using the public APIs
provided by PostCSS will have source
undefined and
will be absent in the source map.
For this reason, the plugin developer should consider duplicating nodes as the duplicate node will have the same source as the original node by default or assign source to a node created manually.
decl.source.input.from //=> '/home/ai/source.css'
decl.source.start //=> { line: 10, column: 2 }
decl.source.end //=> { line: 10, column: 12 }
// Incorrect method, source not specified!
const prefixed = postcss.decl({
prop: '-moz-' + decl.prop,
value: decl.value
})
// Correct method, source is inherited when duplicating.
const prefixed = decl.clone({
prop: '-moz-' + decl.prop
})
if (atrule.name === 'add-link') {
const rule = postcss.rule({
selector: 'a',
source: atrule.source
})
atrule.parent.insertBefore(atrule, rule)
}
It represents type of a node in an abstract syntax tree.
A type of node helps in identification of a node and perform operation based on it's type.
const declaration = new Declaration({
prop: 'color',
value: 'black'
})
declaration.type //=> 'decl'
Represents a CSS file and contains all its parsed nodes.