fix typo

Author: romainmenke

plugins/postcss-syntax-descriptor-syntax-production/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Syntax Descriptor Syntax Production
 
+### Unreleased (patch)
+
+- Fix typo
+
 ### 1.0.0
 
 _December 27, 2025_

plugins/postcss-syntax-descriptor-syntax-production/README.md

@@ -20,7 +20,7 @@ npm install @csstools/postcss-syntax-descriptor-syntax-production --save-dev
 @property --color {
 	inherits: true;
 	initial-value: black;
-	color: "<color>";
+	syntax: "<color>";
 }
 ```
 
@@ -77,7 +77,7 @@ postcssSyntaxDescriptorSyntaxProduction({ preserve: true })
 @property --color {
 	inherits: true;
 	initial-value: black;
-	color: "<color>";
+	syntax: "<color>";
 	syntax: <color>;
 }
 ```

plugins/postcss-syntax-descriptor-syntax-production/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("@csstools/css-tokenizer");const s=/^property$/i,c=/^syntax$/i,creator=a=>{const t=Object.assign({preserve:!1},a);return{postcssPlugin:"postcss-syntax-descriptor-syntax-production",Declaration(a){if(!c.test(a.prop))return;if(!a.parent||"atrule"!==a.parent.type)return;if(!s.test(a.parent.name))return;const o=a.value,r=e.tokenize({css:a.value});let n="";r.forEach(s=>{e.isTokenComment(s)||(e.isTokenWhitespace(s)?n+=" ":n+=s[1])});let i='"';for(const e of n){const s=e.codePointAt(0);if(void 0!==s)switch(s){case 0:i+=String.fromCodePoint(65533);break;case 34:case 92:i+="\\"+String.fromCodePoint(s);break;case 1:case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 10:case 11:case 12:case 13:case 14:case 15:case 16:case 17:case 18:case 19:case 20:case 21:case 22:case 23:case 24:case 25:case 26:case 27:case 28:case 29:case 30:case 31:case 127:i+="\\"+s.toString(16)+" ";break;default:i+=String.fromCodePoint(s)}}i+='"',o!==i&&(a.cloneBefore({prop:"color",value:i}),t.preserve||a.remove())}}};creator.postcss=!0,module.exports=creator;
+"use strict";var e=require("@csstools/css-tokenizer");const s=/^property$/i,t=/^syntax$/i,creator=c=>{const a=Object.assign({preserve:!1},c);return{postcssPlugin:"postcss-syntax-descriptor-syntax-production",Declaration(c){if(!t.test(c.prop))return;if(!c.parent||"atrule"!==c.parent.type)return;if(!s.test(c.parent.name))return;const r=c.prev();if(r&&"decl"===r.type&&t.test(r.prop))return;const o=c.value,n=e.tokenize({css:c.value}),i=n.filter(s=>!(e.isTokenWhiteSpaceOrComment(s)||e.isTokenEOF(s)));if(1===i.length&&e.isTokenString(i[0]))return;let p="";n.forEach(s=>{e.isTokenComment(s)||(e.isTokenWhitespace(s)?p+=" ":p+=s[1])});let u='"';for(const e of p){const s=e.codePointAt(0);if(void 0!==s)switch(s){case 0:u+=String.fromCodePoint(65533);break;case 34:case 92:u+="\\"+String.fromCodePoint(s);break;case 1:case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 10:case 11:case 12:case 13:case 14:case 15:case 16:case 17:case 18:case 19:case 20:case 21:case 22:case 23:case 24:case 25:case 26:case 27:case 28:case 29:case 30:case 31:case 127:u+="\\"+s.toString(16)+" ";break;default:u+=String.fromCodePoint(s)}}u+='"',o!==u&&(c.cloneBefore({value:u}),a.preserve||c.remove())}}};creator.postcss=!0,module.exports=creator;

plugins/postcss-syntax-descriptor-syntax-production/dist/index.mjs

