Clear the modernization sequence's tidy-ups

[spaceninja]

Overview

Three unrelated leftovers from the #2391 modernization sequence, which would otherwise have vanished when that issue closed.

Button Swap's test name. It was called Swap UI state when clicked and never clicked — this package ships the component's markup but not the script that swaps it, so there is nothing to click. Rather than just renaming it, the test now also asserts the half the old name implied but never checked: that the swapped state is in the markup and is hidden. The aria snapshot already covered the other half, since hidden keeps that subtree out of the accessibility tree.

Root-level TypeScript and the type-aware lint rules.tsconfig.json covered only src, so root-level tooling files belonged to no project. #2421 worked around that with a hand-maintained allowDefaultProject list, which is the mechanism that let test-utils.ts sit unlinted from #2416 until #2421 deleted it. Of the two options in the issue, extending the config came out cleaner — there is nowhere sensible to relocate vitest.config.mts to that a project already covers, since the only covered directory is the one that ships. Root-level globs in include mean the next file is picked up without anyone remembering, and those files now get our actual strict settings instead of an inferred project's defaults. That last part is why twing/vite-plugin-twig.mjs gains four JSDoc annotations: adding vitest.config.mts pulls the plugin it imports into the program, where checkJs finally looks at it.

@use instead of @import.src/index-with-dependencies.scss held the last two @imports in the repo, and Dart Sass 3 removes the rule. See the note below on what this did to the compiled output — the change is not output-neutral, and it is worth a look before approving.

Screenshots

Testing

• Open the deploy preview. Fonts should look the same as on the production library — body text in Source Sans Pro, code samples in Source Code Pro. Italics and bold weights should render as real font files rather than browser-synthesized slants, which is what would break if a @font-face rule went missing.
• Visit a page with WordPress block markup, such as any Gutenberg story, and confirm the block library styles still apply.
• Spot-check a handful of component pages for unstyled or differently-styled content. All the non-font CSS is byte-identical, so anything visual here would be a surprise.

---

One thing to look at before approving

The @use swap is not output-neutral, so per the bail-out condition in #2431 here is exactly what changed.

Compiling the file directly, and in the real Storybook build, all non-@font-face CSS is byte-for-byte identical. The only difference is that seven @font-face rules used to be emitted twice and are now emitted once. The surviving seven are byte-for-byte the originals, in the original order — the built Storybook stylesheet goes from 14 blocks to 7 and shrinks by 1,245 bytes.

The cause is the load-once semantics the issue flagged, landing the favourable way round: ./index loads base/fonts as well, and an @import does not share the module graph with the file importing it, so the fonts were emitted a second time. @use loads each stylesheet once.

I read this as a pass rather than the bail-out, because nothing is dropped, reordered, or newly duplicated, and a browser handed the same @font-face set twice behaves identically to being handed it once. But it is a judgment call against the issue's wording, so if you would rather have byte-identical output, dropping this one file's changes leaves the other two items intact.

To reproduce:

import*assassfrom'sass';const{ css }=awaitsass.compileAsync('src/index-with-dependencies.scss',{loadPaths: ['node_modules'],});

Why this has a changeset

#2440 lists this issue as needing none, on the strength of the issue body saying the Sass file is excluded from the published files. It is not — files excludes src/index.scss but not src/index-with-dependencies.scss, and npm pack --dry-run confirms the file ships. So this changes published output and takes a patch.

Worth a separate issue: that file is documented as Storybook-only and hard-codes /src/assets/fonts, a root-absolute path that cannot mean anything to a consumer. It probably should not be in the tarball at all, which is the same "what is actually our public surface" question as #2078.

---

• FixesTidy-ups left over from the modernization sequence #2431

[changeset-bot]

🦋 Changeset detected

Latest commit: d651812

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	d651812
🔍 Latest deploy log	https://app.netlify.com/projects/cloudfour-patterns/deploys/6a8c77a69a198500090b0d2f
😎 Deploy Preview	https://deploy-preview-2444--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.