postcss-processor-splicer v3.0.0

postcss-processor-splicer

Allow your postcss plugin pipeline to be modified like an array.

Example

var postcss = require('postcss')
var Pipeline = require('postcss-processor-splicer')

function createCreator(name) {
  return function (opts) {
    return function (root) {
      root.append( { selector: opts && opts.name || name } )
    }
  }
}

var A = postcss.plugin('A', createCreator('a'))
var B = postcss.plugin('B', createCreator('b'))
var C = postcss.plugin('C', createCreator('c'))
var D = postcss.plugin('D', createCreator('d'))

var pipeline = new Pipeline([
  A, // creator
  B(), // plugin
  postcss([C()]), // processor
  new Pipeline([[D, { name: 'd' }]]),  // pipeline
])

Promise.resolve()
  .then(function () {
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'apply all plugins: A, B, C, D'))
  })
  .then(function () {
    return pipeline.build('B', 'C')
      .process('x{}')
      .then(log.bind(null, 'apply plugins B, C with default options'))
  })
  .then(function () {
    return pipeline.build(['A', { name: '.a' }], ['D', { name: '.d' }])
      .process('x{}')
      .then(log.bind(null, 'apply plugins A, D with options (only valid for creators)'))
  })
  .then(function () {
    pipeline.splice('B', 2)
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'splice, delete B, C'))
  })
  .then(function () {
    pipeline.unshift(B())
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'unshift plugin B'))
  })
  .then(function () {
    pipeline.push(C)
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'push creator C'))
  })
  .then(function () {
    pipeline.get('C').push({ name: '.c' })
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'modify default options for creator C'))
  })
  .then(function () {
    pipeline.pop()
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'pop creator C'))
  })
  .then(function () {
    pipeline.shift()
    return pipeline.build()
      .process('x{}')
      .then(log.bind(null, 'shift plugin B'))
  })
  .catch(function (err) {
    console.log(err)
  })

function log(title, result) {
  console.log('\n')
  console.log('x'.repeat(40))
  console.log(title, ':')
  console.log(result.css)
}

output:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
apply all plugins: A, B, C, D :
x{}
a{}
b{}
c{}
d{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
apply plugins B, C with default options :
x{}
b{}
c{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
apply plugins A, D with options (only valid for creators) :
x{}
.a{}
.d{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
splice, delete B, C :
x{}
a{}
d{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
unshift plugin B :
x{}
b{}
a{}
d{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
push creator C :
x{}
b{}
a{}
d{}
c{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
modify default options for creator C :
x{}
b{}
a{}
d{}
.c{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
pop creator C :
x{}
b{}
a{}
d{}


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
shift plugin B :
x{}
a{}
d{}

pipeline = new Pipeline(creators)

Create a pipeline of creators.

creators

Type: Array

Elements could be postcss plugins, postcss plugin creators, instances of Pipeline. To set default options, just pass an array as the element.

pipeline.ArrayLikeMethods

Modify the builtin creators.

ArrayLikeMethods could be one of the following:

• splice
• push
• pop
• shift
• unshift

creator = pipeline.get(...postcssPlugin)

Get the internal representation of the creators according to the given plugin names or indexes.

creator

Representation of a creator.

Type: Array

The first element could be a postcss plugin function, or postcss creator function (created with postcss.plugin).

Other elements are passed to the creator as options when build the plugin function.

postcssPlugin

Type: String, Number

Plugin name, or indexes in the pipeline.

pipeline.build(...creators)

Create a postcss processor from given creators, or creators in the pipeline.

You can use the plugin name or index to specify the plugin.