search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.7k stars 262 forks source link

Evaluate svelte-package and inlining styles #1871

Open theetrain opened 10 months ago

theetrain commented 10 months ago

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

laurenceokite commented 2 months ago

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

metonym commented 2 months ago

@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 commented 2 months ago

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

metonym commented 2 months ago

@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 commented 2 months ago

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