diff --git a/.changeset/oghljm37os-poiwwi4ip4l.md b/.changeset/oghljm37os-poiwwi4ip4l.md new file mode 100644 index 000000000..ae3a48b62 --- /dev/null +++ b/.changeset/oghljm37os-poiwwi4ip4l.md @@ -0,0 +1,25 @@ +--- +"@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. diff --git a/package.json b/package.json index 85f670f7f..7cd339f4d 100644 --- a/package.json +++ b/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", diff --git a/packages/babel-plugin/src/utils/css-map.ts b/packages/babel-plugin/src/utils/css-map.ts index 1335c420e..6cfb12252 100644 --- a/packages/babel-plugin/src/utils/css-map.ts +++ b/packages/babel-plugin/src/utils/css-map.ts @@ -8,6 +8,7 @@ export const EXTENDED_SELECTORS_KEY = 'selectors'; const atRules: Record = { '@charset': true, + '@container': true, '@counter-style': true, '@document': true, '@font-face': true, @@ -19,12 +20,12 @@ const atRules: Record = { '@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; diff --git a/packages/jest/package.json b/packages/jest/package.json index 1473e4737..180638aa6 100644 --- a/packages/jest/package.json +++ b/packages/jest/package.json @@ -24,6 +24,6 @@ }, "devDependencies": { "@types/css": "^0.0.35", - "csstype": "^3.1.3" + "csstype": "^3.2.3" } } diff --git a/packages/react/package.json b/packages/react/package.json index b769e453e..31cc8a190 100644 --- a/packages/react/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 86174d343..240462f5a 100644 --- a/yarn.lock +++ b/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"