feat(styles,carbon-react): switch to cds prefix

[joshblack]

Update our beta packages to use cds as the default prefix instead of bx. This PR includes two significant changes:

• Update the default $prefix variable in @carbon/styles to be cds. It is still configurable under scss/_config.scss
• Add a temporary src/prefix.js file in @carbon/react that changes the prefix in carbon-components. This will be removed in v11 and replaced by PrefixContext

Changelog

New

Changed

• Switch default prefix from bx to cds for styles and React

Removed

Testing / Reviewing

• View the deployed v11 storybook and verify that:
  • Styles are using the cds prefix
  • CSS Custom Properties are using the cds prefix
  • React components are using the cds prefix

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 33b4672

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/614b612055799c00071af7fb

😎 Browse the preview: https://deploy-preview-9719--carbon-react-next.netlify.app

[abbeyhrt]

Out of curiosity, why do these files (really all of them) have to be listed as sideEffects?

[tay1orjones]

I'm also curious. My guess is since it's pulled from carbon-components these should never be pruned when tree shaking?

[joshblack]

@abbeyhrt @tay1orjones basically these modules are not "pure" because they cause side effects in other modules (feature flags, components).

Bundlers like webpack/rollup will assume modules are pure by default if sideEffects: false is listed. This means that if exports from these entrypoints are used that the bundler will actually drop the file from the final output. This is not what we want because we always want these files to be included and their side effects run.

Annotating these files as having side effects ensures that they are included in the final bundle even though we aren't using exports from these files.

Hope this helps!

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 33b4672

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/614b6120ae9595000755b824

😎 Browse the preview: https://deploy-preview-9719--carbon-components-react.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 33b4672

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/614b612030ec6f00083bc23a

😎 Browse the preview: https://deploy-preview-9719--carbon-elements.netlify.app

[jnm2377]

YAY!!! It's working! 🔥