Skip to content

add cascade option, to prevent components inheriting styles #607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 1, 2017

Conversation

Rich-Harris
Copy link
Member

Addresses #583 by adding a cascade option. If cascade is false, and a component has a <style> attribute, all elements get the svelte-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...

@keyframes :global(my-animation) {...}

...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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant