Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bundle): bundled css for dev/demos #3477

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

castastrophe
Copy link
Collaborator

@castastrophe castastrophe commented Jan 3, 2025

Description

This pull request adds a bundle package for Spectrum CSS so that customers can leverage these in demos, documentation, or development.

This also updates the Storybook package to use the bundle instead of loading individual components for documentation page styling.

During bundling, I also found that the minifier was removing the stylelint-disable comments before the stylelint plugin was run so some of the logical-property "fixes" were supposed to be skipped. This PR forces the build to maintain the stylelint-disable comments thus increasing the bundle size a smidge.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • Expect to see no regression in the Modifiers table on the docs pages for components in Storybook
  • yarn clean:bundle should remove the tools/bundle/dist directory
  • yarn bundle should build the tools/bundle/dist output (expect to see index.css, index.min.css, and corresponding map files) (@5t3ph, @cdransf)
  • yarn refresh:bundle should update the tools/bundle/package.json to reflect the components/* directory accurately and the src/index.css to include the correct imports (@5t3ph, @cdransf)

To-do list

  • I have read the contribution guidelines.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link

changeset-bot bot commented Jan 3, 2025

🦋 Changeset detected

Latest commit: b91e385

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@spectrum-css/preview Minor
@spectrum-css/bundle Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Jan 3, 2025

File metrics

Summary

Total size: 4.27 MB*
Total change (Δ): 🔴 ⬆ 9.15 KB (0.21%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
actionbutton 41.05 KB 🔴 ⬆ 0.27 KB
alertbanner 5.63 KB 🔴 ⬆ 0.15 KB
button 84.10 KB 🔴 ⬆ 0.27 KB
closebutton 15.15 KB 🔴 ⬆ 0.27 KB
colorwheel 4.95 KB 🔴 ⬆ 0.21 KB
dial 11.33 KB 🔴 ⬆ 0.09 KB
logicbutton 9.35 KB 🔴 ⬆ 0.14 KB
picker 30.31 KB 🔴 ⬆ 0.14 KB
popover 16.31 KB 🔴 ⬆ 0.45 KB
stepper 20.67 KB 🔴 ⬆ 0.19 KB
textfield 35.33 KB 🔴 ⬆ 0.23 KB
tooltip 34.54 KB 🔴 ⬆ 0.59 KB
typography 40.27 KB 🔴 ⬆ 0.13 KB

Details

actionbutton

Filename Head Compared to base
index-base.css 29.98 KB 🔴 ⬆ 0.27 KB (0.87%)
index-theme.css 11.68 KB -
index-vars.css 41.05 KB 🔴 ⬆ 0.27 KB (0.63%)
index.css 41.05 KB 🔴 ⬆ 0.27 KB (0.63%)
themes/express.css 8.96 KB -
themes/spectrum.css 9.15 KB -

alertbanner

Filename Head Compared to base
index-base.css 5.34 KB 🔴 ⬆ 0.15 KB (2.84%)
index-theme.css 0.92 KB -
index-vars.css 5.63 KB 🔴 ⬆ 0.15 KB (2.69%)
index.css 5.63 KB 🔴 ⬆ 0.15 KB (2.69%)
themes/express.css 0.77 KB -
themes/spectrum.css 0.77 KB -

button

Filename Head Compared to base
index-base.css 54.15 KB 🔴 ⬆ 0.27 KB (0.48%)
index-theme.css 30.56 KB -
index-vars.css 84.10 KB 🔴 ⬆ 0.27 KB (0.31%)
index.css 84.10 KB 🔴 ⬆ 0.27 KB (0.31%)
themes/express.css 29.37 KB -
themes/spectrum.css 29.43 KB -

closebutton

Filename Head Compared to base
index-base.css 14.51 KB 🔴 ⬆ 0.27 KB (1.82%)
index-theme.css 1.26 KB -
index-vars.css 15.15 KB 🔴 ⬆ 0.27 KB (1.74%)
index.css 15.15 KB 🔴 ⬆ 0.27 KB (1.74%)
themes/express.css 0.96 KB -
themes/spectrum.css 0.95 KB -

colorwheel

Filename Head Compared to base
index-base.css 4.95 KB 🔴 ⬆ 0.21 KB (4.36%)
index-vars.css 4.95 KB 🔴 ⬆ 0.21 KB (4.36%)
index.css 4.95 KB 🔴 ⬆ 0.21 KB (4.36%)

dial

Filename Head Compared to base
index-base.css 11.33 KB 🔴 ⬆ 0.09 KB (0.76%)
index-vars.css 11.33 KB 🔴 ⬆ 0.09 KB (0.76%)
index.css 11.33 KB 🔴 ⬆ 0.09 KB (0.76%)

logicbutton

Filename Head Compared to base
index-base.css 9.35 KB 🔴 ⬆ 0.14 KB (1.52%)
index-vars.css 9.35 KB 🔴 ⬆ 0.14 KB (1.52%)
index.css 9.35 KB 🔴 ⬆ 0.14 KB (1.52%)

picker

Filename Head Compared to base
index-base.css 28.42 KB 🔴 ⬆ 0.14 KB (0.49%)
index-theme.css 2.50 KB -
index-vars.css 30.31 KB 🔴 ⬆ 0.14 KB (0.46%)
index.css 30.31 KB 🔴 ⬆ 0.14 KB (0.46%)
themes/express.css 1.51 KB -
themes/spectrum.css 1.60 KB -

popover

Filename Head Compared to base
index-base.css 16.16 KB 🔴 ⬆ 0.45 KB (2.82%)
index-theme.css 0.78 KB -
index-vars.css 16.31 KB 🔴 ⬆ 0.45 KB (2.79%)
index.css 16.31 KB 🔴 ⬆ 0.45 KB (2.79%)
themes/express.css 0.69 KB -
themes/spectrum.css 0.72 KB -

stepper

Filename Head Compared to base
index-base.css 17.28 KB 🔴 ⬆ 0.19 KB (1.07%)
index-theme.css 4.01 KB -
index-vars.css 20.67 KB 🔴 ⬆ 0.19 KB (0.89%)
index.css 20.67 KB 🔴 ⬆ 0.19 KB (0.89%)
themes/express.css 2.33 KB -
themes/spectrum.css 2.29 KB -

textfield

Filename Head Compared to base
index-base.css 34.40 KB 🔴 ⬆ 0.23 KB (0.65%)
index-theme.css 1.55 KB -
index-vars.css 35.33 KB 🔴 ⬆ 0.23 KB (0.64%)
index.css 35.33 KB 🔴 ⬆ 0.23 KB (0.64%)
themes/express.css 1.08 KB -
themes/spectrum.css 1.08 KB -

tooltip

Filename Head Compared to base
index-base.css 34.28 KB 🔴 ⬆ 0.59 KB (1.72%)
index-theme.css 0.89 KB -
index-vars.css 34.54 KB 🔴 ⬆ 0.59 KB (1.71%)
index.css 34.54 KB 🔴 ⬆ 0.59 KB (1.71%)
themes/express.css 0.76 KB -
themes/spectrum.css 0.76 KB -

typography

Filename Head Compared to base
index-base.css 40.27 KB 🔴 ⬆ 0.13 KB (0.31%)
index-vars.css 40.27 KB 🔴 ⬆ 0.13 KB (0.31%)
index.css 40.27 KB 🔴 ⬆ 0.13 KB (0.31%)
* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@castastrophe castastrophe force-pushed the feat-create-css-bundle branch 3 times, most recently from 3181e52 to 95f3730 Compare January 3, 2025 20:30
@castastrophe castastrophe self-assigned this Jan 3, 2025
@castastrophe castastrophe added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. build Issues associated with the build process; often a refactor skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Jan 3, 2025
@castastrophe castastrophe marked this pull request as ready for review January 3, 2025 20:33
@castastrophe castastrophe added run_vrt For use on PRs looking to kick off VRT and removed skip_vrt Add to a PR to skip running VRT (but still pass the action) labels Jan 5, 2025
@castastrophe castastrophe force-pushed the feat-create-css-bundle branch 2 times, most recently from 637f836 to c431cb0 Compare January 6, 2025 14:33
Copy link
Contributor

github-actions bot commented Jan 6, 2025

🚀 Deployed on https://pr-3477--spectrum-css.netlify.app

@castastrophe castastrophe force-pushed the feat-create-css-bundle branch 5 times, most recently from b7360e9 to 69b9894 Compare January 6, 2025 17:12
Copy link
Collaborator

@5t3ph 5t3ph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clean command didn't work as expected, but otherwise I tested in a CodePen and styles seemed fully available 🙌

@@ -17,6 +17,7 @@
"build:docs": "nx build storybook --output-dir ../dist/",
"build:preview": "nx build storybook",
"builder": "nx run-many --target build report --projects",
"bundle": "nx build bundle",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clean command didn't actually remove tools/bundle/dist, here's the output:
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It won't if it's cached but if I set clean commands to ignore the cache by default, they will run every build command every time, even if it should be cached. I could update the package.json clean command to skip cache though.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure it's a problem, just reporting since you had noted the command. Practically speaking, I'm not sure there's a reason to do this command adhoc so maybe it's not an issue worth spending time on?

@castastrophe castastrophe force-pushed the feat-create-css-bundle branch from b29b35b to 4bc2886 Compare January 6, 2025 19:02
@cdransf
Copy link
Member

cdransf commented Jan 6, 2025

The clean command didn't work as expected, but otherwise I tested in a CodePen and styles seemed fully available 🙌

I'm seeing the same issue. The contributors in the generated package.json may need an update as well.

@castastrophe castastrophe force-pushed the feat-create-css-bundle branch from 4bc2886 to 8f892bf Compare January 6, 2025 19:08
@castastrophe castastrophe force-pushed the feat-create-css-bundle branch from 8f892bf to b91e385 Compare January 6, 2025 21:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
build Issues associated with the build process; often a refactor ready-for-review run_vrt For use on PRs looking to kick off VRT size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants