DEV Community

itzsrikanth
itzsrikanth

Posted on

PostCSS: Processor and Plugin module

#postcss #underthehood #sourcecode

Table of contents

Processor

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.

Methods

use

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

process

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

normalize

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.

LazyResult

constructor

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.

Result

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.

Plugins

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

prepare

takes in Result and returns Processors

Warning

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

AcceptedPlugin

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

Top comments (0)