How to write a plugin for cssobj? see below

A plugin is an js object passed into plugins array of config (2nd) argument with cssobj call:

cssobj(obj, { plugins: [plugin1, plugin2, ...] })

All plugins just plain Javascript Objects, use type: function as key/value pair, like below:

cssobj(obj, { plugins: [
    { selector: (selector) => { return another_selector } },  // plugin1: changed to another_selector
    { value: (value, prop) => { return another_value } },  // plugin2: changed to another_value
    ...
]})

Currently cssobj support below types

selector is current selector name according to CSS, including normal @-rules, but except for group @-rules @media, @document, @supports, @page, @keyframes

It's not recommanded to change above gorup @-rules, if you want doing so, use node.groupText

For node and result Object members, please see: Type Definition

Example plugin: add a container class to all selectors:

const plugin1 = {
  selector: sel => sel[0]=='@'
    ? sel  // unchanged
    : '.container ' + sel
}
cssobj({p: {color: 'red'}}, { plugins: [plugin1] })
// .container p {color: red;}

See also: cssobj-plugin-localize

value is the value according to raw JS Source Object Value

key is the key according to raw JS Source Object Value

For node and result Object members, please see: Type Definition

Example plugin: double the number of value, and add px, if it's width/height

const plugin2 = {
  value: (val, sel) => /width|height/.test(sel)
    ? val * 2 + 'px'
    : val  // unchanged
}
cssobj({p: {width: 100}}, { plugins: [plugin2] })
// p {width: 200px}

See also: cssobj-plugin-default-unit

Do something with cssobj result object, like generate css text, do sth with <style> tag, etc.

For result Object members, please see: Type Definition

See: cssobj-plugin-gencss

As a convention of existing plugins, plugin author can use below style:

function(option: Object) -> Object({ plugin_type: function })

The function should accept only one argument, option can be Object that contain many member value

The helper functions are used in core and many plugins, use them will benefit for better optimization (size, compatibility, etc.)