@@ -1 +1 @@
-import{tokenize as e,isTokenComment as s,isTokenWhitespace as a}from"@csstools/css-tokenizer";const c=/^property$/i,t=/^syntax$/i,creator=r=>{const o=Object.assign({preserve:!1},r);return{postcssPlugin:"postcss-syntax-descriptor-syntax-production",Declaration(r){if(!t.test(r.prop))return;if(!r.parent||"atrule"!==r.parent.type)return;if(!c.test(r.parent.name))return;const n=r.value,i=e({css:r.value});let p="";i.forEach(e=>{s(e)||(a(e)?p+=" ":p+=e[1])});let f='"';for(const e of p){const s=e.codePointAt(0);if(void 0!==s)switch(s){case 0:f+=String.fromCodePoint(65533);break;case 34:case 92:f+="\\"+String.fromCodePoint(s);break;case 1:case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 10:case 11:case 12:case 13:case 14:case 15:case 16:case 17:case 18:case 19:case 20:case 21:case 22:case 23:case 24:case 25:case 26:case 27:case 28:case 29:case 30:case 31:case 127:f+="\\"+s.toString(16)+" ";break;default:f+=String.fromCodePoint(s)}}f+='"',n!==f&&(r.cloneBefore({prop:"color",value:f}),o.preserve||r.remove())}}};creator.postcss=!0;export{creator as default};
+import{tokenize as e,isTokenWhiteSpaceOrComment as s,isTokenEOF as a,isTokenString as c,isTokenComment as t,isTokenWhitespace as r}from"@csstools/css-tokenizer";const o=/^property$/i,n=/^syntax$/i,creator=i=>{const p=Object.assign({preserve:!1},i);return{postcssPlugin:"postcss-syntax-descriptor-syntax-production",Declaration(i){if(!n.test(i.prop))return;if(!i.parent||"atrule"!==i.parent.type)return;if(!o.test(i.parent.name))return;const f=i.prev();if(f&&"decl"===f.type&&n.test(f.prop))return;const l=i.value,u=e({css:i.value}),d=u.filter(e=>!(s(e)||a(e)));if(1===d.length&&c(d[0]))return;let v="";u.forEach(e=>{t(e)||(r(e)?v+=" ":v+=e[1])});let g='"';for(const e of v){const s=e.codePointAt(0);if(void 0!==s)switch(s){case 0:g+=String.fromCodePoint(65533);break;case 34:case 92:g+="\\"+String.fromCodePoint(s);break;case 1:case 2:case 3:case 4:case 5:case 6:case 7:case 8:case 9:case 10:case 11:case 12:case 13:case 14:case 15:case 16:case 17:case 18:case 19:case 20:case 21:case 22:case 23:case 24:case 25:case 26:case 27:case 28:case 29:case 30:case 31:case 127:g+="\\"+s.toString(16)+" ";break;default:g+=String.fromCodePoint(s)}}g+='"',l!==g&&(i.cloneBefore({value:g}),p.preserve||i.remove())}}};creator.postcss=!0;export{creator as default};

plugins/postcss-syntax-descriptor-syntax-production/src/index.ts

@@ -1,4 +1,4 @@
-import { isTokenComment, isTokenWhitespace, tokenize } from '@csstools/css-tokenizer';
+import { isTokenComment, isTokenEOF, isTokenString, isTokenWhitespace, isTokenWhiteSpaceOrComment, tokenize } from '@csstools/css-tokenizer';
 import type { PluginCreator } from 'postcss';
 
 /** postcss-syntax-descriptor-syntax-production plugin options */
@@ -35,9 +35,22 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				return;
 			}
 
+			const prev = decl.prev();
+			if (prev && prev.type === 'decl' && IS_SYNTAX_REGEX.test(prev.prop)) {
+				return;
+			}
+
 			const originalValue = decl.value;
 			const tokens = tokenize({ css: decl.value });
 
