From a5ba36dad0feb06a03a93458cdae2e763b7deb5c Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Wed, 19 Jun 2024 15:39:49 +0200 Subject: [PATCH 1/6] refactor: steps counter --- docs/src/content/docs/guides/steps.mdx | 257 ++++++++++++++++++ .../starlight/user-components/Steps.astro | 4 +- .../starlight/user-components/rehype-steps.ts | 6 + 3 files changed, 266 insertions(+), 1 deletion(-) create mode 100644 docs/src/content/docs/guides/steps.mdx diff --git a/docs/src/content/docs/guides/steps.mdx b/docs/src/content/docs/guides/steps.mdx new file mode 100644 index 00000000000..5984363c02a --- /dev/null +++ b/docs/src/content/docs/guides/steps.mdx @@ -0,0 +1,257 @@ +--- +title: ⚠️ Steps ⚠️ +--- + +:::danger +Delete this page +::: + +import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components'; + + + +1. A step + +2. A step with some code bloc + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Amazing', + }), + ], + }); + ``` + +3. A step with a file tree + + + + - src/ + - assets/ + - **my-logo.svg** + - content/ + - astro.config.mjs + + + +4. A step with an unordered list + + - A + - B + - B1 + - B2 + - C + +5. A step with some tabs + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + +6. A step with an ordered list + + 1. A + 2. B + 1. B1 + 2. B2 + 3. C + +7. A step with nested steps + + + + 1. A step + 2. A step with some code bloc + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Amazing', + }), + ], + }); + ``` + + 3. A step with a file tree + + + + - src/ + - assets/ + - **my-logo.svg** + - content/ + - astro.config.mjs + + + + 4. A step with an unordered list + + - A + - B + - B1 + - B2 + - C + + 5. A step with some tabs + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + + 6. A step with an ordered list + + 1. A + 2. B + 1. B1 + 2. B2 + 3. C + + 7. A step + + + +8. A step with nested steps starting at 4 + + + + 4. A step + 5. A step with some code bloc + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Amazing', + }), + ], + }); + ``` + + 6. A step with a file tree + + + + - src/ + - assets/ + - **my-logo.svg** + - content/ + - astro.config.mjs + + + + 7. A step with an unordered list + + - A + - B + - B1 + - B2 + - C + + 8. A step with some tabs + + + + + + ```sh + npx astro add tailwind + ``` + + + + + + ```sh + pnpm astro add tailwind + ``` + + + + + + ```sh + yarn astro add tailwind + ``` + + + + + + 9. A step with an ordered list + + 1. A + 2. B + 1. B1 + 2. B2 + 3. C + + 10. A step + + + +9. A step + + diff --git a/packages/starlight/user-components/Steps.astro b/packages/starlight/user-components/Steps.astro index ffd65a35c6d..66562555437 100644 --- a/packages/starlight/user-components/Steps.astro +++ b/packages/starlight/user-components/Steps.astro @@ -13,10 +13,12 @@ const { html } = processSteps(content); --bullet-margin: 0.375rem; list-style: none; + counter-reset: steps-counter var(--sl-steps-start, 0); padding-inline-start: 0; } .sl-steps > li { + counter-increment: steps-counter; position: relative; padding-inline-start: calc(var(--bullet-size) + 1rem); /* HACK: Keeps any `margin-bottom` inside the `
  • `’s padding box to avoid gaps in the hairline border. */ @@ -31,7 +33,7 @@ const { html } = processSteps(content); /* Custom list marker element. */ .sl-steps > li::before { - content: counter(list-item); + content: counter(steps-counter); position: absolute; top: 0; inset-inline-start: 0; diff --git a/packages/starlight/user-components/rehype-steps.ts b/packages/starlight/user-components/rehype-steps.ts index ff9c9593f85..2c6a6f3c039 100644 --- a/packages/starlight/user-components/rehype-steps.ts +++ b/packages/starlight/user-components/rehype-steps.ts @@ -44,6 +44,12 @@ const stepsProcessor = rehype() } else { rootElement.properties.className.push('sl-steps'); } + + // Add the `start` attribute as a CSS custom property so we can use it as the starting index + // of the steps custom counter. + if (typeof rootElement.properties.start === 'number') { + rootElement.properties.style = `${rootElement.properties.style ?? ''} --sl-steps-start: ${rootElement.properties.start - 1};`; + } }; }); From 9f22652f55aa8c3627e8df1468e1e1dbcc7e6a6e Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 20 Jun 2024 19:40:42 +0200 Subject: [PATCH 2/6] Delete test page --- docs/src/content/docs/guides/steps.mdx | 257 ------------------------- 1 file changed, 257 deletions(-) delete mode 100644 docs/src/content/docs/guides/steps.mdx diff --git a/docs/src/content/docs/guides/steps.mdx b/docs/src/content/docs/guides/steps.mdx deleted file mode 100644 index 5984363c02a..00000000000 --- a/docs/src/content/docs/guides/steps.mdx +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: ⚠️ Steps ⚠️ ---- - -:::danger -Delete this page -::: - -import { Tabs, TabItem, FileTree, Steps } from '@astrojs/starlight/components'; - - - -1. A step - -2. A step with some code bloc - - ```js - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import starlight from '@astrojs/starlight'; - - export default defineConfig({ - integrations: [ - starlight({ - title: 'Amazing', - }), - ], - }); - ``` - -3. A step with a file tree - - - - - src/ - - assets/ - - **my-logo.svg** - - content/ - - astro.config.mjs - - - -4. A step with an unordered list - - - A - - B - - B1 - - B2 - - C - -5. A step with some tabs - - - - - - ```sh - npx astro add tailwind - ``` - - - - - - ```sh - pnpm astro add tailwind - ``` - - - - - - ```sh - yarn astro add tailwind - ``` - - - - - -6. A step with an ordered list - - 1. A - 2. B - 1. B1 - 2. B2 - 3. C - -7. A step with nested steps - - - - 1. A step - 2. A step with some code bloc - - ```js - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import starlight from '@astrojs/starlight'; - - export default defineConfig({ - integrations: [ - starlight({ - title: 'Amazing', - }), - ], - }); - ``` - - 3. A step with a file tree - - - - - src/ - - assets/ - - **my-logo.svg** - - content/ - - astro.config.mjs - - - - 4. A step with an unordered list - - - A - - B - - B1 - - B2 - - C - - 5. A step with some tabs - - - - - - ```sh - npx astro add tailwind - ``` - - - - - - ```sh - pnpm astro add tailwind - ``` - - - - - - ```sh - yarn astro add tailwind - ``` - - - - - - 6. A step with an ordered list - - 1. A - 2. B - 1. B1 - 2. B2 - 3. C - - 7. A step - - - -8. A step with nested steps starting at 4 - - - - 4. A step - 5. A step with some code bloc - - ```js - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import starlight from '@astrojs/starlight'; - - export default defineConfig({ - integrations: [ - starlight({ - title: 'Amazing', - }), - ], - }); - ``` - - 6. A step with a file tree - - - - - src/ - - assets/ - - **my-logo.svg** - - content/ - - astro.config.mjs - - - - 7. A step with an unordered list - - - A - - B - - B1 - - B2 - - C - - 8. A step with some tabs - - - - - - ```sh - npx astro add tailwind - ``` - - - - - - ```sh - pnpm astro add tailwind - ``` - - - - - - ```sh - yarn astro add tailwind - ``` - - - - - - 9. A step with an ordered list - - 1. A - 2. B - 1. B1 - 2. B2 - 3. C - - 10. A step - - - -9. A step - - From 8b10120fdb540df81e0c576c63e6b06b99c9688a Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 20 Jun 2024 19:44:35 +0200 Subject: [PATCH 3/6] Avoid extra whitespace in `style` attribute --- packages/starlight/user-components/rehype-steps.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/starlight/user-components/rehype-steps.ts b/packages/starlight/user-components/rehype-steps.ts index 2c6a6f3c039..184df00ef08 100644 --- a/packages/starlight/user-components/rehype-steps.ts +++ b/packages/starlight/user-components/rehype-steps.ts @@ -48,7 +48,9 @@ const stepsProcessor = rehype() // Add the `start` attribute as a CSS custom property so we can use it as the starting index // of the steps custom counter. if (typeof rootElement.properties.start === 'number') { - rootElement.properties.style = `${rootElement.properties.style ?? ''} --sl-steps-start: ${rootElement.properties.start - 1};`; + const styles = [`--sl-steps-start: ${rootElement.properties.start - 1}`]; + if (rootElement.properties.style) styles.push(String(rootElement.properties.style)); + rootElement.properties.style = styles.join(';'); } }; }); From 3ddda281f5e17381287ad80887a1e6d01692d72f Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 20 Jun 2024 19:44:56 +0200 Subject: [PATCH 4/6] Update snapshot --- packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts b/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts index 36f4082c5bf..745ae41829d 100644 --- a/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts +++ b/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts @@ -70,7 +70,7 @@ test('applies `role="list"` to child list', () => { test('does not interfere with other attributes on the child list', () => { const { html } = processSteps('
    1. Step one
    '); expect(html).toMatchInlineSnapshot( - `"
    1. Step one
    "` + `"
    1. Step one
    "` ); }); From e026aa5fa182d4f6084c57d96a6a05f8ed12715b Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 20 Jun 2024 19:53:55 +0200 Subject: [PATCH 5/6] Add explicit tests for `start` attribute behaviour --- .../__tests__/remark-rehype/rehype-steps.test.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts b/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts index 745ae41829d..273788e6664 100644 --- a/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts +++ b/packages/starlight/__tests__/remark-rehype/rehype-steps.test.ts @@ -87,3 +87,14 @@ test('applies class name and preserves existing classes on a child list', () => `"
    1. Step one
    "` ); }); + +test('applies custom property if start attribute is used', () => { + const start = 10; + const { html } = processSteps(`
    1. Step one
    `); + expect(html).toContain(`style="--sl-steps-start: ${start - 1}"`); +}); + +test('custom property for start count does not interfere with custom styles', () => { + const { html } = processSteps(`
    1. Step one
    `); + expect(html).toMatchInlineSnapshot(`"
    1. Step one
    "`); +}); From 8242c9ba365fea802a3f93f7067fe1422663f011 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Thu, 20 Jun 2024 19:58:54 +0200 Subject: [PATCH 6/6] Add changeset --- .changeset/strong-apes-burn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-apes-burn.md diff --git a/.changeset/strong-apes-burn.md b/.changeset/strong-apes-burn.md new file mode 100644 index 00000000000..1536b4cd55c --- /dev/null +++ b/.changeset/strong-apes-burn.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight': patch +--- + +Fixes `` numbering bug caused by Chrome v126 CSS counter rewrite