PostCSS Syntax Descriptor Syntax Production

npm install @csstools/postcss-syntax-descriptor-syntax-production --save-dev

PostCSS Syntax Descriptor Syntax Production lets you use the <syntax> production in syntax descriptors following the CSS Specification.

@property --color {
    inherits: true;
    initial-value: black;
    syntax: <color>;
}

/* becomes */

@property --color {
    inherits: true;
    initial-value: black;
    syntax: "<color>";
}

Usage

Add PostCSS Syntax Descriptor Syntax Production to your project:

npm install postcss @csstools/postcss-syntax-descriptor-syntax-production --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssSyntaxDescriptorSyntaxProduction = require('@csstools/postcss-syntax-descriptor-syntax-production');

postcss([
    postcssSyntaxDescriptorSyntaxProduction(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is not preserved.

postcssSyntaxDescriptorSyntaxProduction({ preserve: true })

@property --color {
    inherits: true;
    initial-value: black;
    syntax: <color>;
}

/* becomes */

@property --color {
    inherits: true;
    initial-value: black;
    syntax: "<color>";
    syntax: <color>;
}