search

diete-design / diete.design

https://diete.design
MIT License
0 stars 0 forks source link

Custom CSS selector passed in as class prop is not used #37

Closed agazso closed 1 month ago

agazso commented 1 month ago

For example the Button component has a prop called class but when trying to pass in a custom CSS selector it is ignored.

Here is a screenshot of an example I am trying to use.

gnome-shell-screenshot-e13tsw

vojtechsimetka commented 1 month ago

This is expected behaviour. The svelte compiler does not recognize class on custom components and hence thinks the css rule is not being used and in the optimize step removes the style definitions from the compiled css. Svelte 5 might change it https://github.com/sveltejs/svelte/issues/8538 , but for now this is the conclusion https://github.com/sveltejs/svelte/issues/2870 . I personally don't agree with the decision Svelte team took. There are workarounds, so if you want to make it work you have few options (sorted by my personal prefference):

  1. Consider whether you need to solve this directly on the Button component. Maybe it should be handled with a wrapper div (layout things generally should be handled this way)
  2. Use :global modifier, here .container :global(.copy-button) { ... }, which makes sure the copy-button is not stripped by svelte compiler. The downside is, that if the button itself or it's children use this class, you will affect them as well. But this is why in the first place we allow class to be passed to our components (see the end of "Describe the problem" chapter, not the proposed solution https://github.com/sveltejs/svelte/issues/8345 )
  3. See if we can prevent svelte compile process from optimizing away these styles. Hot candidates how to solve this is:
  4. Put the .copy-button in a separate css file which is imported here. The actual class .copy-button is present on the button, it's just that the styles are stripped. However, importing the rules from imported css file makes them global styles.
  5. Put the .copy-button class styles to global stylesheed app.pcss
agazso commented 1 month ago

Okay, this is not great, but I worked it around with a wrapper div.