design tokens

.github/bin/generate-docs/readme.mjs

@@ -28,10 +28,14 @@ installDoc = installDoc.replace(`<!-- Available Variables: -->
 // Insert "Header" section
 installDoc = installDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/<cssdbId>.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]`);
+` + `[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url] ` +
+`${
+	packageJSONInfo.csstools?.cssdbId ?
+	`[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/<cssdbId>.svg" height="20">][css-url] ` :
+	''
+}` +
+`[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] ` +
+`[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]`);
 
 // Insert "Usage" section
 installDoc = installDoc.replace('<usage>', `## Usage
@@ -62,7 +66,11 @@ instructions for:
 
 // Insert "Link List" section
 installDoc = installDoc.replace('<link-list>', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
-[css-url]: https://cssdb.org/#<cssdbId>
+${
+	packageJSONInfo.csstools?.cssdbId ?
+		`[css-url]: https://cssdb.org/#<cssdbId>` :
+		''
+}
 [discord]: https://discord.gg/bUadyRwkJS
 [npm-url]: https://www.npmjs.com/package/<packageName>
 

plugins/postcss-base-plugin/README.md

@@ -1,11 +1,8 @@
 # PostCSS Base Plugin [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-base-plugin.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-base-plugin.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
-[PostCSS Base Plugin] lets easily create new plugins following some [CSS Specification].
+[PostCSS Base Plugin] lets you easily create new plugins following some [CSS Specification].
 
 ```pcss
 .foo {

plugins/postcss-base-plugin/docs/README.md

@@ -14,7 +14,7 @@
 
 <header>
 
-[<humanReadableName>] lets easily create new plugins following some [CSS Specification].
+[<humanReadableName>] lets you easily create new plugins following some [CSS Specification].
 
 ```pcss
 <example.css>

plugins/postcss-cascade-layers/README.md

@@ -1,9 +1,6 @@
 # PostCSS Cascade Layers [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-cascade-layers.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/cascade-layers.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-cascade-layers.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/cascade-layers.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
 [PostCSS Cascade Layers] lets you use `@layer` following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.
 

plugins/postcss-color-function/README.md

@@ -1,9 +1,6 @@
 # PostCSS Color Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-function.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-function.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
-[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-function.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-function.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
 [PostCSS Color Function] lets you use the `color` function in
 CSS, following the [CSS Color] specification.

plugins/postcss-design-tokens/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+dist/*

plugins/postcss-design-tokens/.nvmrc

@@ -0,0 +1 @@
+v16.13.1

plugins/postcss-design-tokens/.tape.mjs

@@ -0,0 +1,104 @@
+import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
+import plugin from '@csstools/postcss-design-tokens';
+import postcssImport from 'postcss-import';
+
+postcssTape(plugin)({
+	basic: {
+		message: "supports basic usage",
+		plugins: [
+			postcssImport(),
+			plugin()
+		]
+	},
+	'basic:rootFontSize-20': {
+		message: "supports basic usage with { unitsAndValues { rootFontSize: 20 } }",
+		plugins: [
+			postcssImport(),
+			plugin({
+				unitsAndValues: {
+					rootFontSize: 20
+				}
+			})
+		]
+	},
+	'basic:rootFontSize-NaN': {
+		message: "supports basic usage with { unitsAndValues { rootFontSize: NaN } }",
+		plugins: [
+			postcssImport(),
+			plugin({
+				unitsAndValues: {
+					rootFontSize: NaN
+				}
+			})
+		]
+	},
+	'basic:rootFontSize-invalid': {
+		message: "supports basic usage with { unitsAndValues { rootFontSize: invalid } }",
+		plugins: [
+			postcssImport(),
+			plugin({
+				unitsAndValues: {
+					rootFontSize: 'invalid'
+				}
+			})
+		]
+	},
+	'errors': {
+		message: "handles issues correctly",
+		options: {},
+		warnings: 4
+	},
+	'is': {
+		message: "supports basic usage with { is ['dark', 'tablet', 'branded-green'] }",
+		options: {
+			is: ['dark', 'tablet', 'branded-green']
+		}
+	},
+	'value-parsing-a': {
+		message: "supports value parsing (A)",
+	},
+	'value-parsing-b': {
+		message: "supports value parsing (B)",
+	},
+	'value-parsing-c': {
+		message: "supports value parsing (C)",
+		warnings: 2
+	},
+	'value-parsing-d': {
+		message: "supports value parsing (D)",
+		warnings: 2
+	},
+	'value-parsing-e': {
+		message: "supports value parsing (E)",
+		warnings: 2
+	},
+	'value-parsing-f': {
+		message: "supports value parsing (F)",
+	},
+	'value-parsing-g': {
+		message: "supports value parsing (G)",
+		warnings: 2
+	},
+	'examples/example': {
+		message: 'minimal example',
+		options: {},
+	},
+	'examples/example-conditional': {
+		message: 'minimal example with conditional imports : default',
+		options: {},
+	},
+	'examples/example-conditional:dark': {
+		message: 'minimal example with conditional imports : dark',
+		options: {
+			is: ['dark']
+		},
+	},
+	'examples/example:rootFontSize-20': {
+		message: "minimal example with { unitsAndValues { rootFontSize: 20 } }",
+		options: {
+			unitsAndValues: {
+				rootFontSize: 20
+			}
+		}
+	},
+});

plugins/postcss-design-tokens/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changes to PostCSS Design Tokens
+
+### 1.0.0 (Unreleased)
+
+- Initial version