Initial @container support #476

zakybilfagih · 2024-06-05T11:07:57Z

add more test
support for interpolation
~~support style-query~~

<query-in-parens>     = ( <container-query> )
                      | ( <size-feature> )
                      | style( <style-query> )
                      | <general-enclosed>

vercel · 2024-06-05T11:08:01Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
styled-ppx	⬜️ Ignored (Inspect)	Visit Preview		Jul 5, 2024 3:36am

packages/ppx/src/css_to_emotion.re

packages/ppx/test/native/At_rule_test.re

davesnx · 2024-06-28T11:49:25Z

packages/ppx/test/css-support/containment-module.t/run.t

+  CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|normal|js})|]);
+  CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|size|js})|]);
+  CssJs.style([|CssJs.unsafe({js|containerType|js}, {js|inline-size|js})|]);
+  CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|none|js})|]);
+  CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|x|js})|]);
+  CssJs.style([|CssJs.unsafe({js|containerName|js}, {js|x y|js})|]);
+  CssJs.style([|CssJs.unsafe({js|container|js}, {js|none|js})|]);
+  CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / normal|js})|]);
+  CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / size|js})|]);
+  CssJs.style([|CssJs.unsafe({js|container|js}, {js|x / inline-size|js})|]);
+  CssJs.style([|CssJs.unsafe({js|container|js}, {js|x y / size|js})|]);


There's no CssJs.container under properties, do you think is worth adding those?

Definitely worth adding, about the naming though. Do you think this works?
CssJs.containerQuery for the at-rule and CssJs.container for the property

CssJs.at_container or atContainer is better no?

atContainer it is

@davesnx

CHANGES: ## 0.59.0 - [BREAKING] Change entry point module `CSS` (from `CssJs`) on `styled-ppx.melange`, `styled-ppx.native` and `styled-ppx.rescript` (davesnx/styled-ppx#490) (@davesnx) - [FEATURE] Add support and interpolation for `zoom`, `will-change` and `user-select` properties (davesnx/styled-ppx#489) (@davesnx) - [FEATURE] Support content with interpolation davesnx/styled-ppx#494 (@davesnx) - [FEATURE] Support define CSS variables in global and use CSS variables in properties davesnx/styled-ppx#492 (@davesnx) - [FEATURE] Support overflow with 2 values - [FEATURE] Make animation-name abstract (@davesnx) - [FIX] Add 100 unsupported properties, which will render properly (davesnx/styled-ppx#489) (@davesnx) - [FIX] Inline all CSS.Var and CSS.Cascading in properties (davesnx/styled-ppx#495) (@davesnx) - [FIX] Color with support for rgba/hsla and others with calc/min and max (davesnx/styled-ppx#495) (@davesnx) - [FIX] Warning of kebab-case on emotion client side (davesnx/styled-ppx#493) (@davesnx) ## 0.58.1 - [BREAKING] FontFamilyName.t is now a string (@davesnx) - [FIX] Make unsafe calls from "Cascading" be camelCase to avoid emotion's warning davesnx/styled-ppx#488 (@davesnx) - [FIX] Keep classname when ampersand is at the end of the selector (@davesnx) - [FIX] Fix fontFace in both melange and native (@davesnx) ## 0.58.0 - [FEATURE] Initial @container support davesnx/styled-ppx#476 (@zakybilfagih) - [FIX] Make selector nested maintain other selectors davesnx/styled-ppx#486 (@davesnx) - [BREAKING] Remove `Css` module, `styled_label` and friends davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css and styled-ppx.emotion into styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Remove PseudoClass and PseudoClassParam davesnx/styled-ppx#487 (@davesnx) - Remove functor from Css_Js_Core davesnx/styled-ppx#487 (@davesnx) - Remove melange.js and melange.belt from styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - Remove server-reason-react.js and server-reason-react.belt from styled-ppx.native davesnx/styled-ppx#487 (@davesnx) ## 0.57.1 - Remove public_name from alcotest_extra davesnx/styled-ppx#484 (@davesnx) - Fix nesting for selectors (and pseudo) in native davesnx/styled-ppx#483 (@davesnx) ## 0.57.0 - Improvement for locations in both code-gen and error reporting by @davesnx in davesnx/styled-ppx#456 - Support css min and max functions by @lubegasimon in davesnx/styled-ppx#411 - Update docs by @zakybilfagih in davesnx/styled-ppx#457 - update server-reason-react pin to main branch by @zakybilfagih in davesnx/styled-ppx#460 - Native support for styled.{{tag}} by @zakybilfagih in davesnx/styled-ppx#461 - Fix linear-gradient and radial-gradient by @davesnx in davesnx/styled-ppx#464 - Add getting started docs by @zakybilfagih in davesnx/styled-ppx#459 - escape curly on remote markdown content by @zakybilfagih in davesnx/styled-ppx#466 - Add Melange and native instructions by @davesnx in davesnx/styled-ppx#465 - Global styles for native server on emotion by @pedrobslisboa in davesnx/styled-ppx#468 - Style HTML tag by @pedrobslisboa in davesnx/styled-ppx#467 - [emotion native] Fix nested pseudoelements by @davesnx in davesnx/styled-ppx#470 - Transform with variable handle unsafe interpolation by @zakybilfagih in davesnx/styled-ppx#471 - Add depext for @emotion/css >= 11.0.0 by @feihong in davesnx/styled-ppx#473 - Add support for transition by @zakybilfagih in davesnx/styled-ppx#472 - Fix animation codegen by @zakybilfagih in davesnx/styled-ppx#475 - Fix error line number coming from parser by @zakybilfagih in davesnx/styled-ppx#478 - Polish emotion-native by @davesnx in davesnx/styled-ppx#481 - Rename `render_style_tag` to `get_stylesheet` (@davesnx) - Docs: Explain show server rendered stylesheets work natively by @ManasJayanth in davesnx/styled-ppx#480 ## 0.56.0 - Improvement for locations in both code-gen and error reporting (davesnx/styled-ppx#456) by @davesnx - Support css min and max functions (davesnx/styled-ppx#411) by @lubegasimon - Update docs (davesnx/styled-ppx#457) by @zakybilfagih - Native support for styled.{{tag}} (davesnx/styled-ppx#461) by @zakybilfagih - background-clip: text support by @davesnx - Fix linear-gradient and radial-gradient (davesnx/styled-ppx#464) by @davesnx - Rename emotion-hash into murmur2 and remove public testing cli by @davesnx - Use server-reason-react from opam by @davesnx

