fix(build): add css as having side effects

[jinlee93]

Summary:

• tokens are not being provided since css marked as side effect free https://614b969675171d003ac6f98a-jstsqkayzt.chromatic.com/?path=/story/core-components-projectcard--default
• adds css files as having side effects

Test Plan:

• LP storybook unbroken
  • install @chanzuckerberg/eds: 8.1.0-alpha.4 in LP, where 8.1.0-alpha.4 is the latest alpha publish off next
  • in traject/node_modules/@chanzuckerberg/eds/package.json change sideEffects: false to

  "sideEffects": [
    "lib/tokens/css/variables.css",
    "lib/tokens/fonts.css"
  ]
  

  • run npm run storybook and see that storybook is unbroken
    • chromatic: https://www.chromatic.com/build?appId=614b969675171d003ac6f98a&number=16062
  • alternatively install 8.1.0-alpha.5 which is alpha publish off of this branch
    • chromatic: https://www.chromatic.com/build?appId=614b969675171d003ac6f98a&number=16065
  • chromatic without lib/tokens/fonts.css in sideEffects: https://www.chromatic.com/build?appId=614b969675171d003ac6f98a&number=16064

[anniehu4]

tyty! could you add to the test plan how you verified the fix with alpha publishes?

[github-actions]

size-limit report 📦

Path	Size
components	117.02 KB (0%)
styles	3.1 KB (0%)

[codecov]

Codecov Report

Merging #1481 (93bbe05) into next (f2a6165) will decrease coverage by 0.05%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #1481      +/-   ##
==========================================
- Coverage   91.54%   91.49%   -0.05%     
==========================================
  Files         279      279              
  Lines        4234     4234              
  Branches      755      755              
==========================================
- Hits         3876     3874       -2     
- Misses        356      358       +2     
  Partials        2        2              

Impacted Files	Coverage Δ
src/components/Drawer/Drawer.tsx	91.04% <0.00%> (-2.99%)	⬇️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[anniehu4]

Follow-up to #1473

[ahuth]

What's happening on the Traject side without this?

When writing #1473, I didn't think this was necessary because Traject should be importing these explicitly.

[jinlee93]

Fonts and CSS custom properties are being lost https://www.chromatic.com/build?appId=614b969675171d003ac6f98a&number=15997

[ahuth]

Dang, thanks for digging into this. Looks like you were totally right @anniehu4.

There's still something I don't understand here about how Webpack handles tree shaking 😓

Seems like it is an intended thing, though: webpack/webpack#6741

[jinlee93]

tyty! could you add to the test plan how you verified the fix with alpha publishes?

Yup, done