chore: bump csstype from 3.1.3 to 3.2.3 (#1867)

* chore: bump csstype from 3.1.3 to 3.2.3

- Update csstype version in package.json, packages/jest/package.json, and packages/react/package.json
- Update AtRules type mapping in babel-plugin to reflect csstype 3.2.3 changes:
  - Remove @scroll-timeline (abandoned CSS proposal)
  - Remove @Viewport (obsolete, no modern browser support)
  - Add @container (CSS Container Queries)
  - Add @position-try (CSS Anchor Positioning)
  - Add @view-transition (View Transitions API)
- Add changeset documenting the upgrade and rationale

* docs: update changeset with detailed explanation of csstype bump and @container fix

- Clarify that @container was partially supported but missing from cssMap validation
- Explain what the atRules lookup table does
- Update version bumps to minor for babel-plugin (new @container support)
- Add detailed rationale for removed at-rules
- Explain impact on cssMap validation

* style: format changeset with prettier

* feat: add support for :popover-open pseudo-class

- Add '&:popover-open' to CSSPseudoClasses type in packages/react/src/types.ts
- This pseudo-class is now available in csstype 3.2.3
- Add comprehensive test in packages/react/src/css-map/__tests__/index.test.tsx
  to verify popover-open works correctly with cssMap
- Test verifies base opacity, transition properties, and :popover-open state

---------

Co-authored-by: Xiaoming Wu <xwu2@atlassian.com>

Author: Zerowxm

.changeset/oghljm37os-poiwwi4ip4l.md

@@ -0,0 +1,28 @@
+---
+'@compiled/babel-plugin': minor
+'@compiled/react': minor
+'@compiled/jest': minor
+---
+
+Bump csstype from 3.1.3 to 3.2.3 and add missing `@container` support to cssMap validation
+
+Updates csstype to the latest version which reflects the evolution of CSS standards. This change also fixes a bug where `@container` (CSS Container Queries) was partially supported in CSS processing but was missing from the cssMap type validation lookup table.
+
+**Removed at-rules:**
+
+- `@scroll-timeline` - Abandoned CSS proposal; Scroll-driven Animations now use `animation-timeline` property instead
+- `@viewport` - Obsolete at-rule with no modern browser support; viewport configuration is now handled via meta tags and media queries
+
+**Added at-rules (with full support):**
+
+- `@container` - CSS Container Queries (now fully validated in cssMap)
+- `@position-try` - CSS Anchor Positioning
+- `@view-transition` - View Transitions API
+
+**What changed:**
+
+- Updated csstype dependency to 3.2.3 across all packages
+- Updated `AtRules` type mapping in `packages/babel-plugin/src/utils/css-map.ts` to include the new at-rules and remove deprecated ones
+- Bumped to `minor` for `@compiled/babel-plugin` due to adding `@container` support to cssMap validation
+
+**Note:** The `@scroll-timeline` and `@viewport` at-rules are not used anywhere in the Compiled codebase, so this is not a breaking change.

package.json

@@ -65,7 +65,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "css-what": ">=6.1.0",
-    "csstype": "3.1.3",
+    "csstype": "3.2.3",
     "nth-check": ">=2.1.1",
     "postcss": "8.4.31",
     "semver": "^7.6.3",
@@ -96,7 +96,7 @@
     "@typescript-eslint/parser": "^6.21.0",
     "@typescript-eslint/utils": "^6.21.0",
     "babel-loader": "^9.1.2",
-    "csstype": "^3.1.3",
+    "csstype": "^3.2.3",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-json-files": "^2.2.0",

packages/babel-plugin/src/utils/css-map.ts

@@ -8,6 +8,7 @@ export const EXTENDED_SELECTORS_KEY = 'selectors';
 
 const atRules: Record<AtRules, boolean> = {
   '@charset': true,
+  '@container': true,
   '@counter-style': true,
   '@document': true,
   '@font-face': true,
@@ -19,12 +20,12 @@ const atRules: Record<AtRules, boolean> = {
   '@media': true,
   '@namespace': true,
   '@page': true,
+  '@position-try': true,
   '@property': true,
   '@scope': true,
-  '@scroll-timeline': true,
   '@starting-style': true,
   '@supports': true,
-  '@viewport': true,
+  '@view-transition': true,
 };
 
 type ObjectKeyWithLiteralValue = t.Identifier | t.StringLiteral;

packages/jest/package.json

@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@types/css": "^0.0.35",
-    "csstype": "^3.1.3"
+    "csstype": "^3.2.3"
   }
 }

packages/react/package.json

@@ -72,7 +72,7 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.1.3"
+    "csstype": "^3.2.3"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.1.0",

packages/react/src/css-map/__tests__/index.test.tsx

@@ -49,4 +49,29 @@ describe('css map', () => {
 
     expect(getByText('hello world')).toHaveCompiledCss('color', 'red');
   });
+
+  it('should support popover-open pseudo-class', () => {
+    const popoverStyles = cssMap({
+      fade: {
+        opacity: 0,
+        transition:
+          'opacity 175ms cubic-bezier(0.15, 1, 0.3, 1), overlay 175ms allow-discrete, display 175ms allow-discrete',
+        '&:popover-open': {
+          opacity: 1,
+          transitionDuration: '350ms',
+        },
+      },
+    });
+
+    const Foo = () => <div css={popoverStyles.fade}>popover content</div>;
+    const { getByText } = render(<Foo />);
+
+    expect(getByText('popover content')).toHaveCompiledCss('opacity', '0');
+    expect(getByText('popover content')).toHaveCompiledCss('opacity', '1', {
+      target: ':popover-open',
+    });
+    expect(getByText('popover content')).toHaveCompiledCss('transition-duration', '350ms', {
+      target: ':popover-open',
+    });
+  });
 });

packages/react/src/types.ts

@@ -96,6 +96,7 @@ export type CSSPseudoClasses =
   | '&:picture-in-picture'
   | '&:placeholder-shown'
   | '&:playing'
+  | '&:popover-open'
   | '&:read-only'
   | '&:read-write'
   | '&:required'

yarn.lock

@@ -7757,10 +7757,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@3.1.3, csstype@^3.1.3, csstype@^3.2.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+csstype@3.2.3, csstype@^3.2.2, csstype@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"