postcss

postcss

Source:

Create a new Processor instance that will apply plugins as CSS processors.

Example

import postcss from 'postcss'

postcss(plugins).process(css, { from, to }).then(result => {
  console.log(result.css)
})

Members

(static) list :list

Source:

Contains the list module.

Type:
Example
postcss.list.space('5px calc(10% + 5px)') //=> ['5px', 'calc(10% + 5px)']

(static) vendor :vendor

Source:

Contains the vendor module.

Type:
Example
postcss.vendor.unprefixed('-moz-tab') //=> ['tab']

Methods

(static) atRule(defaultsopt) → {AtRule}

Source:

Creates a new AtRule node.

Example
postcss.atRule({ name: 'charset' }).toString() //=> "@charset"
Parameters:
Name Type Attributes Description
defaults object <optional>

Properties for the new node.
Returns:

new at-rule node

Type
AtRule

(static) comment(defaultsopt) → {Comment}

Source:

Creates a new Comment node.

Example
postcss.comment({ text: 'test' })
Parameters:
Name Type Attributes Description
defaults object <optional>

Properties for the new node.
Returns:

New comment node

Type
Comment

(static) decl(defaultsopt) → {Declaration}

Source:

Creates a new Declaration node.

Example
postcss.decl({ prop: 'color', value: 'red' }).toString() //=> "color: red"
Parameters:
Name Type Attributes Description
defaults object <optional>

Properties for the new node.
Returns:

new declaration node

Type
Declaration

(static) parse(css, optsopt) → {Root}

Source:

Parses source css and returns a new Root node, which contains the source CSS nodes.

Example
// Simple CSS concatenation with source map support
const root1 = postcss.parse(css1, { from: file1 })
const root2 = postcss.parse(css2, { from: file2 })
root1.append(root2).toResult().css
Parameters:
Name Type Attributes Description
css string | toString

String with input CSS or any object with toString() method, like a Buffer
opts processOptions <optional>

Options with only from and map keys.
Returns:

PostCSS AST.

Type
Root

(static) plugin(name, initializer) → {Plugin}

Source:

Creates a PostCSS plugin with a standard API.

The newly-wrapped function will provide both the name and PostCSS version of the plugin.

const processor = postcss([replace])
processor.plugins[0].postcssPlugin  //=> 'postcss-replace'
processor.plugins[0].postcssVersion //=> '6.0.0'

The plugin function receives 2 arguments: Root and Result instance. The function should mutate the provided Root node. Alternatively, you can create a new Root node and override the result.root property.

const cleaner = postcss.plugin('postcss-cleaner', () => {
  return (root, result) => {
    result.root = postcss.root()
  }
})

As a convenience, plugins also expose a process method so that you can use them as standalone tools.

cleaner.process(css, processOpts, pluginOpts)
// This is equivalent to:
postcss([ cleaner(pluginOpts) ]).process(css, processOpts)

Asynchronous plugins should return a Promise instance.

postcss.plugin('postcss-import', () => {
  return (root, result) => {
    return new Promise( (resolve, reject) => {
      fs.readFile('base.css', (base) => {
        root.prepend(base)
        resolve()
      })
    })
  }
})

Add warnings using the Node#warn method. Send data to other plugins using the Result#messages array.

postcss.plugin('postcss-caniuse-test', () => {
  return (root, result) => {
    root.walkDecls(decl => {
      if (!caniuse.support(decl.prop)) {
        decl.warn(result, 'Some browsers do not support ' + decl.prop)
      }
    })
  }
})
Parameters:
Name Type Description
name string

PostCSS plugin name. Same as in name property in package.json. It will be saved in plugin.postcssPlugin property.
initializer function

Will receive plugin options and should return pluginFunction
Returns:

PostCSS plugin.

Type
Plugin

(static) root(defaultsopt) → {Root}

Source:

Creates a new Root node.

Example
postcss.root({ after: '\n' }).toString() //=> "\n"
Parameters:
Name Type Attributes Description
defaults object <optional>

Properties for the new node.
Returns:

new root node.

Type
Root

(static) rule(defaultsopt) → {Rule}

Source:

Creates a new Rule node.

Example
postcss.rule({ selector: 'a' }).toString() //=> "a {\n}"
Parameters:
Name Type Attributes Description
defaults object <optional>

Properties for the new node.
Returns:

new rule node

Type
Rule

(static) stringify(node, builder) → {void}

Source:

Default function to convert a node tree into a CSS string.

Parameters:
Name Type Description
node Node

Start node for stringifing. Usually Root.
builder builder

Function to concatenate CSS from node’s parts or generate string and source map.
Returns:
Type
void