Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: allow objects/arrays for style attribute #15311

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

Open
adiguba wants to merge 5 commits into sveltejs:main
base: main
Choose a base branch
Loading
from adiguba:dev/style-cssx

Conversation

Copy link
Contributor

@adiguba adiguba commented Feb 16, 2025

style can receive strings/arrays/objects to build the style CSS text :

  • strings are left untouched.
  • the key/values of objects are transformed into CSS property/value, by converting property name to kebab-case.
  • arrays are flatten and joined.

All these lines are equivalent :

<div style="font-size: 1em; opacity: 0"></div>
<div style={{'font-size': '1em', opacity: 0}}></div>
<div style={{fontSize: '1em', opacity: 0}}></div>
<div style={{font_size: '1em', opacity: 0}}></div>
<div style={['font-size: 1em', 'opacity: 0']}></div>
<div style={['font-size: 1em', {opacity: 0}]}></div>

Notes :

  • I added a test but it currently fail due to issue Spread is not consistent with attribute for style #15309
    Will fix it according to the decision of this issue...
  • I wrote the docs, but I am not an english speaker, so this should be read/corrected.
  • I have a doubt for line 58 of src/compiler/phases/2-analyze/visitors/Attribute.js
    For class there a call to mark_subtree_dynamic(context.path) but I don't know if this is required here.

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.
  • If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

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

max-got, hawk93, levibassey, JonathonRP, rChaoz, negue, dannflor, bobbymannino, luppiale, jpaylor, and tijnjh reacted with thumbs up emoji negue and tlrib reacted with eyes emoji
Copy link

changeset-bot bot commented Feb 16, 2025

🦋 Changeset detected

Latest commit: e6717ca

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

Copy link

Copy link
Contributor

Playground 

pnpm add https://pkg.pr.new/svelte@15311

Copy link

I think allowing multiple casings is actually a mistake, as it would remove what would probably be the biggest value added by this feature, which would be intellisense

Copy link
Member

I like this, but I'm not sure why arrays would be allowed in the style attribute, aren't objects sufficient for most scenarios?

Copy link
Contributor Author

adiguba commented Feb 16, 2025

@Thiagolino8 : personally I like the idea of having the choice between snake_case or camelCase.
But if multiple casings will cause problems with intellisense, we can restrict to one (but whitch one ?)

@Ocean-OS : like for classes, arrays allow to simply extends a value received from props, who can be a string or an object...
Ocean-OS reacted with thumbs up emoji

Copy link

I cast a vote for camelCase, react has a similar pattern already using camelCase for style object arg
Serator and cStralpt reacted with thumbs up emoji

Copy link

I cast a vote for camelCase, react has a similar pattern already using camelCase for style object arg

React uses camelCase for everything, it's not exactly a model to be followed
CSS properties already have a standard, kebab-case, and it is already used in the style prop in string form
It makes more sense to maintain the existing standard than to create yet another parallel one
Not being able to use the shorthand form is a small price to pay

Copy link

@Thiagolino8, I meant more looking at many frameworks that already have capability for object style, react/solidjs and I'm not sure about vue. But I'd love kabob-case if that was allowed for objects shorthand.

Copy link
Contributor Author

adiguba commented Feb 28, 2025

Personally, I would go for all 3 syntaxes, in order to be compatible with any other external API
There no conflicts between them, and the style attributes can accept multiples values, so no duplication problem.
luppiale, JonathonRP, and hawk93 reacted with thumbs up emoji

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

feat: allow objects for style attribute

AltStyle によって変換されたページ (->オリジナル) /