diff --git a/content/blog/2025-07-05-how-to-naked-css.md b/content/blog/2025-07-05-how-to-naked-css.md index 06d091b..dbfbe2c 100644 --- a/content/blog/2025-07-05-how-to-naked-css.md +++ b/content/blog/2025-07-05-how-to-naked-css.md @@ -64,7 +64,7 @@ So this post shows you how to make your website look naked in just 7 lines of co 4. Bonus: hide inaccessible content - I'm hiding all elements that have `aria-hidden="true"` because they are only useful visually, not for assisitve technology. So that's why it makes sense for me to hide these elements just to check how I navigate the website without them. + I'm hiding all elements that have `aria-hidden="true"` because they are only useful visually, not for assistive technology. So that's why it makes sense for me to hide these elements just to check how I navigate the website without them. ```css [data-theme="naked"] { diff --git a/package-lock.json b/package-lock.json index 102d751..2d45e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@melt-ui/svelte": "^0.86.6", "@oddbird/popover-polyfill": "^0.6.1", "@projectwallace/css-analyzer": "^7.6.0", - "@projectwallace/css-code-coverage": "^0.5.0", + "@projectwallace/css-code-coverage": "^0.6.0", "@projectwallace/css-code-quality": "^3.0.2", "@projectwallace/css-design-tokens": "^0.6.0", "@projectwallace/css-layer-tree": "^2.0.0", @@ -1329,13 +1329,13 @@ ] }, "node_modules/@playwright/test": { - "version": "1.55.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0.tgz", - "integrity": "sha512-04IXzPwHrW69XusN/SIdDdKZBzMfOT9UNT/YiJit/xpy2VuAoB8NHc8Aplb96zsWDddLnbkPL3TsmrS04ZU2xQ==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz", + "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright": "1.55.0" + "playwright": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -1364,13 +1364,12 @@ } }, "node_modules/@projectwallace/css-code-coverage": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@projectwallace/css-code-coverage/-/css-code-coverage-0.5.0.tgz", - "integrity": "sha512-RFFrqOKieEzERNM7gyONOyHULnbe6LgeW73bwlfEJYfQMF/g4BcnOctFA3d3rGqIMC+sojJAPTwylmUempXgMA==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@projectwallace/css-code-coverage/-/css-code-coverage-0.6.0.tgz", + "integrity": "sha512-YRDj3cuo3eJmSCPm3clnuFQ3nEKMNntHfrCshNf6dLZeLBtFgbfFJqCx6SMO46FRTwijUWo2s0wA2yfCcJjy1Q==", "license": "EUPL-1.2", "dependencies": { "@projectwallace/format-css": "^2.1.1", - "css-tree": "^3.1.0", "valibot": "^1.1.0" }, "bin": { @@ -1755,9 +1754,9 @@ } }, "node_modules/@sveltejs/adapter-netlify": { - "version": "5.2.3", - "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-5.2.3.tgz", - "integrity": "sha512-xO9qsChQqfncgsrXgQb3phGTpKhlyPn7jusnl/HJwKJqzmEZ/xB/dAa0qFqrp+LNxEA+FPE7rJg36cmBaydXSg==", + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/@sveltejs/adapter-netlify/-/adapter-netlify-5.2.4.tgz", + "integrity": "sha512-UtPcZq1HUA43hM8uLi+nsm5Q+YjHNj7/SMFoyeLZeY/VTloVWABEZ0tJ5WodTUmy/8j5QJ7oLZjj28aQxi8y3g==", "dev": true, "license": "MIT", "dependencies": { @@ -2187,9 +2186,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "2.37.0", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.37.0.tgz", - "integrity": "sha512-xgKtpjQ6Ry4mdShd01ht5AODUsW7+K1iValPDq7QX8zI1hWOKREH9GjG8SRCN5tC4K7UXmMhuQam7gbLByVcnw==", + "version": "2.47.3", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.47.3.tgz", + "integrity": "sha512-zN2yzBc2dIES2BSzLhNP2weYhwB77kgM/oAktICZVmmljyEmPZrlUwr14jjdK9/eDu7WdAuf6gTdYIJLTcN3Fw==", "license": "MIT", "peer": true, "dependencies": { @@ -4057,13 +4056,13 @@ } }, "node_modules/playwright": { - "version": "1.55.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0.tgz", - "integrity": "sha512-sdCWStblvV1YU909Xqx0DhOjPZE4/5lJsIS84IfN9dAZfcl/CIZ5O8l3o0j7hPMjDvqoTF8ZUcc+i/GL5erstA==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz", + "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.55.0" + "playwright-core": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -4076,9 +4075,9 @@ } }, "node_modules/playwright-core": { - "version": "1.55.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0.tgz", - "integrity": "sha512-GvZs4vU3U5ro2nZpeiwyb0zuFaqb9sUiAJuyrWpcGouD8y9/HLgGbNRjIph7zU9D3hnPaisMl9zG9CgFi/biIg==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", "dev": true, "license": "Apache-2.0", "bin": { @@ -5136,13 +5135,13 @@ "license": "MIT" }, "node_modules/tinyglobby": { - "version": "0.2.14", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", - "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==", + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", "license": "MIT", "dependencies": { - "fdir": "^6.4.4", - "picomatch": "^4.0.2" + "fdir": "^6.5.0", + "picomatch": "^4.0.3" }, "engines": { "node": ">=12.0.0" @@ -5424,9 +5423,9 @@ } }, "node_modules/vite": { - "version": "7.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.4.tgz", - "integrity": "sha512-X5QFK4SGynAeeIt+A7ZWnApdUyHYm+pzv/8/A57LqSGcI88U6R6ipOs3uCesdc6yl7nl+zNO0t8LmqAdXcQihw==", + "version": "7.1.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz", + "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==", "license": "MIT", "peer": true, "dependencies": { @@ -5435,7 +5434,7 @@ "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", - "tinyglobby": "^0.2.14" + "tinyglobby": "^0.2.15" }, "bin": { "vite": "bin/vite.js" diff --git a/package.json b/package.json index 6b3fbf6..94f0ccf 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@melt-ui/svelte": "^0.86.6", "@oddbird/popover-polyfill": "^0.6.1", "@projectwallace/css-analyzer": "^7.6.0", - "@projectwallace/css-code-coverage": "^0.5.0", + "@projectwallace/css-code-coverage": "^0.6.0", "@projectwallace/css-code-quality": "^3.0.2", "@projectwallace/css-design-tokens": "^0.6.0", "@projectwallace/css-layer-tree": "^2.0.0", diff --git a/src/lib/components/Pre.svelte b/src/lib/components/Pre.svelte index d071e5f..6be16f6 100644 --- a/src/lib/components/Pre.svelte +++ b/src/lib/components/Pre.svelte @@ -184,19 +184,21 @@
{#if show_coverage} {@const uncovered_blocks_count = coverage_chunks.filter((c) => !c.is_covered).length} -
-

- {uncovered_blocks_count} un-covered {uncovered_blocks_count === 1 ? 'block' : 'blocks'} -

- - -
+ {#if uncovered_blocks_count > 0} +
+

+ {uncovered_blocks_count} un-covered {uncovered_blocks_count === 1 ? 'block' : 'blocks'} +

+ + +
+ {/if} {/if}
{ await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB') + await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('37.5 kB') await expect.soft(first_row.getByRole('cell').nth(2)).toHaveAccessibleName('2,619') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.28%') + await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('75.37%') // Elements in correct state: await expect.soft(table.getByRole('row').nth(1)).toHaveAttribute('aria-selected', 'true') @@ -96,8 +96,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/Textarea.D3Oc5lUl.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('238 B') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%') let css_content = await page.getByTestId('pre-css').textContent() expect.soft(css_content).toContain('textarea.svelte-g7hyhb {') @@ -108,8 +106,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.28%') }) test('sorting by total size', async ({ page }) => { @@ -122,8 +118,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/0.BBE7cspC.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('38 kB') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('72.28%') let css_content = await page.getByTestId('pre-css').textContent() expect.soft(css_content).toContain('.logo.svelte-1jiwtxp {') @@ -134,8 +128,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/FormattedDate.JHv9Zh3p.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('69 B') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%') css_content = await page.getByTestId('pre-css').textContent() expect.soft(css_content).toContain('time.svelte-60ldmz {') }) @@ -150,8 +142,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/23.lTvFD_l9.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('405 B') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('100%') let css_content = await page.getByTestId('pre-css').textContent() expect.soft(css_content).toContain('.form.svelte-148ca8f {') @@ -162,8 +152,6 @@ test.describe('loading example file', () => { await expect .soft(first_row.getByRole('cell').nth(0)) .toHaveAccessibleName('https://www.projectwallace.com/_app/immutable/assets/25.C4edrrKC.css') - await expect.soft(first_row.getByRole('cell').nth(1)).toHaveAccessibleName('780 B') - await expect.soft(first_row.getByRole('cell').nth(3)).toHaveAccessibleName('0%') css_content = await page.getByTestId('pre-css').textContent() expect.soft(css_content).toContain('.page.svelte-1b1m7j9 {') }) diff --git a/src/lib/components/coverage/Coverage.svelte b/src/lib/components/coverage/Coverage.svelte index 0a2e3f4..650b777 100644 --- a/src/lib/components/coverage/Coverage.svelte +++ b/src/lib/components/coverage/Coverage.svelte @@ -128,12 +128,12 @@
Used
-
{format_filesize(calculated.used_bytes)}
+
{format_filesize(calculated.covered_bytes)}
{format_number(calculated.covered_lines)} lines
Unused
-
{format_filesize(calculated.unused_bytes)}
+
{format_filesize(calculated.uncovered_bytes)}
{format_number(calculated.uncovered_lines)} lines