postcss-text-decoration-shorthand: reduce redundant fallbacks

Author: romainmenke

plugins/postcss-text-decoration-shorthand/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Text Decoration Shorthand
 
+### Unreleased (patch)
+
+- Reduce redundant fallbacks
+
 ### 5.0.1
 
 _January 25, 2026_

plugins/postcss-text-decoration-shorthand/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-value-parser";import{namedColors as o}from"@csstools/color-helpers";const t=/^text-decoration$/i,creator=o=>{const c=Object.assign({preserve:!0},o);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const o=new Map;return{postcssPlugin:"postcss-text-decoration-shorthand",OnceExit(){o.clear()},Declaration(i){if(!t.test(i.prop))return;const a=i.parent;if(!a)return;const u=a.index(i);if(a.nodes.some(e=>"decl"===e.type&&t.test(e.prop)&&o.get(i.value)===e.value&&a.index(e)!==u))return;const d=e(i.value),p=d.nodes.filter(e=>"space"!==e.type&&"comment"!==e.type);if(p.find(e=>"var"===e.value.toLowerCase()&&"function"===e.type))return;if(p.find(e=>"word"===e.type&&r.includes(e.value)))return;const f={line:[],style:null,color:null,thickness:null};for(let o=0;o<p.length;o++){const t=p[o];if(!f.line.length&&"word"===t.type&&n.includes(t.value.toLowerCase())){const e=t;let r=t;for(;;){const e=p[o+1];if(!e||"word"!==e.type||!n.includes(e.value.toLowerCase()))break;r=e,o++}f.line=d.nodes.slice(d.nodes.indexOf(e),d.nodes.indexOf(r)+1);continue}if(f.line.length||"word"!==t.type||"none"!==t.value.toLowerCase())if(f.style||"word"!==t.type||!s.includes(t.value.toLowerCase()))if(f.thickness||"word"!==t.type||!l.includes(t.value.toLowerCase()))if(f.thickness||"function"!==t.type||"calc"!==t.value.toLowerCase()){if(f.color||!nodeIsAColor(t)){if("word"===t.type){let o;try{o=e.unit(t.value)}catch{return}if(!o||!o.unit)return;f.thickness=t,"%"===o.unit&&(f.thickness={...genericNodeParts(),type:"function",value:"calc",nodes:[{...genericNodeParts(),type:"word",value:"0.01em"},{...genericNodeParts(),type:"space",value:" "},{...genericNodeParts(),type:"word",value:"*"},{...genericNodeParts(),type:"space",value:" "},{...genericNodeParts(),type:"word",value:o.number}]});continue}return}f.color=t}else f.thickness=t;else f.thickness=t;else f.style=t;else f.line.push(t)}f.line.length||f.line.push({before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"none"}),f.style||(f.style={before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"solid"}),f.color||(f.color={before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"currentColor"});const v=e.stringify(f.line);if(i.value.toLowerCase()===v.toLowerCase()){const e=i.next();return void(e&&"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()||i.cloneBefore({prop:"-webkit-text-decoration",value:v}))}i.cloneBefore({prop:"text-decoration",value:v});const y=e.stringify([...f.line,{before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"space",value:" "},f.style,{before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"space",value:" "},f.color]);f.thickness&&i.cloneBefore({prop:"text-decoration",value:y}),f.thickness&&i.cloneBefore({prop:"text-decoration-thickness",value:e.stringify([f.thickness])}),o.set(i.value,v),o.set(y,v),c.preserve||i.remove()}}}}};function nodeIsAColor(e){return!("word"!==e.type||!e.value.startsWith("#"))||(!("word"!==e.type||!i.includes(e.value.toLowerCase()))||!("function"!==e.type||!c.includes(e.value.toLowerCase())))}creator.postcss=!0;const r=["unset","inherit","initial","revert","revert-layer"],n=["underline","overline","line-through","blink","spelling-error","grammar-error"],s=["solid","double","dotted","dashed","wavy"],l=["auto","from-font"],c=["color","color-mix","hsl","hsla","hwb","lab","lch","oklab","oklch","rgb","rgba"],i=["currentcolor","transparent",...Object.keys(o)];function genericNodeParts(){return{before:"",after:"",sourceIndex:0,sourceEndIndex:0}}export{creator as default,creator as"module.exports"};
+import e from"postcss-value-parser";import{namedColors as t}from"@csstools/color-helpers";const o=/^text-decoration$/i,creator=t=>{const c=Object.assign({preserve:!0},t);return{postcssPlugin:"postcss-text-decoration-shorthand",prepare(){const t=new Map;return{postcssPlugin:"postcss-text-decoration-shorthand",OnceExit(){t.clear()},Declaration(i){if(!o.test(i.prop))return;const a=i.parent;if(!a)return;const u=a.index(i),d=a.nodes.filter(e=>"decl"===e.type&&o.test(e.prop)&&a.index(e)!==u);if(d.some(e=>t.get(i.value)===e.value))return;const p=e(i.value),f=p.nodes.filter(e=>"space"!==e.type&&"comment"!==e.type);if(f.find(e=>"var"===e.value.toLowerCase()&&"function"===e.type))return;if(f.find(e=>"word"===e.type&&r.includes(e.value)))return;const v={line:[],style:null,color:null,thickness:null};for(let t=0;t<f.length;t++){const o=f[t];if(!v.line.length&&"word"===o.type&&n.includes(o.value.toLowerCase())){const e=o;let r=o;for(;;){const e=f[t+1];if(!e||"word"!==e.type||!n.includes(e.value.toLowerCase()))break;r=e,t++}v.line=p.nodes.slice(p.nodes.indexOf(e),p.nodes.indexOf(r)+1);continue}if(v.line.length||"word"!==o.type||"none"!==o.value.toLowerCase())if(v.style||"word"!==o.type||!s.includes(o.value.toLowerCase()))if(v.thickness||"word"!==o.type||!l.includes(o.value.toLowerCase()))if(v.thickness||"function"!==o.type||"calc"!==o.value.toLowerCase()){if(v.color||!nodeIsAColor(o)){if("word"===o.type){let t;try{t=e.unit(o.value)}catch{return}if(!t||!t.unit)return;v.thickness=o,"%"===t.unit&&(v.thickness={...genericNodeParts(),type:"function",value:"calc",nodes:[{...genericNodeParts(),type:"word",value:"0.01em"},{...genericNodeParts(),type:"space",value:" "},{...genericNodeParts(),type:"word",value:"*"},{...genericNodeParts(),type:"space",value:" "},{...genericNodeParts(),type:"word",value:t.number}]});continue}return}v.color=o}else v.thickness=o;else v.thickness=o;else v.style=o;else v.line.push(o)}v.line.length||v.line.push({before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"none"}),v.style||(v.style={before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"solid"}),v.color||(v.color={before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"word",value:"currentColor"});const y=e.stringify(v.line);if(t.set(i.value,y),d.some(e=>t.get(i.value)===e.value))return;if(i.value.toLowerCase()===y.toLowerCase()){const e=i.next();return void(e&&"decl"===e.type&&"text-decoration"===e.prop.toLowerCase()||i.cloneBefore({prop:"-webkit-text-decoration",value:y}))}i.cloneBefore({prop:"text-decoration",value:y});const h=e.stringify([...v.line,{before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"space",value:" "},v.style,{before:"",after:"",sourceIndex:0,sourceEndIndex:0,type:"space",value:" "},v.color]);v.thickness&&i.cloneBefore({prop:"text-decoration",value:h}),v.thickness&&i.cloneBefore({prop:"text-decoration-thickness",value:e.stringify([v.thickness])}),t.set(h,y),c.preserve||i.remove()}}}}};function nodeIsAColor(e){return!("word"!==e.type||!e.value.startsWith("#"))||(!("word"!==e.type||!i.includes(e.value.toLowerCase()))||!("function"!==e.type||!c.includes(e.value.toLowerCase())))}creator.postcss=!0;const r=["unset","inherit","initial","revert","revert-layer"],n=["underline","overline","line-through","blink","spelling-error","grammar-error"],s=["solid","double","dotted","dashed","wavy"],l=["auto","from-font"],c=["color","color-mix","hsl","hsla","hwb","lab","lch","oklab","oklch","rgb","rgba"],i=["currentcolor","transparent",...Object.keys(t)];function genericNodeParts(){return{before:"",after:"",sourceIndex:0,sourceEndIndex:0}}export{creator as default,creator as"module.exports"};

