Evaluate svelte-package and inlining styles

[theetrain]

Why

svelte-package helps convert component types and preprocessors into packaged components with separate type declarations files. With this tool, it may be possible to:

1. Write components in Typescript, and import Carbon Sass within <style lang="sass">
2. Have output component include separate .svelte and .svelte.d.ts files, and Sass styles be converted to scoped CSS

If proven successful, users of carbon-components-svelte should be able to import components without needing to manually import entire CSS themes, nor have to install Sass just to include component-specific styles. And they can add a global theme if they wish to use a theme other than the default (white).

Out of scope

• This is blocked by Carbon v11 style integration (component checklist) #1629.
• Add GlobalTheme chore: rename Theme to GlobalTheme #1702

[laurenceokite]

Is this the only issue that addresses scoping? Is there a way to only have styles apply to imported components?

[metonym]

@laurenceokite Currently, carbon-preprocess-svelte offers a Vite plugin that will prune unused Carbon CSS in the build step. I would recommend trying that if using the pre-generated CSS from this library.

[laurenceokite]

Thanks, and this should address the styling that the css file applies globally to semantic html tags?

[metonym]

@laurenceokite That's correct; the optimizeCss plugin is cautious in its approach. To minimize false positives, the plugin will only remove Carbon-specific classes (e.g., classes starting with .bx-- prefix) for unused components. For example, .bx--breadcrumbs will be removed if Breadcrumbs is not used.

For reference, here are some basic, example set-ups.

[laurenceokite]

Thanks a lot, I appreciate the detailed and expeditious response!