carbon-design-system / carbon-preprocess-svelte

Svelte preprocessors for the Carbon Design System
Apache License 2.0
68 stars 6 forks source link

Notification breaks optimizeCss() #39

Closed nziu closed 2 years ago

nziu commented 2 years ago

spliced strings unexpectedly retain all styles

https://github.com/carbon-design-system/carbon-components-svelte/blob/c87196c16b344e041cf002f0d51a7c738eacb5d0/src/Notification/NotificationIcon.svelte#L34-L39

<svelte:component
  this="{icons[kind]}"
  size="{20}"
  title="{iconDescription}"
  class="bx--{notificationType}-notification__icon"
/>

https://github.com/carbon-design-system/carbon-components-svelte/blob/c87196c16b344e041cf002f0d51a7c738eacb5d0/src/Notification/NotificationButton.svelte#L39-L45

  <svelte:component
    this="{icon}"
    size="{20}"
    title="{title}"
    class="bx--{notificationType}-notification__close-icon"
  />
</button>

compile result

function switch_props(ctx) {
  return {
    props: {
      size: 20,
      title: /*iconDescription*/ ctx[2],
      class: "bx--" + /*notificationType*/ ctx[1] + "-notification__icon",
    },
  };
}
metonym commented 2 years ago

Thanks for reporting. NotificationButton, NotificationIcon no longer use dynamic class names in carbon-components-svelte@0.67.6.

Please let me know if this issue persists.