+			const meaningfulTokens = tokens.filter((x) => {
+				return !(isTokenWhiteSpaceOrComment(x) || isTokenEOF(x));
+			});
+
+			if (meaningfulTokens.length === 1 && isTokenString(meaningfulTokens[0])) {
+				return;
+			}
+
 			let stringValue = '';
 			tokens.forEach((token) => {
 				if (isTokenComment(token)) return;
@@ -114,7 +127,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			}
 
 			decl.cloneBefore({
-				prop: 'color',
 				value: serialized,
 			});
 

plugins/postcss-syntax-descriptor-syntax-production/test/basic.css

@@ -35,3 +35,10 @@
 	initial-value: black;
 	syntax: <color> /* a comment */ | </* a comment */string> | <number>;
 }
+
+@property --color {
+	inherits: true;
+	initial-value: black;
+	syntax: "<color-fallback>";
+	syntax: <color>;
+}

plugins/postcss-syntax-descriptor-syntax-production/test/basic.expect.css

@@ -1,35 +1,42 @@
 @property --color {
 	inherits: true;
 	initial-value: black;
-	color: "<color>";
+	syntax: "<color>";
 }
 
 @property --multi-line {
 	inherits: true;
 	initial-value: black;
-	color: "<color> | <string> | <number>";
+	syntax: "<color> | <string> | <number>";
 }
 
 @property --box-shadow {
 	inherits: true;
 	initial-value: black;
-	color: "[ inset? && <length>{2,4} && <color>? ]# | none";
+	syntax: "[ inset? && <length>{2,4} && <color>? ]# | none";
 }
 
 @property --quoted {
 	inherits: true;
 	initial-value: black;
-	color: "'\"' <ident> '\"'";
+	syntax: "'\"' <ident> '\"'";
 }
 
 @property --function {
 	inherits: true;
 	initial-value: black;
-	color: "example(first?, second?, third?)";
+	syntax: "example(first?, second?, third?)";
 }
 
 @property --comments {
 	inherits: true;
 	initial-value: black;
-	color: "<color> | <string> | <number>";
+	syntax: "<color> | <string> | <number>";
+}
+
+@property --color {
+	inherits: true;
+	initial-value: black;
+	syntax: "<color-fallback>";
+	syntax: <color>;
 }

plugins/postcss-syntax-descriptor-syntax-production/test/basic.preserve-true.expect.css

@@ -1,14 +1,14 @@
 @property --color {
 	inherits: true;
 	initial-value: black;
-	color: "<color>";
+	syntax: "<color>";
 	syntax: <color>;
 }
 
 @property --multi-line {
 	inherits: true;
 	initial-value: black;
-	color: "<color> | <string> | <number>";
+	syntax: "<color> | <string> | <number>";
 	syntax: <color> |
 		<string> |
 		<number>;
@@ -17,27 +17,34 @@
 @property --box-shadow {
 	inherits: true;
 	initial-value: black;
-	color: "[ inset? && <length>{2,4} && <color>? ]# | none";
+	syntax: "[ inset? && <length>{2,4} && <color>? ]# | none";
 	syntax: [ inset? && <length>{2,4} && <color>? ]# | none;
 }
 
 @property --quoted {
 	inherits: true;
 	initial-value: black;
-	color: "'\"' <ident> '\"'";
+	syntax: "'\"' <ident> '\"'";
 	syntax: '"' <ident> '"';
 }
 
 @property --function {
 	inherits: true;
 	initial-value: black;
-	color: "example(first?, second?, third?)";
+	syntax: "example(first?, second?, third?)";
 	syntax: example(first?, second?, third?);
 }
 
 @property --comments {
 	inherits: true;
 	initial-value: black;
-	color: "<color> | <string> | <number>";
+	syntax: "<color> | <string> | <number>";
 	syntax: <color> /* a comment */ | </* a comment */string> | <number>;
 }
+
+@property --color {
+	inherits: true;
+	initial-value: black;
+	syntax: "<color-fallback>";
+	syntax: <color>;
+}

plugins/postcss-syntax-descriptor-syntax-production/test/examples/example.expect.css

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

plugins/postcss-syntax-descriptor-syntax-production/test/examples/example.preserve-true.expect.css

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