Skip to content

fix: Stop repeating the license header in every compiled stylesheet - #4906

Open
TrevorBurnham wants to merge 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:fix-license-headers-in-partials
Open

fix: Stop repeating the license header in every compiled stylesheet#4906
TrevorBurnham wants to merge 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:fix-license-headers-in-partials

Conversation

@TrevorBurnham

@TrevorBurnham TrevorBurnham commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

Description

Fixes #4905.

Sass copies loud comments into the compiled CSS, so each partial's license header was emitted once per entry point that @uses it. Every published stylesheet carried a median of 34 copies, and 580 KB of the 2304 KB of CSS was the same four lines repeated.

The 91 partials under src/ now declare the header with Sass line comments, which the compiler strips. The styles.scss entry points keep the block comment, so every output file still carries one. .stylelintrc enforces the right form for each using the commentType option added in cloudscape-design/build-tools#75.

before after
CSS, raw 2304 KB 1743 KB (-24.3%)
CSS, gzipped 303 KB 298 KB (-1.8%)
license header bytes 580 KB (25.2%) 32 KB (1.8%)
headers, total 5400 297
headers per stylesheet, median 34 1
headers per stylesheet, max 51 5
stylesheets with more than one 152 48

The gzipped win is small because gzip already deduped the identical blocks. The win is in unminified bytes, which is what dev servers serve and what the internal package ships. Minified production bundles are unaffected either way, since minifiers strip the comments already.

Two things reviewers should know:

1. Every generated scoped class name changes. The name is awsui_{name}_{fileHash}_{contentHash}_{lineNumber}, and removing comments moves both the content hash and the line numbers. The test-utils selectors snapshot passes unchanged because it truncates to the path-derived hash. Two snapshots do change, both because tokenStylesSuffix hashes src/internal/styles/global.scss, whose header changed: the design tokens snapshot, and the themes integration snapshot, whose recorded keyframe names embed the suffix (awsui-fade-in-35003cawsui-fade-in-592d6e). The compiled CSS is otherwise identical, verified as described below.

2. This does not remove every duplicate. 48 stylesheets still carry more than one header, up to 5. That remainder is a Dart Sass behaviour, not something this repo controls: an entry point's leading comments are re-emitted once per module when the entry point and its partials share a dependency. Minimal repro on Sass 1.89.2, no Cloudscape code involved:

// _shared.scss
.shared { color: gray; }
@mixin m { color: gray; }

// _a.scss     -> @use "shared";  .a { color: red; }
// _b.scss     -> @use "shared";  .b { color: blue; }

// entry.scss
/* ENTRY HEADER */
@use "shared";
@use "a";
@use "b";

ENTRY HEADER is emitted three times. This is the shape of every Cloudscape component that has sub-partials, which is why popover still ends up with several headers rather than one. It accounts for roughly 6 KB and is worth a follow-up upstream; it does not block this change.

The other source named in #4905, @cloudscape-design/component-toolkit, is already resolved: cloudscape-design/component-toolkit#248 converted its two SCSS files and shipped in 1.0.0-beta.182, which this branch builds against. That is why the median here reaches 1 rather than 2.

How has this been tested?

A normalised comparison of all 229 compiled stylesheets against a build of main from the same node_modules. After neutralising license blocks, the contentHash/lineNumber segments of scoped names, and tokenStylesSuffix, 228 of 229 stylesheets are byte-identical. The one exception is top-navigation/styles.scoped.css, where a scoped name embedded in a #awsui_\9 _… escape defeats the normaliser; its only differing line is that name's content hash (xji5foc0g1), with identical line counts and selectors. No file was added, removed, or left empty.

Both snapshot updates are hash-only: normalising the old and new suffix to a placeholder makes the before and after files identical, so no token value, property name, or ordering changed.

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.

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.

Comment thread .stylelintrc Outdated
@TrevorBurnham
TrevorBurnham force-pushed the fix-license-headers-in-partials branch 3 times, most recently from 70da272 to 5627044 Compare August 27, 2026 15:16
@TrevorBurnham
TrevorBurnham marked this pull request as ready for review August 27, 2026 15:19
@TrevorBurnham
TrevorBurnham requested a review from a team as a code owner August 27, 2026 15:19
@TrevorBurnham
TrevorBurnham requested review from jperals and pan-kot and removed request for a team August 27, 2026 15:19
pan-kot
pan-kot previously approved these changes Aug 27, 2026
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react16 August 27, 2026 16:42 Inactive
@github-actions
github-actions Bot temporarily deployed to fork-dev-pages-react18 August 27, 2026 16:42 Inactive
Sass copies loud comments into the compiled CSS, so each partial's header
was emitted once per entry point that @uses it. Every published
stylesheet carried a median of 34 copies, and 580 KB of the 2304 KB of
CSS was the same four lines repeated.

Partials now declare the header with Sass line comments, which the
compiler strips. Entry points keep the block comment, so every output
file still carries one. Stylelint enforces the right form for each via
the commentType option from cloudscape-design/build-tools#75.

Published CSS drops from 2304 KB to 1743 KB, and the median number of
headers per stylesheet from 34 to 1. The 48 files that still carry more
than one hit a Sass behaviour that re-emits an entry point's leading
comments once per module when the entry and its partials share a
dependency, which is tracked in the issue.

The compiled CSS is otherwise byte-identical. Generated scoped class
names change because the name embeds a content hash and a line number,
and the design tokens snapshot changes because tokenStylesSuffix hashes
internal/styles/global.scss.

Refs cloudscape-design#4905.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Published CSS contains 30-50 duplicate license headers per file (26% of CSS bytes)

3 participants