plugins/postcss-text-decoration-shorthand/src/index.ts

@@ -1,4 +1,4 @@
-import type { Plugin, PluginCreator } from 'postcss';
+import type { Declaration, Plugin, PluginCreator } from 'postcss';
 import valueParser from 'postcss-value-parser';
 import { namedColors } from '@csstools/color-helpers';
 
@@ -41,13 +41,16 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 					}
 
 					const ownIndex = parent.index(decl);
-					const hasFallbacksOrOverrides = parent.nodes.some((node) => {
+
+					const siblingTextDecorationProperties = parent.nodes.filter((node) => {
 						return node.type === 'decl' &&
 							IS_TEXT_DECORATION_REGEX.test(node.prop) &&
-							convertedValues.get(decl.value) === node.value &&
 							parent.index(node) !== ownIndex;
-					});
-					if (hasFallbacksOrOverrides) {
+					}) as Array<Declaration>;
+
+					if (siblingTextDecorationProperties.some((node) => {
+						return convertedValues.get(decl.value) === node.value
+					})) {
 						return;
 					}
 
@@ -191,6 +194,14 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 					}
 
 					const nonShortHandValue = valueParser.stringify(data.line);
+					convertedValues.set(decl.value, nonShortHandValue);
+
+					if (siblingTextDecorationProperties.some((node) => {
+						return convertedValues.get(decl.value) === node.value
+					})) {
+						return;
+					}
+
 					if (decl.value.toLowerCase() === nonShortHandValue.toLowerCase()) {
 						const next = decl.next();
 						if (!next || next.type !== 'decl' || next.prop.toLowerCase() !== 'text-decoration') {
@@ -243,7 +254,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 						});
 					}
 