@davesnx

CHANGES: ## 0.59.0 - [BREAKING] Change entry point module `CSS` (from `CssJs`) on `styled-ppx.melange`, `styled-ppx.native` and `styled-ppx.rescript` (davesnx/styled-ppx#490) (@davesnx) - [FEATURE] Add support and interpolation for `zoom`, `will-change` and `user-select` properties (davesnx/styled-ppx#489) (@davesnx) - [FEATURE] Support content with interpolation davesnx/styled-ppx#494 (@davesnx) - [FEATURE] Support define CSS variables in global and use CSS variables in properties davesnx/styled-ppx#492 (@davesnx) - [FEATURE] Support overflow with 2 values - [FEATURE] Make animation-name abstract (@davesnx) - [FIX] Add 100 unsupported properties, which will render properly (davesnx/styled-ppx#489) (@davesnx) - [FIX] Inline all CSS.Var and CSS.Cascading in properties (davesnx/styled-ppx#495) (@davesnx) - [FIX] Color with support for rgba/hsla and others with calc/min and max (davesnx/styled-ppx#495) (@davesnx) - [FIX] Warning of kebab-case on emotion client side (davesnx/styled-ppx#493) (@davesnx) ## 0.58.1 - [BREAKING] FontFamilyName.t is now a string (@davesnx) - [FIX] Make unsafe calls from "Cascading" be camelCase to avoid emotion's warning davesnx/styled-ppx#488 (@davesnx) - [FIX] Keep classname when ampersand is at the end of the selector (@davesnx) - [FIX] Fix fontFace in both melange and native (@davesnx) ## 0.58.0 - [FEATURE] Initial @container support davesnx/styled-ppx#476 (@zakybilfagih) - [FIX] Make selector nested maintain other selectors davesnx/styled-ppx#486 (@davesnx) - [BREAKING] Remove `Css` module, `styled_label` and friends davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css and styled-ppx.emotion into styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Remove PseudoClass and PseudoClassParam davesnx/styled-ppx#487 (@davesnx) - Remove functor from Css_Js_Core davesnx/styled-ppx#487 (@davesnx) - Remove melange.js and melange.belt from styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - Remove server-reason-react.js and server-reason-react.belt from styled-ppx.native davesnx/styled-ppx#487 (@davesnx) ## 0.57.1 - Remove public_name from alcotest_extra davesnx/styled-ppx#484 (@davesnx) - Fix nesting for selectors (and pseudo) in native davesnx/styled-ppx#483 (@davesnx) ## 0.57.0 - Improvement for locations in both code-gen and error reporting by @davesnx in davesnx/styled-ppx#456 - Support css min and max functions by @lubegasimon in davesnx/styled-ppx#411 - Update docs by @zakybilfagih in davesnx/styled-ppx#457 - update server-reason-react pin to main branch by @zakybilfagih in davesnx/styled-ppx#460 - Native support for styled.{{tag}} by @zakybilfagih in davesnx/styled-ppx#461 - Fix linear-gradient and radial-gradient by @davesnx in davesnx/styled-ppx#464 - Add getting started docs by @zakybilfagih in davesnx/styled-ppx#459 - escape curly on remote markdown content by @zakybilfagih in davesnx/styled-ppx#466 - Add Melange and native instructions by @davesnx in davesnx/styled-ppx#465 - Global styles for native server on emotion by @pedrobslisboa in davesnx/styled-ppx#468 - Style HTML tag by @pedrobslisboa in davesnx/styled-ppx#467 - [emotion native] Fix nested pseudoelements by @davesnx in davesnx/styled-ppx#470 - Transform with variable handle unsafe interpolation by @zakybilfagih in davesnx/styled-ppx#471 - Add depext for @emotion/css >= 11.0.0 by @feihong in davesnx/styled-ppx#473 - Add support for transition by @zakybilfagih in davesnx/styled-ppx#472 - Fix animation codegen by @zakybilfagih in davesnx/styled-ppx#475 - Fix error line number coming from parser by @zakybilfagih in davesnx/styled-ppx#478 - Polish emotion-native by @davesnx in davesnx/styled-ppx#481 - Rename `render_style_tag` to `get_stylesheet` (@davesnx) - Docs: Explain show server rendered stylesheets work natively by @ManasJayanth in davesnx/styled-ppx#480 ## 0.56.0 - Improvement for locations in both code-gen and error reporting (davesnx/styled-ppx#456) by @davesnx - Support css min and max functions (davesnx/styled-ppx#411) by @lubegasimon - Update docs (davesnx/styled-ppx#457) by @zakybilfagih - Native support for styled.{{tag}} (davesnx/styled-ppx#461) by @zakybilfagih - background-clip: text support by @davesnx - Fix linear-gradient and radial-gradient (davesnx/styled-ppx#464) by @davesnx - Rename emotion-hash into murmur2 and remove public testing cli by @davesnx - Use server-reason-react from opam by @davesnx

