also looking at this
chore(deps): update actions/checkout action to v7
#34
11 files
+74
-15
Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.
| @@ -2267,6 +2267,14 @@ function extractCodeStringCandidates(content: string, bracketConfig?: BracketSyn | ||
| 2267 | 2267 | // payloads as code strings creates phantom utility classes and can make |
| 2268 | 2268 | // a classless fragment emit an entire preflight stylesheet. |
| 2269 | 2269 | if (markupAttribute) { |
| 2270 | // The one thing a prop value is allowed to name is an icon. A | |
| 2271 | // component takes its glyph as an attribute (`<EmptyState icon="i-...">`), | |
| 2272 | // and a rule that exists nowhere else on the page was never generated: | |
| 2273 | // the icon rendered as an empty box. An icon token cannot be a CSRF | |
| 2274 | // token, URL or v-html payload, and the generator only emits it when the | |
| 2275 | // icon exists, so reading it creates no phantom rule. | |
| 2276 | for (const token of literal.match(ICON_TOKEN) ?? []) | |
| 2277 | tokens.add(token) | |
| 2270 | 2278 | i = j |
| 2271 | 2279 | continue |
| 2272 | 2280 | } |
| @@ -2337,6 +2345,12 @@ function regexLiteralEnd(content: string, start: number): number { | ||
| 2337 | 2345 | return -1 |
| 2338 | 2346 | } |
| 2339 | 2347 | |
| 2348 | /** | |
| 2349 | * `i-<collection>-<name>`, however it is spelled inside a markup attribute: | |
| 2350 | * bare (`icon="i-lucide-x"`) or quoted inside a binding (`:icon="'i-lucide-x'"`). | |
| 2351 | */ | |
| 2352 | const ICON_TOKEN = /(?<![\w-])i-[a-z0-9]+(?:-[a-z0-9]+)+(?![\w-])/gi | |
| 2353 | ||
| 2340 | 2354 | function isMarkupAttributeString(content: string, quoteIndex: number): boolean { |
| 2341 | 2355 | const tagStart = content.lastIndexOf('<', quoteIndex) |
| 2342 | 2356 | const tagEnd = content.lastIndexOf('>', quoteIndex) |
| @@ -246,3 +246,34 @@ describe('code-string extraction past comments and regexes', () => { | ||
| 246 | 246 | expect(classes.has('gap-3')).toBe(true) |
| 247 | 247 | }) |
| 248 | 248 | }) |
| 249 | ||
| 250 | describe('icons named by a component prop', () => { | |
| 251 | it('takes an icon class out of any attribute, not only class', () => { | |
| 252 | const classes = extractClasses(`<MoreMenu icon="i-hugeicons-settings-02"><EmptyState icon="i-hugeicons-note-01" text="Nothing"/></MoreMenu>`) | |
| 253 | ||
| 254 | expect(classes.has('i-hugeicons-settings-02')).toBe(true) | |
| 255 | expect(classes.has('i-hugeicons-note-01')).toBe(true) | |
| 256 | }) | |
| 257 | ||
| 258 | it('takes one quoted inside a binding', () => { | |
| 259 | const classes = extractClasses(`<Row :icon="done ? 'i-hugeicons-tick-02' : 'i-hugeicons-circle'" />`) | |
| 260 | ||
| 261 | expect(classes.has('i-hugeicons-tick-02')).toBe(true) | |
| 262 | expect(classes.has('i-hugeicons-circle')).toBe(true) | |
| 263 | }) | |
| 264 | ||
| 265 | it('still ignores every other attribute value', () => { | |
| 266 | const classes = extractClasses(`<a href="/p/ab-cd-ef" data-token="abc-123-xyz" title="bg-red-500 shadow-lg">x</a>`) | |
| 267 | ||
| 268 | expect(classes.has('ab-cd-ef')).toBe(false) | |
| 269 | expect(classes.has('abc-123-xyz')).toBe(false) | |
| 270 | expect(classes.has('bg-red-500')).toBe(false) | |
| 271 | }) | |
| 272 | ||
| 273 | it('does not take a word that merely contains i-', () => { | |
| 274 | const classes = extractClasses(`<a title="semi-colon wi-fi pi-day">x</a>`) | |
| 275 | ||
| 276 | expect(classes.has('i-colon')).toBe(false) | |
| 277 | expect(classes.has('fi')).toBe(false) | |
| 278 | }) | |
| 279 | }) | |