-					convertedValues.set(decl.value, nonShortHandValue);
 					convertedValues.set(shortHandValue, nonShortHandValue);
 
 					if (!options.preserve) {

plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.expect.css

@@ -185,3 +185,25 @@
 	-webkit-text-decoration: underline red overline;
 	        text-decoration: underline red overline;
 }
+
+.manual-fallback-a {
+	text-decoration: underline;
+	-webkit-text-decoration: underline dotted;
+	        text-decoration: underline dotted;
+}
+
+.manual-fallback-b {
+	text-decoration: overline;
+	-webkit-text-decoration: overline solid purple;
+	        text-decoration: overline solid purple;
+	-webkit-text-decoration: overline purple 4px;
+	        text-decoration: overline purple 4px;
+}
+
+.manual-fallback-c {
+	text-decoration: overline;
+	-webkit-text-decoration: overline solid purple;
+	        text-decoration: overline solid purple;
+	-webkit-text-decoration: overline purple 4px;
+	        text-decoration: overline purple 4px;
+}

plugins/postcss-text-decoration-shorthand/test/basic.autoprefixer.preserve-false.expect.css

@@ -152,3 +152,23 @@
 	-webkit-text-decoration: underline red overline;
 	        text-decoration: underline red overline;
 }
+
+.manual-fallback-a {
+	text-decoration: underline;
+	-webkit-text-decoration: underline dotted;
+	        text-decoration: underline dotted;
+}
+
+.manual-fallback-b {
+	text-decoration: overline;
+	-webkit-text-decoration: overline purple 4px;
+	        text-decoration: overline purple 4px;
+}
+
+.manual-fallback-c {
+	text-decoration: overline;
+	-webkit-text-decoration: overline solid purple;
+	        text-decoration: overline solid purple;
+	-webkit-text-decoration: overline purple 4px;
+	        text-decoration: overline purple 4px;
+}

plugins/postcss-text-decoration-shorthand/test/basic.css

@@ -97,3 +97,19 @@
 .ignored--d {
 	text-decoration: underline red overline;
 }
+
+.manual-fallback-a {
+	text-decoration: underline;
+	text-decoration: underline dotted;
+}
+
+.manual-fallback-b {
+	text-decoration: overline solid purple;
+	text-decoration: overline purple 4px;
+}
+
+.manual-fallback-c {
+	text-decoration: overline;
+	text-decoration: overline solid purple;
+	text-decoration: overline purple 4px;
+}

plugins/postcss-text-decoration-shorthand/test/basic.expect.css

@@ -148,3 +148,20 @@
 .ignored--d {
 	text-decoration: underline red overline;
 }
+
+.manual-fallback-a {
+	text-decoration: underline;
+	text-decoration: underline dotted;
+}
+
+.manual-fallback-b {
+	text-decoration: overline;
+	text-decoration: overline solid purple;
+	text-decoration: overline purple 4px;
+}
+
+.manual-fallback-c {
+	text-decoration: overline;
+	text-decoration: overline solid purple;
+	text-decoration: overline purple 4px;
+}

plugins/postcss-text-decoration-shorthand/test/basic.preserve-false.expect.css

@@ -133,3 +133,19 @@
 .ignored--d {
 	text-decoration: underline red overline;
 }
+
+.manual-fallback-a {
+	text-decoration: underline;
+	text-decoration: underline dotted;
+}
+
+.manual-fallback-b {
+	text-decoration: overline;
+	text-decoration: overline purple 4px;
+}
+
+.manual-fallback-c {
+	text-decoration: overline;
+	text-decoration: overline solid purple;
+	text-decoration: overline purple 4px;
+}