add cascade option, to prevent components inheriting styles #607
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Addresses #583 by adding a
cascade
option. Ifcascade
is false, and a component has a<style>
attribute, all elements get thesvelte-123xyz
attribute (not just the component's top-level elements), and selectors are transformed in such a way that they only apply to the component's own elements, not to child components.This seems to be more in line with the wider community's expectations of how CSS scoping should work, and makes it easier to do certain forms of analysis such as identifying redundant selectors, and omitting the
svelte-123xyz
attribute on nodes that won't benefit from it. I'm therefore proposing that we remove the option in v2 and never cascade styles, unless selectors have been wrapped with the:global(...)
escape hatch (which is the convention used by css-modules and styled-jsx).Keyframes are a little tricky — this...
...isn't valid CSS, so it causes problems with syntax highlighting and linting in editors, and with parsing during compilation. For that reason, this PR does not use
:global(...)
for animation names as css-modules does. Instead, animation names can be marked as global with the-global-
prefix (which is simply removed during transformation):@keyframes -global-my-animation {...}
What does everyone think?