Movatterモバイル変換

[0]ホーム
URL:

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
adiguba wants to merge5 commits intosveltejs:main
base:main
Choose a base branch
Loading
fromadiguba:dev/style-cssx

Conversation

adiguba
Copy link
Contributor

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 :

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

Notes :

  • I added a test but it currently fail due to issueSpread 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 ofsrc/compiler/phases/2-analyze/visitors/Attribute.js
    Forclass there a call tomark_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 withfeat:,fix:,chore:, ordocs:.
  • 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 withinpackages/svelte/src, add a changeset (npx changeset).

Tests and linting

  • Run the tests withpnpm test and lint the project withpnpm lint

max-got, hawk93, levibassey, JonathonRP, rChaoz, negue, dannflor, bobbymannino, and luppiale reacted with thumbs up emojinegue and tlrib reacted with eyes emoji
@changeset-botchangeset-bot
Copy link

🦋 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
NameType
sveltePatch

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

@svelte-docs-bot
Copy link

@github-actionsGitHub Actions
Copy link
Contributor

Playground

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

@Thiagolino8
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

@Ocean-OS
Copy link
Contributor

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

@adiguba
Copy link
ContributorAuthor

@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

@JonathonRP
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

@Thiagolino8
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

@JonathonRP
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.

@adiguba
Copy link
ContributorAuthor

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 freeto 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
5 participants
@adiguba@Thiagolino8@Ocean-OS@JonathonRP@Rich-Harris
[8]ページ先頭
©2009-2025 Movatter.jp