Skip to content
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

feat: CSS contains support #2744

Merged
merged 8 commits into from
Nov 13, 2022
Merged

feat: CSS contains support #2744

merged 8 commits into from
Nov 13, 2022

Conversation

idoros
Copy link
Collaborator

@idoros idoros commented Sep 29, 2022 •
edited
Loading

This PR adds support for CSS containers

  • core support
    • support namespaced container symbol from container-name and container declarations
    • @container at-rule
    • st-global support
    • import between stylesheets
    • mixin support
  • JS module
    • containers exports
    • Typescript d.ts + source maps
    • runtime module
  • integrations - webpack & rollup
  • language service
  • documentation: Docs for css contains wixplosives/stylable.io#59

@idoros idoros added feature New syntax feature or behavior core Processing and transforming logic labels Sep 29, 2022
@idoros idoros self-assigned this Sep 29, 2022
@idoros idoros force-pushed the ido/css-contains branch 3 times, most recently from dcd3caf to f050956 Compare September 29, 2022 15:02
tomrav
tomrav approved these changes Oct 23, 2022
View reviewed changes
Copy link
Collaborator

@tomrav tomrav left a comment

Choose a reason for hiding this comment

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

Another native feature scoped, hurray! 🚀

packages/module-utils/src/generate-dts-sourcemaps.ts Show resolved Hide resolved
packages/core/src/features/css-contains.ts Outdated Show resolved Hide resolved
@idoros idoros force-pushed the ido/css-contains branch 2 times, most recently from 443aaa2 to 71bf024 Compare October 24, 2022 08:10
barak007
barak007 reviewed Oct 25, 2022
View reviewed changes
Copy link
Collaborator

@barak007 barak007 left a comment

Choose a reason for hiding this comment

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

Looks amazing!
I don't think I saw usage of css custom properties in a query...but I saw that it is using "eval" value.

@idoros
Copy link
Collaborator Author

idoros commented Oct 25, 2022 •
edited
Loading

I don't think I saw usage of css custom properties in a query...but I saw that it is using "eval" value.

The params do go through evaluateValue in order handle build vars transformation (see should transform build vars in @container query test), but no handling for standalone vars without a var() function, since we don't support them yet.

In any case, the native support for this is not there at the moment: https://chromestatus.com/feature/5076875399921664

@idoros
Copy link
Collaborator Author

idoros commented Nov 10, 2022

Offline discussion update: to bring the behavior more inline with custom properties and allow easier and more predictable global definition of container names:

  • Change container/container-name decl to soft definition - meaning that it won't cause a redeclare diagnostic and override imported names with local ones.
  • st-global should mark a global name in both @container atrule and container/container-name without defining a symbol
  • new @container name; atrule with no body for hard definition + st-global to create a global symbol

@idoros
feat(review): inline definition behavior
a5cef44 
- change container decl to soft definition
- st-global just keeps value without creating a symbol
-  new `@container` atrule with no body do define a symbol
@idoros
fix: stop collecting container on syntax error
1f0dca7
@barak007 barak007 self-requested a review November 13, 2022 14:15
@idoros idoros merged commit 4816eca into master Nov 13, 2022
@idoros idoros deleted the ido/css-contains branch November 13, 2022 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tomrav tomrav tomrav approved these changes

@barak007 barak007 barak007 approved these changes

Assignees

@idoros idoros

Labels
core Processing and transforming logic feature New syntax feature or behavior
Projects
Stylable
Status: No status
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@idoros @barak007 @tomrav