8000 Support the <attr-type> production · Issue #4030 · sass/sass · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Support the <attr-type> production #4030

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.

Sign up for GitHub

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

Jump to bottom
Open
5 of 8 tasks
Goodwine opened this issue Feb 12, 2025 · 5 comments
Open
5 of 8 tasks

Support the <attr-type> production #4030

Goodwine opened this issue Feb 12, 2025 · 5 comments
Labels
CSS compatibility Support the CSS spec enhancement New feature or request requires deprecation Blocked on a deprecation cycle

Comments

@Goodwine
Copy link
Member
Goodwine commented Feb 12, 2025 •
edited by nex3
Loading

Deprecation

Final Changes

CSS has an attr() function which can have a nested type() function call for an argument. The type() function accepts a "syntax argument" which is passed as an angle bracketed string, as in <number>.

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Example of valid CSS (I think):

.a {
  content: attr(id type(<custom-ident>))
}

This throws an error when passed to Sass as a .scss file (playground):

expected ")".
  ╷
2 │   content: attr(id type(<custom-ident>))
  │                         ^
  ╵
  - 2:25  root stylesheet

Workaround

One workaround that can be used is quoting the "syntax" value, and using interpolation or string.unquote() to unquote it. For example:

.a {
  content: attr(id type(#{'<custom-ident>'}))
}
@nex3
Copy link
Contributor
nex3 commented Feb 12, 2025

Although MDN reports this as unsupported on all browsers, this codepen demonstrates that it does seem to work on Chrome at least as of v133, so we should support it (probably by declaring type() a special function).

@nex3 nex3 transferred this issue from sass/dart-sass Feb 12, 2025
@nex3 nex3 added enhancement New feature or request CSS compatibility Support the CSS spec labels Feb 12, 2025
@nex3 nex3 changed the title Sass doesn't support "syntax arguments" Support the <attr-type> production Feb 13, 2025
@nex3 nex3 mentioned this issue Feb 13, 2025
Merged
@nex3 nex3 self-assigned this Feb 13, 2025
@nex3 nex3 mentioned this issue Feb 15, 2025
Merged
@nex3
Copy link
Contributor
nex3 commented Feb 18, 2025

All right, the proposal has landed. It does involve a breaking change, but it's also a CSS support feature, so I'll give it two weeks for public comment before we implement the deprecation.

@nex3
Copy link
Contributor
nex3 commented Mar 7, 2025

It's been two weeks without comment, so I'm going to mark this as accepted and start work on implementing phase 1.

This was referenced Mar 7, 2025
Open
Open
Open
Merged
Merged
@nex3 nex3 added the requires deprecation Blocked on a deprecation cycle label Mar 17, 2025
@nex3 nex3 removed their assignment Mar 17, 2025
@Arkellys
Copy link
Arkellys commented Apr 27, 2025 •
edited
Loading

Hello! Will the implementation also allow using attr <color> in rgba function?

color: rgba(attr(data-color type(<color>)), 0.7);

It currently throws an error with the workaround:

$color: attr(data-color type(#{"<color>"})) is not a color.

@nex3
Copy link
Contributor
nex3 commented Apr 28, 2025

No. The two-argument rgba() function is not a CSS feature, and so it can only take Sass color values because it works exclusively at build-time. We could theoretically make it emit rgb(from $color r g b / 0.7), but that would require either A) carefully examining any strings that are passed in to determine whether they're actually valid <color> values of any kind CSS accepts which would be a massive amount of complexity, or B) allowing all strings and assuming they're valid colors which would severely limit the function's ability to catch errors eagerly. It makes much more sense for users to just write the relative color syntax manually if they want to take an existing color value and change the opacity.

@i23098 i23098 mentioned this issue May 20, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS compatibility Support the CSS spec enhancement New feature or request requires deprecation Blocked on a deprecation cycle
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@nex3 @Goodwine @Arkellys
0