@davesnx

CHANGES: ## 0.59.0 - [BREAKING] Change entry point module `CSS` (from `CssJs`) on `styled-ppx.melange`, `styled-ppx.native` and `styled-ppx.rescript` (davesnx/styled-ppx#490) (@davesnx) - [FEATURE] Add support and interpolation for `zoom`, `will-change` and `user-select` properties (davesnx/styled-ppx#489) (@davesnx) - [FEATURE] Support content with interpolation davesnx/styled-ppx#494 (@davesnx) - [FEATURE] Support define CSS variables in global and use CSS variables in properties davesnx/styled-ppx#492 (@davesnx) - [FEATURE] Support overflow with 2 values - [FEATURE] Make animation-name abstract (@davesnx) - [FIX] Add 100 unsupported properties, which will render properly (davesnx/styled-ppx#489) (@davesnx) - [FIX] Inline all CSS.Var and CSS.Cascading in properties (davesnx/styled-ppx#495) (@davesnx) - [FIX] Color with support for rgba/hsla and others with calc/min and max (davesnx/styled-ppx#495) (@davesnx) - [FIX] Warning of kebab-case on emotion client side (davesnx/styled-ppx#493) (@davesnx) ## 0.58.1 - [BREAKING] FontFamilyName.t is now a string (@davesnx) - [FIX] Make unsafe calls from "Cascading" be camelCase to avoid emotion's warning davesnx/styled-ppx#488 (@davesnx) - [FIX] Keep classname when ampersand is at the end of the selector (@davesnx) - [FIX] Fix fontFace in both melange and native (@davesnx) ## 0.58.0 - [FEATURE] Initial @container support davesnx/styled-ppx#476 (@zakybilfagih) - [FIX] Make selector nested maintain other selectors davesnx/styled-ppx#486 (@davesnx) - [BREAKING] Remove `Css` module, `styled_label` and friends davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css and styled-ppx.emotion into styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Merge styled-ppx.css-native and styled-ppx.emotion-native into styled-ppx.native davesnx/styled-ppx#487 (@davesnx) - [BREAKING] Remove PseudoClass and PseudoClassParam davesnx/styled-ppx#487 (@davesnx) - Remove functor from Css_Js_Core davesnx/styled-ppx#487 (@davesnx) - Remove melange.js and melange.belt from styled-ppx.melange davesnx/styled-ppx#487 (@davesnx) - Remove server-reason-react.js and server-reason-react.belt from styled-ppx.native davesnx/styled-ppx#487 (@davesnx) ## 0.57.1 - Remove public_name from alcotest_extra davesnx/styled-ppx#484 (@davesnx) - Fix nesting for selectors (and pseudo) in native davesnx/styled-ppx#483 (@davesnx) ## 0.57.0 - Improvement for locations in both code-gen and error reporting by @davesnx in davesnx/styled-ppx#456 - Support css min and max functions by @lubegasimon in davesnx/styled-ppx#411 - Update docs by @zakybilfagih in davesnx/styled-ppx#457 - update server-reason-react pin to main branch by @zakybilfagih in davesnx/styled-ppx#460 - Native support for styled.{{tag}} by @zakybilfagih in davesnx/styled-ppx#461 - Fix linear-gradient and radial-gradient by @davesnx in davesnx/styled-ppx#464 - Add getting started docs by @zakybilfagih in davesnx/styled-ppx#459 - escape curly on remote markdown content by @zakybilfagih in davesnx/styled-ppx#466 - Add Melange and native instructions by @davesnx in davesnx/styled-ppx#465 - Global styles for native server on emotion by @pedrobslisboa in davesnx/styled-ppx#468 - Style HTML tag by @pedrobslisboa in davesnx/styled-ppx#467 - [emotion native] Fix nested pseudoelements by @davesnx in davesnx/styled-ppx#470 - Transform with variable handle unsafe interpolation by @zakybilfagih in davesnx/styled-ppx#471 - Add depext for @emotion/css >= 11.0.0 by @feihong in davesnx/styled-ppx#473 - Add support for transition by @zakybilfagih in davesnx/styled-ppx#472 - Fix animation codegen by @zakybilfagih in davesnx/styled-ppx#475 - Fix error line number coming from parser by @zakybilfagih in davesnx/styled-ppx#478 - Polish emotion-native by @davesnx in davesnx/styled-ppx#481 - Rename `render_style_tag` to `get_stylesheet` (@davesnx) - Docs: Explain show server rendered stylesheets work natively by @ManasJayanth in davesnx/styled-ppx#480 ## 0.56.0 - Improvement for locations in both code-gen and error reporting (davesnx/styled-ppx#456) by @davesnx - Support css min and max functions (davesnx/styled-ppx#411) by @lubegasimon - Update docs (davesnx/styled-ppx#457) by @zakybilfagih - Native support for styled.{{tag}} (davesnx/styled-ppx#461) by @zakybilfagih - background-clip: text support by @davesnx - Fix linear-gradient and radial-gradient (davesnx/styled-ppx#464) by @davesnx - Rename emotion-hash into murmur2 and remove public testing cli by @davesnx - Use server-reason-react from opam by @davesnx

