Optionaldefaults: DeclarationPropsIt 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: ':' }
OptionalsourceIt 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'
It represents a specificity of the declaration.
If true, the CSS declaration will have an important specifier.
const root = postcss.parse('a { color: black !important; color: red }')
root.first.first.important //=> true
root.first.last.important //=> undefined
The property name for a CSS declaration.
const root = postcss.parse('a { color: black }')
const decl = root.first.first
decl.prop //=> 'color'
The property value for a CSS declaration.
Any CSS comments inside the value string will be filtered out.
CSS comments present in the source value will be available in
the raws property.
Assigning new value would ignore the comments in raws
property while compiling node to string.
const root = postcss.parse('a { color: black }')
const decl = root.first.first
decl.value //=> 'black'
It represents a getter that returns true if a declaration starts with
-- or $, which are used to declare variables in CSS and SASS/SCSS.
const root = postcss.parse(':root { --one: 1 }')
const one = root.first.first
one.variable //=> true
const root = postcss.parse('$one: 1')
const one = root.first
one.variable //=> true
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.
It assigns properties to an existing node instance.
decl.assign({ prop: 'word-wrap', value: 'break-word' })
New properties to override the node.
this for method chaining.
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.
Clear the code style properties for the node and its children.
node.raws.before //=> ' '
node.cleanRaws()
node.raws.before //=> undefined
OptionalkeepBetween: booleanKeep the raws.between symbols.
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)
Optionaloverrides: Partial<DeclarationProps>New properties to override in the clone.
Duplicate of the node instance.
Shortcut to clone the node and insert the resulting cloned node after the current node.
Optionaloverrides: Partial<DeclarationProps>New properties to override in the clone.
New node.
Shortcut to clone the node and insert the resulting cloned node before the current node.
decl.cloneBefore({ prop: '-moz-' + decl.prop })
Optionaloverrides: Partial<DeclarationProps>Mew properties to override in the clone.
New node
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.
Optionaloptions: Node.NodeErrorOptionsOptions for the error instance.
Error instance is returned.
ProtectedmarkIf 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.
Returns the next child of the node’s parent.
Returns undefined if the current node is the last child.
if (comment.text === 'delete next') {
const next = comment.next()
if (next) {
next.remove()
}
}
Next node.
Get the position for a word or an index inside the node.
Optionalopts: Pick<WarningOptions, "index" | "word">Options.
Position.
Returns the previous child of the node’s parent.
Returns undefined if the current node is the first child.
const annotation = decl.prev()
if (annotation.type === 'comment') {
readAnnotation(annotation.text)
}
Previous node.
Get the range for a word or start and end index inside the node. The start index is inclusive; the end index is exclusive.
Optionalopts: Pick<WarningOptions, "index" | "word" | "end" | "endIndex" | "start">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.
OptionaldefaultType: stringName of default value, it can be missed if the value is the same as prop.
Code style value.
It removes the node from its parent and deletes its parent property.
if (decl.prop.match(/^-webkit-/)) {
decl.remove()
}
this for method chaining.
Inserts node(s) before the current node and removes the current node.
AtRule: {
mixin: atrule => {
atrule.replaceWith(mixinRules[atrule.params])
}
}
Mode(s) to replace current one.
Current node to methods chain.
Finds the Root instance of the node’s tree.
root.nodes[0].nodes[0].root() === root
Root parent.
Fix circular links on JSON.stringify().
Cleaned object.
It compiles the node to browser readable cascading style sheets string depending on it's type.
new Rule({ selector: 'a' }).toString() //=> "a {}"
Optionalstringifier: Stringifier | Syntax<Document_ | Root_>A syntax to use in string generation.
CSS string of this node.
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.
Optionaloptions: WarningOptionsOptions for the warning.
Warning instance is returned
It represents a class that handles CSS declarations