Skip to content

feat: better dynamic component css props #11792

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 5 commits into from
Jun 6, 2024
Merged

feat: better dynamic component css props #11792

merged 5 commits into from
Jun 6, 2024

Conversation

paoloricciuti
Copy link
Member

@paoloricciuti paoloricciuti commented May 26, 2024

Svelte 5 rewrite

Closes #11788

Marking momentarily as draft because i need to

  • remove the unused node from component
  • fix broken tests
  • write new tests

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with feat:, fix:, chore:, or docs:.
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests and linting

  • Run the tests with pnpm test and lint the project with pnpm lint

Copy link

changeset-bot bot commented May 26, 2024

🦋 Changeset detected

Latest commit: 01e8afb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@paoloricciuti paoloricciuti marked this pull request as ready for review May 26, 2024 19:09
@paoloricciuti
Copy link
Member Author

I'm not sure what kind of test is needed here....this is about the output but i remember we don't want to overdo tests on the compiler output right?

@@ -60,8 +60,6 @@ export default test({
assert_slider_1();
component.componentName = 'Slider2';
assert_slider_2();
component.componentName = undefined;
assert.equal(window.document.querySelector('div'), null);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was confused by this deletion, and checked the current Svelte 4 REPL once more:

  • when this is falsy initially, there's a div
  • but if it's switching truhy from to falsy, then it will remove the wrapping div

--> feels like a bug in Svelte 4
--> what does this say about this change? Can we do this change after all, or not? I think having it falsy initially is very rare, so very few people would've run into this bug before. Always having the div might catch people's CSS selectors offguard.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually changed this to check that the div doesn't have a firstElementChild. But your reasoning still applies. That said i think the situations where this can trip people are the same where the component is actually there (more or less) which might be a bit more now that :has it's a bit more standard but shouldn't be that much because it's just if you are writing css based on the fact that a certain element follow another.

Copy link
Member Author

@paoloricciuti paoloricciuti May 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could it be worth passing the component to css_props to allow css_props to check for is thrutyness? And by that i mean literally the component that would be rendered...so for a normal component it would just be the component itself, for SvelteComponent the argument of this

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm inclined to ignore the falsy <svelte:component> edge case. As noted, it's already buggy (and to my knowledge no-one has encountered this bug in the wild), and even if it wasn't, the cases where your styles are affected by the presence of an unexpected <div style="display: contents"> with no children are vanishingly rare and easily worked around.

In other words I think it's fine to always have the wrapping div

@Rich-Harris Rich-Harris merged commit 6655f2c into sveltejs:main Jun 6, 2024
6 of 8 checks passed
@Rich-Harris
Copy link
Member

thanks!

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.

Svelte 5: CSS custom property wrapper is implemented incorrectly
3 participants