Skip to content

Commit de32fdc

Browse files
committed
reduce fallbacks when nodes are separated by comments
1 parent 26e97a9 commit de32fdc

8 files changed

Lines changed: 91 additions & 3 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
### Unreleased (patch)
44

5-
- Reduce redundant fallbacks
5+
- Reduce redundant fallbacks for both `text-decoration` and `-webkit-text-decoration`
66

77
### 5.0.1
88

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
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"};
1+
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()){let e=i.next();for(;e&&"comment"===e.type;)e=e.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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,11 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
203203
}
204204

205205
if (decl.value.toLowerCase() === nonShortHandValue.toLowerCase()) {
206-
const next = decl.next();
206+
let next = decl.next();
207+
while (next && next.type === 'comment') {
208+
next = next.next();
209+
}
210+
207211
if (!next || next.type !== 'decl' || next.prop.toLowerCase() !== 'text-decoration') {
208212

209213
// "-webkit-text-decoration" is a shorthand and sets omitted constituent properties to their initial value.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,3 +207,23 @@
207207
-webkit-text-decoration: overline purple 4px;
208208
text-decoration: overline purple 4px;
209209
}
210+
211+
.fallback-without-comment {
212+
text-decoration: underline;
213+
-webkit-text-decoration: underline dotted;
214+
text-decoration: underline dotted;
215+
}
216+
217+
.fallback-with-comment-a {
218+
text-decoration: underline; /* 2 */
219+
-webkit-text-decoration: underline dotted;
220+
text-decoration: underline dotted;
221+
}
222+
223+
.fallback-with-comment-b {
224+
text-decoration: underline;
225+
-webkit-text-decoration: underline /* 2 */;
226+
text-decoration: underline /* 2 */;
227+
-webkit-text-decoration: underline dotted;
228+
text-decoration: underline dotted;
229+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,3 +172,21 @@
172172
-webkit-text-decoration: overline purple 4px;
173173
text-decoration: overline purple 4px;
174174
}
175+
176+
.fallback-without-comment {
177+
text-decoration: underline;
178+
-webkit-text-decoration: underline dotted;
179+
text-decoration: underline dotted;
180+
}
181+
182+
.fallback-with-comment-a {
183+
text-decoration: underline; /* 2 */
184+
-webkit-text-decoration: underline dotted;
185+
text-decoration: underline dotted;
186+
}
187+
188+
.fallback-with-comment-b {
189+
text-decoration: underline;
190+
-webkit-text-decoration: underline dotted;
191+
text-decoration: underline dotted;
192+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,18 @@
113113
text-decoration: overline solid purple;
114114
text-decoration: overline purple 4px;
115115
}
116+
117+
.fallback-without-comment {
118+
text-decoration: underline;
119+
text-decoration: underline dotted;
120+
}
121+
122+
.fallback-with-comment-a {
123+
text-decoration: underline; /* 2 */
124+
text-decoration: underline dotted;
125+
}
126+
127+
.fallback-with-comment-b {
128+
text-decoration: underline /* 2 */;
129+
text-decoration: underline dotted;
130+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,19 @@
165165
text-decoration: overline solid purple;
166166
text-decoration: overline purple 4px;
167167
}
168+
169+
.fallback-without-comment {
170+
text-decoration: underline;
171+
text-decoration: underline dotted;
172+
}
173+
174+
.fallback-with-comment-a {
175+
text-decoration: underline; /* 2 */
176+
text-decoration: underline dotted;
177+
}
178+
179+
.fallback-with-comment-b {
180+
text-decoration: underline;
181+
text-decoration: underline /* 2 */;
182+
text-decoration: underline dotted;
183+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,18 @@
149149
text-decoration: overline solid purple;
150150
text-decoration: overline purple 4px;
151151
}
152+
153+
.fallback-without-comment {
154+
text-decoration: underline;
155+
text-decoration: underline dotted;
156+
}
157+
158+
.fallback-with-comment-a {
159+
text-decoration: underline; /* 2 */
160+
text-decoration: underline dotted;
161+
}
162+
163+
.fallback-with-comment-b {
164+
text-decoration: underline;
165+
text-decoration: underline dotted;
166+
}

0 commit comments

Comments
 (0)