chore: Detect and report missing css styles #3591

just-boris · 2025-06-19T11:24:56Z

Description

Added check for this old issue: AWSUI-55709

Since releasing VR only artifacts, a few more teams reported the same. Let's add a check to monitor this.

Related links, issue #, if available: n/a

How has this been tested?

Added a unit test
Checked the dev pages locally to ensure no false alarms
Deployed to my dev pipeline, reproduced missing styles via Devtools' request blocking

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

just-boris · 2025-06-19T11:26:13Z

build-tools/tasks/clean.js

      `${workspace.targetPath}/**`,
      `${workspace.staticSitePath}/**`,
      `${workspace.generatedTestUtils}/**`,
+      `${workspace.generatedPath}/custom-css-properties/**`,


workspace.generatedPath contains other non-generated files: https://github.com/cloudscape-design/components/tree/main/src/internal/generated

Ideally we should clean up them all (or move to a different path), but not in this PR

just-boris · 2025-06-19T11:36:47Z

src/internal/base-component/styles.scss

+@use '../generated/custom-css-properties' as custom-styles;
+
+:root {
+  --awsui-version-info-#{custom-styles.$awsui-commit-hash}: true;


Core of this check. We check presence of this CSS var in Javascript. If not found – the styles are missing

so if an app doesn't bundle and server styles but another app on the same page has a similar git commit. it wouldn't be detected.

but I guess this is acceptable, and better than what we have now.

Yes, there is a chance of missing some cases, if they happen to have the same commit

just-boris · 2025-06-19T11:37:25Z

src/internal/metrics.ts

+import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from './environment';

-export const metrics = new Metrics(PACKAGE_SOURCE, PACKAGE_VERSION);
+export const metrics = new Metrics({ packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme: THEME });


Addressing this follow-up cloudscape-design/component-toolkit#136 (comment)

Yes I know this THEME value does not support vr, but it is fine for this use-case

can you explain a bit more?

Before it was like this

const metrics = new Metrics(PACKAGE_SOURCE, PACKAGE_VERSION); metrics.initMetrics(theme);

This is not safe, because it metrics.initMetrics(theme) sets theme as a global variable inside @cloudscape-design/component-toolkit package

Multiple packages may call the same toolkit instance and the same metrics.initMetrics(theme) will overwrite each other theme.

So, now we finally got the theme properly scoped to each bundle

codecov · 2025-06-19T11:48:30Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.59%. Comparing base (1ac1315) to head (5236ace).
Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3591   +/-   ##
=======================================
  Coverage   96.59%   96.59%           
=======================================
  Files         806      807    +1     
  Lines       23500    23530   +30     
  Branches     8211     8216    +5     
=======================================
+ Hits        22699    22729   +30     
  Misses        794      794           
  Partials        7        7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

just-boris · 2025-06-19T11:59:28Z

src/internal/hooks/use-base-component/styles-check.ts

+  }
+}
+
+export function idleWithDelay(cb: () => void) {


Exported checkMissingStyles and idleWithDelay as separate functions to allow write simpler unit tests on each part of the functionality

just-boris · 2025-06-19T12:35:35Z

src/__integ__/themes.test.ts

          // Custom Property
          if (prop.startsWith('--')) {
-            const valueWithoutPostfix = prop.substring(2, prop.length - 7);
+            const valueWithoutPostfix = prop.replace(/^--/, '').replace(/-[\d\w]+$/, '');


This code assumed the hash is always 7 characters, which is not true

just-boris force-pushed the detect-missing-styles branch 2 times, most recently from 03f6b14 to e6aefe1 Compare June 19, 2025 11:39

just-boris commented Jun 19, 2025

View reviewed changes

just-boris deployed to dev-pages June 19, 2025 11:48 — with GitHub Actions View deployment

just-boris force-pushed the detect-missing-styles branch from e6aefe1 to 89568bb Compare June 19, 2025 11:58

just-boris commented Jun 19, 2025

View reviewed changes

just-boris deployed to dev-pages June 19, 2025 12:07 — with GitHub Actions View deployment

just-boris force-pushed the detect-missing-styles branch from 89568bb to 90e811c Compare June 19, 2025 12:12

just-boris deployed to dev-pages June 19, 2025 12:21 — with GitHub Actions View deployment

just-boris force-pushed the detect-missing-styles branch from 90e811c to aad7297 Compare June 19, 2025 12:34

just-boris commented Jun 19, 2025

View reviewed changes

just-boris deployed to dev-pages June 19, 2025 12:42 — with GitHub Actions View deployment

just-boris force-pushed the detect-missing-styles branch 2 times, most recently from 6d9e39a to 97c9d30 Compare June 19, 2025 13:39

just-boris deployed to dev-pages June 19, 2025 13:47 — with GitHub Actions View deployment

chore: Detect and report missing css styles

5236ace

just-boris force-pushed the detect-missing-styles branch from 97c9d30 to 5236ace Compare June 19, 2025 14:12

just-boris deployed to dev-pages June 19, 2025 14:21 — with GitHub Actions View deployment

just-boris marked this pull request as ready for review June 19, 2025 14:42

just-boris requested a review from a team as a code owner June 19, 2025 14:42

just-boris requested review from a team, abdhalees and georgylobko and removed request for a team and georgylobko June 19, 2025 14:42

abdhalees approved these changes Jun 20, 2025

View reviewed changes

just-boris added this pull request to the merge queue Jun 20, 2025

Merged via the queue into main with commit fd8eb3d Jun 20, 2025
40 checks passed

just-boris deleted the detect-missing-styles branch June 20, 2025 10:09

at-susie pushed a commit that referenced this pull request Oct 10, 2025

chore: Detect and report missing css styles (#3591)

c359e30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Detect and report missing css styles #3591

chore: Detect and report missing css styles #3591

Uh oh!

just-boris commented Jun 19, 2025 •

edited

Loading

Uh oh!

just-boris Jun 19, 2025

Uh oh!

just-boris Jun 19, 2025

Uh oh!

abdhalees Jun 20, 2025

Uh oh!

just-boris Jun 20, 2025

Uh oh!

just-boris Jun 19, 2025

Uh oh!

abdhalees Jun 20, 2025

Uh oh!

just-boris Jun 20, 2025

Uh oh!

codecov bot commented Jun 19, 2025 •

edited

Loading

Uh oh!

just-boris Jun 19, 2025

Uh oh!

just-boris Jun 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chore: Detect and report missing css styles #3591

chore: Detect and report missing css styles #3591

Uh oh!

Conversation

just-boris commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

just-boris commented Jun 19, 2025 •

edited

Loading

codecov bot commented Jun 19, 2025 •

edited

Loading