Get theme updates and move the styles to `@use` by alexander-yevsyukov · Pull Request #564 · SpineEventEngine/SpineEventEngine.github.io

alexander-yevsyukov · 2026-10-30T18:25:05Z

Part of SpineEventEngine/site-commons#38.

This PR moves the site to the Dart Sass theme and its own styles to the Sass module system. It also brings in the JavaScript dependency updates from #558 and #560.

Changes

Get theme updates. site-commons goes from b79100d to 9216e48. That brings in:
- Serve jQuery as a file so Lychee checks body links site-commons#39: jQuery is served as a file instead of being inlined in every page.
- Compile the styles with Dart Sass site-commons#40: the theme compiles with Dart Sass.
- Move the theme styles from @import to @use site-commons#41: the theme moves to @use/@forward.
JavaScript dependencies. These are Dependabot's commits, cherry-picked:
- source-map-js 1.2.1 → 1.2.2 (Bump source-map-js from 1.2.1 to 1.2.2 in /site #558).
- postcss-selector-parser 6.1.4 → 7.1.6 and @fullhuman/postcss-purgecss 7.0.2 → 8.0.0 (Bump postcss-selector-parser and @fullhuman/postcss-purgecss in /site #560). Nothing in the site or the theme loads PurgeCSS. The CSS is byte-identical with and without these bumps.
- Together they resolve the two open Dependabot alerts on master: source-map-js (high) and postcss-selector-parser (moderate).
Move the styles from @import to @use. main.scss loads the theme and its partials with @use, in the same order, so the CSS comes out in the same order. Each partial loads what it uses:
- the theme, through @use "theme-main" as *;;
- other partials, by relative paths: base/colors, base/common for %expandable-title, and modules/forms for $form-error-color. main.scss loads each of them before the partials that use them, so no CSS moves.
Replace deprecated Sass functions. map-get() → map.get(). fade-out() → color.adjust($alpha: …), which computes the same color.
Keep Check Links passing. Lychee couldn't extract links past the jQuery inlined in every page's <head>. With site-commons#39, it reads whole pages, and it finds 14 links that were already broken:
- The Gitter link in the 1.0 release post now points to where Gitter redirects. Lychee rejects the old URL's 301.
- A new .lycheeignore lists the 13 links broken in the docs this site imports, as Get theme updates documentation#96 does. One comes from documentation itself and is fixed by that PR. The other 12 come from the validation docs (Remove the validation links from .lycheeignore once they are fixed documentation#97). Each pattern should go once the module update that fixes its link lands here.
- Check Links also runs when .lycheeignore changes. config distributes check-links.yml, so Run Check Links when .lycheeignore changes config#826 adds the same trigger there. Until it merges, ./config/pull drops the line.
Update config. It brings Move check-links off Node.js 20 and show Lychee's report on the run page config#825: newer action versions in Check Links, and a step that shows Lychee's report on the run page.

Sass warnings

Build	`hugo --minify`	`sass --verbose` CLI, all files
`master` (LibSass)	1: Hugo's LibSass deprecation notice	—
After the theme update	28: the `@import`s in `main.scss`	382
This PR	0	330, all from Bootstrap

Hugo hides deprecations in every file except the entry one (silenceDependencyDeprecations), so the CLI is what shows the partials. All 52 deprecations the site owned are gone: 35 @imports, 9 map-gets and 4 fade-outs, each fade-out reported twice.

CSS comparison

I flattened public/main.min.*.css into one context | selector | declaration line per declaration and diffed the results.

master → theme update: 12,764 declarations on both sides. After normalizing Dart Sass formatting and precision (fractional RGB channels, spaces in custom properties, quotes, hsla() vs rgba(), literal characters instead of escapes), what's left:

calc() is folded: .ratio-* aspect ratios, .toc-col width.
The code-tab indicator gets border-radius: 1px. LibSass emitted an invalid calc($indicator-line-height / 2).
No more .h1–.h6, .small or .mark variants of selectors. Bootstrap's @extends no longer reach outside Bootstrap. No page uses those classes.
The medium Roboto Mono .eot source now points to fonts/robotomono/, where the file is (site-commons#41).
13 Bootstrap .table-* variant colors differ by one unit in one channel. LibSass rounded the intermediate mix() results.
--code-block-padding and --table-* now sit in rule blocks of their own, because Dart Sass emits declarations that follow nested rules in place. Each still comes before its overrides and uses.

Theme update → this PR: all 12,764 declarations match. The only change is that the @extend %expandable-title rule lists .licenses .collapse-link and .licenses .collapsible-panel-title in the other order, which has no effect. map.get() and color.adjust() produce the same values as the functions they replace.

Leading license comment

The minified CSS now starts with the theme's license comment instead of Bootstrap's MIT banner. theme-main.scss has a /*! header, which Dart Sass dropped under @import but emits first under @use. The theme's PostCSS step (discardComments({removeAllButFirst: true})) keeps only that first comment. The theme's own preview-main.scss already works this way. The fix belongs in site-commons.

Checks

hugo --minify and hugo -e development build.
npm test: 42 tests pass.
Lychee 0.24.2 with lychee.toml over the development build: 14,664 links, none broken apart from the ignored ones.

🤖 Generated with Claude Code

Brings in the theme from `site-commons` master, which compiles its styles with Dart Sass (SpineEventEngine/site-commons#40) and moves them to `@use`/`@forward` (SpineEventEngine/site-commons#41). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Bumps [source-map-js](https://github.com/7rulnik/source-map-js) from 1.2.1 to 1.2.2. - [Release notes](https://github.com/7rulnik/source-map-js/releases) - [Changelog](https://github.com/7rulnik/source-map-js/blob/main/CHANGELOG.md) - [Commits](7rulnik/source-map-js@v1.2.1...v1.2.2) --- updated-dependencies: - dependency-name: source-map-js dependency-version: 1.2.2 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>

Bumps [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser) to 7.1.6 and updates ancestor dependency [@fullhuman/postcss-purgecss](https://github.com/FullHuman/purgecss). These dependencies need to be updated together. Updates `postcss-selector-parser` from 6.1.4 to 7.1.6 - [Release notes](https://github.com/postcss/postcss-selector-parser/releases) - [Changelog](https://github.com/postcss/postcss-selector-parser/blob/main/CHANGELOG.md) - [Commits](postcss/postcss-selector-parser@6.1.4...7.1.6) Updates `@fullhuman/postcss-purgecss` from 7.0.2 to 8.0.0 - [Release notes](https://github.com/FullHuman/purgecss/releases) - [Changelog](https://github.com/FullHuman/purgecss/blob/main/CHANGELOG.md) - [Commits](FullHuman/purgecss@v7.0.2...v8.0.0) --- updated-dependencies: - dependency-name: postcss-selector-parser dependency-version: 7.1.6 dependency-type: indirect - dependency-name: "@fullhuman/postcss-purgecss" dependency-version: 8.0.0 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>

Dart Sass 3.0 removes `@import`. `main.scss` now loads the theme and its partials with `@use`, in the same order, so the CSS comes out in the same order too. Each partial loads what it uses: the theme through `@use "theme-main" as *;`, and other partials by relative paths. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

`map-get()` becomes `map.get()`, and `fade-out()` becomes `color.adjust($alpha: ...)`, which computes the same color. Dart Sass 3.0 removes the global functions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Lychee rejects the 301 of the old room URL. It used to miss the link, because it couldn't extract links past the jQuery inlined in every page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

The theme no longer inlines jQuery (SpineEventEngine/site-commons#39), so Lychee now checks whole pages. It finds 13 broken links in the docs that come from `SpineEventEngine/documentation`, which only that repository and `SpineEventEngine/validation` can fix. `lychee.toml` comes from `config`, so they go to a repo-local `.lycheeignore`, as in SpineEventEngine/documentation#96. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-10-30T18:25:16Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-30T18:27:15.187333Z	`00d6795`	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 00d6795c01

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copilot

🟢 Approved

No active review issues are recorded for the website’s Dart Sass–compatible theme and Sass-module migration.

No open issues 🎉

1 file not reviewed

site/package-lock.json: Generated file

What changed in this PR

Updates the Spine website to the Dart Sass–compatible shared theme and migrates its styles to Sass modules, supporting the broader site-commons migration.

Changes:

Updates site-commons and incorporates the JavaScript dependency updates from #558 and #560.
Replaces Sass @import directives and deprecated functions with explicit module dependencies and modern equivalents.
Updates the Gitter link and adds targeted link-check exclusions for known broken links in imported documentation.

File	Description
`site/package.json`	Updates the PurgeCSS dependency.
`site/package-lock.json`	Locks updated dependencies and their dependency trees.
`site/go.sum`	Adds checksums for the updated theme.
`site/go.mod`	Selects the Dart Sass–compatible theme revision.
`site/content/blog/spine-event-engine-1-0-is-out/index.md`	Updates the Gitter destination.
`site/assets/scss/pages/release-notes/_sidenav.scss`	Explicitly loads theme members.
`site/assets/scss/pages/release-notes/_release-notes.scss`	Explicitly loads theme members.
`site/assets/scss/pages/blog/_post.scss`	Explicitly loads theme members.
`site/assets/scss/pages/blog/_post-navigation.scss`	Explicitly loads theme members.
`site/assets/scss/pages/blog/_post-info.scss`	Explicitly loads theme members.
`site/assets/scss/pages/blog/_index.scss`	Loads blog partials with `@use`.
`site/assets/scss/pages/blog/_blog.scss`	Explicitly loads theme members.
`site/assets/scss/pages/blog/_blog-container.scss`	Explicitly loads theme members.
`site/assets/scss/pages/_privacy.scss`	Explicitly loads theme members.
`site/assets/scss/pages/_licenses.scss`	Loads colors, shared placeholders, and theme members.
`site/assets/scss/pages/_landing.scss`	Loads site colors and theme members.
`site/assets/scss/pages/_getting-help.scss`	Explicitly loads theme members.
`site/assets/scss/pages/_faq.scss`	Explicitly loads theme members.
`site/assets/scss/pages/_checkout.scss`	Loads vendor styles, form variables, and theme members.
`site/assets/scss/pages/_about.scss`	Loads site colors and theme members.
`site/assets/scss/modules/_subscribe-container.scss`	Loads site colors and theme members.
`site/assets/scss/modules/_result-panel.scss`	Explicitly loads theme members.
`site/assets/scss/modules/_redirect-screen.scss`	Loads theme members and adopts `map.get()`.
`site/assets/scss/modules/_navbar.scss`	Declares dependencies and modernizes map and color functions.
`site/assets/scss/modules/_nav-search.scss`	Loads theme members and modernizes map lookups.
`site/assets/scss/modules/_message-modal.scss`	Loads theme members and adopts `map.get()`.
`site/assets/scss/modules/_loader.scss`	Explicitly loads theme members.
`site/assets/scss/modules/_hero.scss`	Loads site colors and theme members.
`site/assets/scss/modules/_go-top-button.scss`	Loads theme members and adopts `map.get()`.
`site/assets/scss/modules/_forms.scss`	Explicitly loads theme members.
`site/assets/scss/modules/_footer.scss`	Declares dependencies and adopts `color.adjust()`.
`site/assets/scss/modules/_feature-cards.scss`	Loads site colors and theme members.
`site/assets/scss/modules/_checkbox.scss`	Explicitly loads theme members.
`site/assets/scss/modules/_call-to-action.scss`	Loads site colors and theme members.
`site/assets/scss/modules/_buttons.scss`	Explicitly loads theme members.
`site/assets/scss/main.scss`	Converts the stylesheet entry point to `@use`.
`site/assets/scss/base/_common.scss`	Loads dependencies and adopts `color.adjust()`.
`site/assets/scss/base/_colors.scss`	Explicitly loads theme color dependencies.
`.lycheeignore`	Adds targeted exclusions pending upstream documentation fixes.
`.agents/tasks/dart-sass-site-styles.md`	Records the migration plan and reported verification results.

_{Review effort: Balanced}

A PR that only adds or removes an ignored link should still get its links checked. `config` distributes this workflow, so it needs the same line, or the next `./config/pull` reverts it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Brings in SpineEventEngine/config#825: `check-links` moves its actions off Node.js 20 and shows Lychee's report on the run page. The workflow keeps the `.lycheeignore` trigger added here, which `config` doesn't have yet. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

alexander-yevsyukov and others added 9 commits October 30, 2026 17:35

Get theme updates

43ce2fb

Brings in the theme from `site-commons` master, which compiles its styles with Dart Sass (SpineEventEngine/site-commons#40) and moves them to `@use`/`@forward` (SpineEventEngine/site-commons#41). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Replace deprecated Sass functions

008a9b3

`map-get()` becomes `map.get()`, and `fade-out()` becomes `color.adjust($alpha: ...)`, which computes the same color. Dart Sass 3.0 removes the global functions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Add task doc for the Dart Sass styles

244ba11

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Point the Gitter link to where Gitter redirects

eae2f6d

Lychee rejects the 301 of the old room URL. It used to miss the link, because it couldn't extract links past the jQuery inlined in every page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Log the link check in the task doc

00d6795

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Copilot AI balanced review requested due to automatic review settings October 30, 2026 18:25

This was referenced Oct 30, 2026

Bump source-map-js from 1.2.1 to 1.2.2 in /site #558

Closed

Bump postcss-selector-parser and @fullhuman/postcss-purgecss in /site #560

Closed

Copilot started reviewing on behalf of alexander-yevsyukov October 30, 2026 18:25

View session

chatgpt-codex-connector Bot reviewed Oct 30, 2026

View reviewed changes

Comment thread .lycheeignore Resolved

Copilot AI approved these changes Oct 30, 2026

View reviewed changes

alexander-yevsyukov and others added 2 commits October 30, 2026 18:30

Run Check Links when .lycheeignore changes

745f1b0

A PR that only adds or removes an ignored link should still get its links checked. `config` distributes this workflow, so it needs the same line, or the next `./config/pull` reverts it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This was referenced Nov 2, 2026

Keep Bootstrap's banner as the first comment in the CSS SpineEventEngine/site-commons#43

Merged

Run Check Links when .lycheeignore changes SpineEventEngine/config#826

Merged

alexander-yevsyukov added this to v2.0 Nov 2, 2026

alexander-yevsyukov self-assigned this Nov 2, 2026

alexander-yevsyukov moved this to In Review in v2.0 Nov 2, 2026

alexander-yevsyukov merged commit 8c8ab23 into master Nov 2, 2026
4 checks passed

alexander-yevsyukov deleted the get-theme-updates-dart-sass branch November 2, 2026 17:20

github-project-automation Bot moved this from In Review to ✅ Done in v2.0 Nov 2, 2026

This was referenced Nov 2, 2026

Move from LibSass to Dart Sass SpineEventEngine/site-commons#38

Closed

Update Validation docs and remove .lycheeignore SpineEventEngine/documentation#98

Merged

Update the documentation module and drop .lycheeignore #565

Merged

Navigation Menu

Repository navigation

Get theme updates and move the styles to `@use` - #564

Get theme updates and move the styles to `@use`#564
alexander-yevsyukov merged 11 commits into
masterfrom
get-theme-updates-dart-sass

alexander-yevsyukov commented Oct 30, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 30, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alexander-yevsyukov commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Sass warnings

CSS comparison

Leading license comment

Checks

Uh oh!

chatgpt-codex-connector Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approved

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexander-yevsyukov commented Oct 30, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 30, 2026 •

edited

Loading