DEV Community


Posted on

PostCSS: Processor and Plugin module

Table of contents


Creates a Processor instance. This instance can be used on multiple Stylesheets. postcss default export function returns a Processor instance. The main purpose of this module is to process the plugins, which is called Normalization here, add to the plugins data member for storage and return a LazyResult promise.

Data members

plugins - Array<Plugin|Transformer|TransformCallback>

stores a list of plugins added to this Processor instance.



takes in a plugin to append to the list of plugins and returns instance of Processor.


Parses CSS (can be passed in as various types) to return LazyResult promise.


Takes in Array< plugin > are argument. For each of the plugin, the following steps are done:

  • Normalization involves a preprocessing step where
    • if postcss === true, it is executed immediately as function without argument.
    • if postcss contains any other truthy value, then the object is destructured to set postcss as top level value.
  • Next step involves added the plugins to normalized list.
    • if plugin is object
      • and plugin.plugins is Array, the plugins are merged to the normalized plugin list.
      • and plugin.postcssPlugin is truthy, it is appended to normalized plugin list.
    • type 'function' directs becomes eligible to be added in normalized list.
  • Other types are naturally eligible to enter the error conditions.



Takes in CSS either as string or already parsed Node|Root, to pass Root to new instance of Result. Along with Result, helpers and plugins are also added as data members to this.


This is a very simple data structure to store fields (like a POJO):

  • processor
  • Array<Warning> as messages
  • root
  • css
  • map
  • opts Main processing logic is present in other modules. Here, both content and toString returns the same Result.css.


Extends from Processors. If they are async, then Promise must be returned.


takes in Result and returns Processors


A simple structure that is used to get debug info i.e. source and location of the error and the plugin that is causing this. It has got a self-explanatory toString method.

Other Entities


Processor takes an Array of AcceptedPlugin which can be of type:

  • Plugin
  • PluginCreator<any>
  • OldPlugin<any>
  • TransformCallback
  • {postcss: TransformCallback|Processor}
  • Processor - The current Processor instance will copy this Processor's plugins

Discussion (0)