fix: Stop repeating the license header in every compiled stylesheet - #4906
Draft
TrevorBurnham wants to merge 1 commit into
Draft
fix: Stop repeating the license header in every compiled stylesheet#4906TrevorBurnham wants to merge 1 commit into
TrevorBurnham wants to merge 1 commit into
Conversation
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 35 copies, and 598 KB of the 2326 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 new commentType option. Published CSS drops from 2326 KB to 1770 KB. The remaining duplicates come from two sources outside this repo, both tracked in the issue: @cloudscape-design/component-toolkit's SCSS, and a Sass behaviour that re-emits an entry point's leading comments once per module when the entry and its partials share a dependency. 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. Requires cloudscape-design/build-tools#75. Refs cloudscape-design#4905.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 35 copies, and 598 KB of the 2326 KB of CSS was the same four lines repeated.The 89 partials under
src/now declare the header with Sass line comments, which the compiler strips. Thestyles.scssentry points keep the block comment, so every output file still carries one..stylelintrcenforces the right form for each using thecommentTypeoption added in cloudscape-design/build-tools#75.Published CSS drops 2326 KB → 1770 KB (-23.9%). Gzipped it is 306 KB → 300 KB, because gzip already deduped the identical blocks; the win is in unminified bytes, which is what dev servers serve. 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. Thetest-utilsselectors snapshot passes unchanged because it truncates to the path-derived hash. The design tokens snapshot is updated in this PR becausetokenStylesSuffixhashessrc/internal/styles/global.scss, whose header changed. The compiled CSS is otherwise identical: I diffed all 229 stylesheets before and after, normalising license blocks and generated hashes, and the payload matches everywhere.2. This does not remove every duplicate. The median goes from 35 to 2, not to 1. The remainder comes from two sources outside this change:
@cloudscape-design/component-toolkitshipsfocus-visible/index.scssandstyle-api/index.scsswith block headers. Converting those locally saves a further 17 KB and takes the median to 1.ENTRY HEADERis emitted three times. Drop the@use "shared"from the entry, or from_a/_b, and it is emitted once. This is the shape of every Cloudscape component that has sub-partials, which is whypopoverstill ends up with 5 headers rather than 1.Both are worth follow-ups; neither blocks this change.
How has this been tested?
npm run lint:stylelintpasses with build-tools#75 applied. It fails with 89Missing license headererrors against the currently published build-tools, so this PR is blocked on feat: Add commentType option to the license-headers stylelint rule build-tools#75 merging. That is why it is a draft.npm run quick-build, then a byte-level comparison of all 229 compiled stylesheets before and after, as described above.npx jest src/popover src/table src/test-utils src/internal/styles— 736 tests pass.src/__tests__/snapshot-tests/test-utils-selectors.test.tsxpasses with no snapshot change, confirming the public test-utils selectors are unaffected.design-tokens.test.tssnapshot updated; the diff is only thetokenStylesSuffixhash.documenter.test.tsfails locally onmaintoo, because it needslib/components-definitionsfrom the full build rather thanquick-build. Unrelated.Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.