search

boltdesignsystem / bolt

The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
https://boltdesignsystem.com
MIT License
291 stars 46 forks source link

[6.x] DS-909 Minify CSS in JS #2590

Closed danielamorse closed 1 year ago

danielamorse commented 1 year ago

Jira

https://pegadigitalit.atlassian.net/browse/DS-909 https://pegadigitalit.atlassian.net/browse/DS-910

Summary

Minify CSS that is loaded by JS, e.g. by our web components.

Details

This step was unintentionally removed in the Webpack 5 upgrade. I've added it back with a comment so that we don't remove it again - unless it is no longer necessary.

How to test

  1. Review code
  2. Reproduce the issue
    • Checkout release/6.x
    • Delete www/build to remove any old build artifacts
    • Open packages/components/bolt-card-replacement/src/card-replacement/card-replacement.scss and replace the entire file with: 
      
/* ------------------------------------ *\
Comment test 12345
\* ------------------------------------ */

.foo { border: 1px solid red; }


  - Run `yarn build`
  - Open `www/build/bolt-card-replacement-bundle-HASH-GOES-HERE.js` and search for `12345`
  - You should see the comment
3. Verify the fix
 - Repeat step 2 on this feature branch (`feature/DS-909-cleanup-build-code`).
 - Be sure to run `yarn setup` to get the `cssnano` dependency.
 - You should not see the comment in the JS bundle. Search instead for `.foo`. You'll see only minified CSS.