zakybilfagih added 8 commits June 5, 2024 17:57

add CssJs.atRule

17f99da

add container relative length

584efd4

add AT_CONTAINER token to the lexer

20a90f3

add grammar on parser to support container query

9033752

render container query

be84304

add container, container-name, container-type property support

5346759

add container usage example on e2e, make ui.re identical

1ea9057

update spec snapshot

15f5f04

zakybilfagih and others added 7 commits June 6, 2024 15:41

make interpolation work

0700da2

add missing at-rule name, fix at rule lexing

c87d482

add tests

53a8115

Merge branch 'main' into add-container-support

f019155

Merge branch 'main' into add-container-support

cb4d385

fix at rule name loc

ec48964

make mf_plain accept values

f3bd553

davesnx reviewed Jul 4, 2024

View reviewed changes

mackarelfish added 3 commits July 4, 2024 21:08

Merge branch 'main' into add-container-support

c3da60b

fix container query api

61de085

change name from containerQuery to atContainer

cead684

davesnx merged commit 50a8c44 into davesnx:main Jul 5, 2024
7 checks passed

davesnx mentioned this pull request Jul 18, 2024

[new release] styled-ppx (0.59.0) ocaml/opam-repository#26258

Closed

davesnx mentioned this pull request Jul 23, 2024

[new release] styled-ppx (0.59.1) ocaml/opam-repository#26276

Merged

zakybilfagih mentioned this pull request Aug 11, 2024

Support @container #422

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial @container support #476

Initial @container support #476

zakybilfagih commented Jun 5, 2024 •

edited

Loading

vercel bot commented Jun 5, 2024 •

edited

Loading

davesnx Jun 28, 2024

zakybilfagih Jul 4, 2024

davesnx Jul 4, 2024 •

edited

Loading

zakybilfagih Jul 5, 2024

Initial @container support #476

Initial @container support #476

Conversation

zakybilfagih commented Jun 5, 2024 • edited Loading

vercel bot commented Jun 5, 2024 • edited Loading

davesnx Jun 28, 2024

Choose a reason for hiding this comment

zakybilfagih Jul 4, 2024

Choose a reason for hiding this comment

davesnx Jul 4, 2024 • edited Loading

Choose a reason for hiding this comment

zakybilfagih Jul 5, 2024

Choose a reason for hiding this comment

zakybilfagih commented Jun 5, 2024 •

edited

Loading

vercel bot commented Jun 5, 2024 •

edited

Loading

davesnx Jul 4, 2024 •

edited

Loading