diff --git a/.changeset/chilled-masks-explain.md b/.changeset/chilled-masks-explain.md deleted file mode 100644 index cac3d8277..000000000 --- a/.changeset/chilled-masks-explain.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -'@pandacss/preset-base': minor -'@pandacss/generator': minor -'@pandacss/parser': minor ---- - -**BREAKING 💥** - -Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern. - -**Before** - -```jsx -import { linkBox, linkOverlay } from 'styled-system/patterns' - -const App = () => { - return ( -
- placeholder - - Link - -
- ) -} -``` - -**After** - -```jsx -import { css } from 'styled-system/css' -import { linkOverlay } from 'styled-system/patterns' - -const App = () => { - return ( -
- placeholder - - Link - -
- ) -} -``` diff --git a/.changeset/flat-crews-mix.md b/.changeset/flat-crews-mix.md deleted file mode 100644 index bdfbc7111..000000000 --- a/.changeset/flat-crews-mix.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@pandacss/generator": minor -"@pandacss/types": minor ---- - -Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc. diff --git a/.changeset/fluffy-dingos-appear.md b/.changeset/fluffy-dingos-appear.md deleted file mode 100644 index f5512795f..000000000 --- a/.changeset/fluffy-dingos-appear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@pandacss/generator": patch ---- - -Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused. diff --git a/.changeset/fresh-eggs-kneel.md b/.changeset/fresh-eggs-kneel.md deleted file mode 100644 index 037876528..000000000 --- a/.changeset/fresh-eggs-kneel.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@pandacss/generator": patch -"@pandacss/preset-base": patch -"@pandacss/studio": patch ---- - -Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.) diff --git a/.changeset/new-brooms-impress.md b/.changeset/new-brooms-impress.md deleted file mode 100644 index a2eff5fe2..000000000 --- a/.changeset/new-brooms-impress.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'@pandacss/preset-base': patch -'@pandacss/generator': patch -'@pandacss/types': patch -'@pandacss/core': patch ---- - -Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was -available. diff --git a/.changeset/stale-phones-tease.md b/.changeset/stale-phones-tease.md deleted file mode 100644 index 9230eafe1..000000000 --- a/.changeset/stale-phones-tease.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -'@pandacss/generator': patch -'@pandacss/shared': patch ---- - -Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn - -This is useful when you are creating your own styled component and want to benefit -[from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515). - -```diff -import { css } from 'styled-system/css' -import type { HTMLStyledProps } from 'styled-system/types' - -type ButtonProps = HTMLStyledProps<'button'> - -export const Button = ({ css: cssProp = {}, children }: ButtonProps) => { -- const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp])) -+ const className = css(cssProp) - return -} -``` diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b3a6b63e..ea1275243 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,84 @@ See the [Changesets](./.changeset) for the latest changes. ## [Unreleased] +## [0.39.1] - 2024-05-07 + +### Fixed + +Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes allowing +arrays of `SystemStyleObject` + +## [0.39.0] - 2024-04-29 + +### Fixed + +- Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused. +- Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.) +- Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no autocompletion was + available. + +### Added + +- Add support for more typography related properties in text styles such as `fontFeatureSettings`, `fontPalette`, etc. +- Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn + +This is useful when you are creating your own styled component and want to benefit +[from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515). + +```diff +import { css } from 'styled-system/css' +import type { HTMLStyledProps } from 'styled-system/types' + +type ButtonProps = HTMLStyledProps<'button'> + +export const Button = ({ css: cssProp = {}, children }: ButtonProps) => { +- const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp])) ++ const className = css(cssProp) + return +} +``` + +### Changed + +- **BREAKING 💥** + +Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern. + +**Before** + +```jsx +import { linkBox, linkOverlay } from 'styled-system/patterns' + +const App = () => { + return ( +
+ placeholder + + Link + +
+ ) +} +``` + +**After** + +```jsx +import { css } from 'styled-system/css' +import { linkOverlay } from 'styled-system/patterns' + +const App = () => { + return ( +
+ placeholder + + Link + +
+ ) +} +``` + ## [0.38.0] - 2024-04-29 ### Fixed diff --git a/packages/astro-plugin-studio/CHANGELOG.md b/packages/astro-plugin-studio/CHANGELOG.md index 72e005565..97f604e01 100644 --- a/packages/astro-plugin-studio/CHANGELOG.md +++ b/packages/astro-plugin-studio/CHANGELOG.md @@ -1,5 +1,17 @@ # @pandacss/astro-plugin-studio +## 0.39.1 + +### Patch Changes + +- @pandacss/node@0.39.1 + +## 0.39.0 + +### Patch Changes + +- @pandacss/node@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/astro-plugin-studio/package.json b/packages/astro-plugin-studio/package.json index 7bfa79c0d..6a6e8f2be 100644 --- a/packages/astro-plugin-studio/package.json +++ b/packages/astro-plugin-studio/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/astro-plugin-studio", - "version": "0.38.0", + "version": "0.39.1", "description": "Vite plugin for Pandacss Studio", "author": "Segun Adebayo ", "main": "dist/index.js", diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md index 336b96f5a..db2fbb014 100644 --- a/packages/cli/CHANGELOG.md +++ b/packages/cli/CHANGELOG.md @@ -1,5 +1,34 @@ # @pandacss/dev +## 0.39.1 + +### Patch Changes + +- @pandacss/node@0.39.1 +- @pandacss/postcss@0.39.1 +- @pandacss/config@0.39.1 +- @pandacss/logger@0.39.1 +- @pandacss/preset-panda@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/token-dictionary@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/config@0.39.0 + - @pandacss/node@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/preset-panda@0.39.0 + - @pandacss/token-dictionary@0.39.0 + - @pandacss/postcss@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/cli/package.json b/packages/cli/package.json index 477bc9080..5f661a615 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/dev", - "version": "0.38.0", + "version": "0.39.1", "description": "The user facing package for panda css", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/config/CHANGELOG.md b/packages/config/CHANGELOG.md index 215a4fc10..d26224987 100644 --- a/packages/config/CHANGELOG.md +++ b/packages/config/CHANGELOG.md @@ -1,5 +1,30 @@ # @pandacss/config +## 0.39.1 + +### Patch Changes + +- @pandacss/logger@0.39.1 +- @pandacss/preset-base@0.39.1 +- @pandacss/preset-panda@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [df2546a] +- Updated dependencies [221c9a2] +- Updated dependencies [2116abe] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/preset-base@0.39.0 + - @pandacss/types@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/preset-panda@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/config/package.json b/packages/config/package.json index d789c73aa..ada00ccaf 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/config", - "version": "0.38.0", + "version": "0.39.1", "description": "Find and load panda config", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index a442473ca..23440d06b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,30 @@ # @pandacss/core +## 0.39.1 + +### Patch Changes + +- @pandacss/is-valid-prop@0.39.1 +- @pandacss/logger@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/token-dictionary@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no + autocompletion was available. +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/token-dictionary@0.39.0 + - @pandacss/is-valid-prop@0.39.0 + ## 0.38.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index 330b6c601..eb96a392a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/core", - "version": "0.38.0", + "version": "0.39.1", "description": "core functions for extract-it", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/extractor/CHANGELOG.md b/packages/extractor/CHANGELOG.md index 60a325592..b7a0f879f 100644 --- a/packages/extractor/CHANGELOG.md +++ b/packages/extractor/CHANGELOG.md @@ -1,5 +1,18 @@ # @pandacss/extractor +## 0.39.1 + +### Patch Changes + +- @pandacss/shared@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [935ec86] + - @pandacss/shared@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/extractor/package.json b/packages/extractor/package.json index 16a0366cc..d55afb5ad 100644 --- a/packages/extractor/package.json +++ b/packages/extractor/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/extractor", - "version": "0.38.0", + "version": "0.39.1", "description": "The css extractor for css panda", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/generator/CHANGELOG.md b/packages/generator/CHANGELOG.md index 30861cc33..75228069e 100644 --- a/packages/generator/CHANGELOG.md +++ b/packages/generator/CHANGELOG.md @@ -1,5 +1,98 @@ # @pandacss/generator +## 0.39.1 + +### Patch Changes + +- 99be6f1: Fix `css.raw` typings after recent ([0.39.0](https://github.com/chakra-ui/panda/discussions/2560)) changes + allowing arrays of `SystemStyleObject` + - @pandacss/core@0.39.1 + - @pandacss/is-valid-prop@0.39.1 + - @pandacss/logger@0.39.1 + - @pandacss/shared@0.39.1 + - @pandacss/token-dictionary@0.39.1 + - @pandacss/types@0.39.1 + +## 0.39.0 + +### Minor Changes + +- df2546a: **BREAKING 💥** + + Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern. + + **Before** + + ```jsx + import { linkBox, linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( +
+ placeholder + + Link + +
+ ) + } + ``` + + **After** + + ```jsx + import { css } from 'styled-system/css' + import { linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( +
+ placeholder + + Link + +
+ ) + } + ``` + +- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, + `fontPalette`, etc. + +### Patch Changes + +- 0714f31: Fix issue where `mergeCss` import in `styled-system/jsx/*` could be unused. +- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.) +- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no + autocompletion was available. +- 935ec86: Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn + + This is useful when you are creating your own styled component and want to benefit + [from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515). + + ```diff + import { css } from 'styled-system/css' + import type { HTMLStyledProps } from 'styled-system/types' + + type ButtonProps = HTMLStyledProps<'button'> + + export const Button = ({ css: cssProp = {}, children }: ButtonProps) => { + - const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp])) + + const className = css(cssProp) + return + } + ``` + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/core@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/token-dictionary@0.39.0 + - @pandacss/is-valid-prop@0.39.0 + ## 0.38.0 ### Minor Changes diff --git a/packages/generator/__tests__/generate-css-fn.test.ts b/packages/generator/__tests__/generate-css-fn.test.ts index c3f7ff3d5..8e870dcb0 100644 --- a/packages/generator/__tests__/generate-css-fn.test.ts +++ b/packages/generator/__tests__/generate-css-fn.test.ts @@ -10,16 +10,20 @@ describe('generate css-fn', () => { type Styles = SystemStyleObject | undefined | null | false + interface CssRawFunction { + (styles: Styles): SystemStyleObject + (styles: Styles[]): SystemStyleObject + (...styles: Array): SystemStyleObject + (styles: Styles): SystemStyleObject + } + interface CssFunction { (styles: Styles): string (styles: Styles[]): string (...styles: Array): string (styles: Styles): string - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: CssRawFunction } export declare const css: CssFunction;", @@ -96,16 +100,20 @@ describe('generate css-fn', () => { type Styles = SystemStyleObject | undefined | null | false + interface CssRawFunction { + (styles: Styles): SystemStyleObject + (styles: Styles[]): SystemStyleObject + (...styles: Array): SystemStyleObject + (styles: Styles): SystemStyleObject + } + interface CssFunction { (styles: Styles): string (styles: Styles[]): string (...styles: Array): string (styles: Styles): string - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: CssRawFunction } export declare const css: CssFunction;", diff --git a/packages/generator/package.json b/packages/generator/package.json index 39680a012..61cc1a182 100644 --- a/packages/generator/package.json +++ b/packages/generator/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/generator", - "version": "0.38.0", + "version": "0.39.1", "description": "The css generator for css panda", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/generator/src/artifacts/js/css-fn.ts b/packages/generator/src/artifacts/js/css-fn.ts index de0052c51..010bf6a21 100644 --- a/packages/generator/src/artifacts/js/css-fn.ts +++ b/packages/generator/src/artifacts/js/css-fn.ts @@ -12,16 +12,20 @@ export function generateCssFn(ctx: Context) { type Styles = SystemStyleObject | undefined | null | false + interface CssRawFunction { + (styles: Styles): SystemStyleObject + (styles: Styles[]): SystemStyleObject + (...styles: Array): SystemStyleObject + (styles: Styles): SystemStyleObject + } + interface CssFunction { (styles: Styles): string (styles: Styles[]): string (...styles: Array): string (styles: Styles): string - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: CssRawFunction } export declare const css: CssFunction; diff --git a/packages/is-valid-prop/CHANGELOG.md b/packages/is-valid-prop/CHANGELOG.md index 1da795d98..a65eb57be 100644 --- a/packages/is-valid-prop/CHANGELOG.md +++ b/packages/is-valid-prop/CHANGELOG.md @@ -1,5 +1,9 @@ # @pandacss/is-valid-prop +## 0.39.1 + +## 0.39.0 + ## 0.38.0 ## 0.37.2 diff --git a/packages/is-valid-prop/package.json b/packages/is-valid-prop/package.json index fcf334898..4429b029e 100644 --- a/packages/is-valid-prop/package.json +++ b/packages/is-valid-prop/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/is-valid-prop", - "version": "0.38.0", + "version": "0.39.1", "description": "Common error messages for css panda", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/logger/CHANGELOG.md b/packages/logger/CHANGELOG.md index 1ff61dd86..a943081f6 100644 --- a/packages/logger/CHANGELOG.md +++ b/packages/logger/CHANGELOG.md @@ -1,5 +1,19 @@ # @pandacss/logger +## 0.39.1 + +### Patch Changes + +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] + - @pandacss/types@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/logger/package.json b/packages/logger/package.json index 8c295ea05..5610ad823 100644 --- a/packages/logger/package.json +++ b/packages/logger/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/logger", - "version": "0.38.0", + "version": "0.39.1", "description": "The core css panda library", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/node/CHANGELOG.md b/packages/node/CHANGELOG.md index 2db781c13..0a6fa0419 100644 --- a/packages/node/CHANGELOG.md +++ b/packages/node/CHANGELOG.md @@ -1,5 +1,40 @@ # @pandacss/node +## 0.39.1 + +### Patch Changes + +- Updated dependencies [99be6f1] + - @pandacss/generator@0.39.1 + - @pandacss/parser@0.39.1 + - @pandacss/config@0.39.1 + - @pandacss/core@0.39.1 + - @pandacss/extractor@0.39.1 + - @pandacss/logger@0.39.1 + - @pandacss/shared@0.39.1 + - @pandacss/token-dictionary@0.39.1 + - @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [df2546a] +- Updated dependencies [221c9a2] +- Updated dependencies [0714f31] +- Updated dependencies [2116abe] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/generator@0.39.0 + - @pandacss/parser@0.39.0 + - @pandacss/types@0.39.0 + - @pandacss/core@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/config@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/token-dictionary@0.39.0 + - @pandacss/extractor@0.39.0 + ## 0.38.0 ### Minor Changes diff --git a/packages/node/package.json b/packages/node/package.json index cdc2265c7..796906460 100644 --- a/packages/node/package.json +++ b/packages/node/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/node", - "version": "0.38.0", + "version": "0.39.1", "description": "The core css panda library", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/parser/CHANGELOG.md b/packages/parser/CHANGELOG.md index 0fab8fee0..6ac513b2d 100644 --- a/packages/parser/CHANGELOG.md +++ b/packages/parser/CHANGELOG.md @@ -1,5 +1,71 @@ # @pandacss/parser +## 0.39.1 + +### Patch Changes + +- @pandacss/config@0.39.1 +- @pandacss/core@0.39.1 +- @pandacss/extractor@0.39.1 +- @pandacss/logger@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Minor Changes + +- df2546a: **BREAKING 💥** + + Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern. + + **Before** + + ```jsx + import { linkBox, linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( + + ) + } + ``` + + **After** + + ```jsx + import { css } from 'styled-system/css' + import { linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( + + ) + } + ``` + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/core@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/config@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/extractor@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/parser/package.json b/packages/parser/package.json index 46925414d..821343796 100644 --- a/packages/parser/package.json +++ b/packages/parser/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/parser", - "version": "0.38.0", + "version": "0.39.1", "description": "The static parser for panda css", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/postcss/CHANGELOG.md b/packages/postcss/CHANGELOG.md index 8bd407b51..6ccbc138f 100644 --- a/packages/postcss/CHANGELOG.md +++ b/packages/postcss/CHANGELOG.md @@ -1,5 +1,17 @@ # @pandacss/postcss +## 0.39.1 + +### Patch Changes + +- @pandacss/node@0.39.1 + +## 0.39.0 + +### Patch Changes + +- @pandacss/node@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/postcss/package.json b/packages/postcss/package.json index 0897f02f9..a18401334 100644 --- a/packages/postcss/package.json +++ b/packages/postcss/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/postcss", - "version": "0.38.0", + "version": "0.39.1", "description": "PostCSS integration for Panda CSS", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/preset-atlaskit/CHANGELOG.md b/packages/preset-atlaskit/CHANGELOG.md index 892416470..51b5260e2 100644 --- a/packages/preset-atlaskit/CHANGELOG.md +++ b/packages/preset-atlaskit/CHANGELOG.md @@ -1,5 +1,19 @@ # @pandacss/preset-atlaskit +## 0.39.1 + +### Patch Changes + +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] + - @pandacss/types@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/preset-atlaskit/package.json b/packages/preset-atlaskit/package.json index 77df79d08..94eb93bef 100644 --- a/packages/preset-atlaskit/package.json +++ b/packages/preset-atlaskit/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/preset-atlaskit", - "version": "0.38.0", + "version": "0.39.1", "description": "The preset for PandaCSS that contains the default theme", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/preset-base/CHANGELOG.md b/packages/preset-base/CHANGELOG.md index 406bed81e..1ec7d5a32 100644 --- a/packages/preset-base/CHANGELOG.md +++ b/packages/preset-base/CHANGELOG.md @@ -1,5 +1,63 @@ # @pandacss/preset-base +## 0.39.1 + +### Patch Changes + +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Minor Changes + +- df2546a: **BREAKING 💥** + + Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern. + + **Before** + + ```jsx + import { linkBox, linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( + + ) + } + ``` + + **After** + + ```jsx + import { css } from 'styled-system/css' + import { linkOverlay } from 'styled-system/patterns' + + const App = () => { + return ( + + ) + } + ``` + +### Patch Changes + +- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.) +- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no + autocompletion was available. +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] + - @pandacss/types@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/preset-base/package.json b/packages/preset-base/package.json index fef1e9eac..b54c5404e 100644 --- a/packages/preset-base/package.json +++ b/packages/preset-base/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/preset-base", - "version": "0.38.0", + "version": "0.39.1", "description": "The base preset for Panda CSS that contains the conditions and utilities", "author": "Segun Adebayo ", "main": "dist/index.js", diff --git a/packages/preset-open-props/CHANGELOG.md b/packages/preset-open-props/CHANGELOG.md index 3dae3c491..cfb8cc2c2 100644 --- a/packages/preset-open-props/CHANGELOG.md +++ b/packages/preset-open-props/CHANGELOG.md @@ -1,5 +1,19 @@ # @pandacss/preset-open-props +## 0.39.1 + +### Patch Changes + +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] + - @pandacss/types@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/preset-open-props/package.json b/packages/preset-open-props/package.json index 765cc4ce0..336387c47 100644 --- a/packages/preset-open-props/package.json +++ b/packages/preset-open-props/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/preset-open-props", - "version": "0.38.0", + "version": "0.39.1", "description": "A preset for Open Props", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/preset-panda/CHANGELOG.md b/packages/preset-panda/CHANGELOG.md index 5e3187218..15f32ea11 100644 --- a/packages/preset-panda/CHANGELOG.md +++ b/packages/preset-panda/CHANGELOG.md @@ -1,5 +1,19 @@ # @pandacss/preset-panda +## 0.39.1 + +### Patch Changes + +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] + - @pandacss/types@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/preset-panda/package.json b/packages/preset-panda/package.json index 18ff9c2b3..2aba17226 100644 --- a/packages/preset-panda/package.json +++ b/packages/preset-panda/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/preset-panda", - "version": "0.38.0", + "version": "0.39.1", "description": "The preset for PandaCSS that contains the default theme", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index 1c3245307..c56ccc45b 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,29 @@ # @pandacss/shared +## 0.39.1 + +## 0.39.0 + +### Patch Changes + +- 935ec86: Allow passing arrays of `SystemStyleObject` to the `css(xxx, [aaa, bbb, ccc], yyy)` fn + + This is useful when you are creating your own styled component and want to benefit + [from the recent `css` array property support](https://github.com/chakra-ui/panda/pull/2515). + + ```diff + import { css } from 'styled-system/css' + import type { HTMLStyledProps } from 'styled-system/types' + + type ButtonProps = HTMLStyledProps<'button'> + + export const Button = ({ css: cssProp = {}, children }: ButtonProps) => { + - const className = css(...(Array.isArray(cssProp) ? cssProp : [cssProp])) + + const className = css(cssProp) + return + } + ``` + ## 0.38.0 ### Minor Changes diff --git a/packages/shared/package.json b/packages/shared/package.json index 73e51e16f..813107c82 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/shared", - "version": "0.38.0", + "version": "0.39.1", "description": "Shared utilities for css panda", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/studio/CHANGELOG.md b/packages/studio/CHANGELOG.md index b601985a3..0e9772e8e 100644 --- a/packages/studio/CHANGELOG.md +++ b/packages/studio/CHANGELOG.md @@ -1,5 +1,31 @@ # @pandacss/studio +## 0.39.1 + +### Patch Changes + +- @pandacss/astro-plugin-studio@0.39.1 +- @pandacss/config@0.39.1 +- @pandacss/logger@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/token-dictionary@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- 2116abe: Fix issue where `float` property did not allow inherited values (auto, initial, none, etc.) +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/config@0.39.0 + - @pandacss/logger@0.39.0 + - @pandacss/token-dictionary@0.39.0 + - @pandacss/astro-plugin-studio@0.39.0 + ## 0.38.0 ### Patch Changes diff --git a/packages/studio/package.json b/packages/studio/package.json index eaf44dea2..6d1f9a66f 100644 --- a/packages/studio/package.json +++ b/packages/studio/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/studio", - "version": "0.38.0", + "version": "0.39.1", "description": "The automated token documentation for Panda CSS", "main": "dist/studio.js", "module": "dist/studio.mjs", diff --git a/packages/studio/styled-system/css/css.d.ts b/packages/studio/styled-system/css/css.d.ts index 175f97471..496da4193 100644 --- a/packages/studio/styled-system/css/css.d.ts +++ b/packages/studio/styled-system/css/css.d.ts @@ -3,16 +3,20 @@ import type { SystemStyleObject } from '../types/index'; type Styles = SystemStyleObject | undefined | null | false +interface CssRawFunction { + (styles: Styles): SystemStyleObject + (styles: Styles[]): SystemStyleObject + (...styles: Array): SystemStyleObject + (styles: Styles): SystemStyleObject +} + interface CssFunction { (styles: Styles): string (styles: Styles[]): string (...styles: Array): string (styles: Styles): string - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: CssRawFunction } export declare const css: CssFunction; \ No newline at end of file diff --git a/packages/token-dictionary/CHANGELOG.md b/packages/token-dictionary/CHANGELOG.md index 939c8b791..cb2841b57 100644 --- a/packages/token-dictionary/CHANGELOG.md +++ b/packages/token-dictionary/CHANGELOG.md @@ -1,5 +1,24 @@ # @pandacss/token-dictionary +## 0.39.1 + +### Patch Changes + +- @pandacss/logger@0.39.1 +- @pandacss/shared@0.39.1 +- @pandacss/types@0.39.1 + +## 0.39.0 + +### Patch Changes + +- Updated dependencies [221c9a2] +- Updated dependencies [c3e797e] +- Updated dependencies [935ec86] + - @pandacss/types@0.39.0 + - @pandacss/shared@0.39.0 + - @pandacss/logger@0.39.0 + ## 0.38.0 ### Minor Changes diff --git a/packages/token-dictionary/package.json b/packages/token-dictionary/package.json index fa22d4d4c..4b7be80df 100644 --- a/packages/token-dictionary/package.json +++ b/packages/token-dictionary/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/token-dictionary", - "version": "0.38.0", + "version": "0.39.1", "description": "Common error messages for css panda", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md index dce38ad25..1a57f8526 100644 --- a/packages/types/CHANGELOG.md +++ b/packages/types/CHANGELOG.md @@ -1,5 +1,19 @@ # @pandacss/types +## 0.39.1 + +## 0.39.0 + +### Minor Changes + +- 221c9a2: Add support for more typography related properties in text styles such as `fontFeatureSettings`, + `fontPalette`, etc. + +### Patch Changes + +- c3e797e: Fix issue where `animationName` property was not connected to `theme.keyframes`, as a result, no + autocompletion was available. + ## 0.38.0 ### Minor Changes diff --git a/packages/types/package.json b/packages/types/package.json index d3dedc3fe..7a50c5eea 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -1,6 +1,6 @@ { "name": "@pandacss/types", - "version": "0.38.0", + "version": "0.39.1", "description": "The types for css panda", "main": "dist/index.d.ts", "author": "Segun Adebayo ", diff --git a/sandbox/codegen/__tests__/css.test.ts b/sandbox/codegen/__tests__/css.test.ts index bf8b0de2c..9928f01b6 100644 --- a/sandbox/codegen/__tests__/css.test.ts +++ b/sandbox/codegen/__tests__/css.test.ts @@ -123,3 +123,243 @@ describe('css', () => { expect(className).toMatchInlineSnapshot(`"fs_12px bg_red.600"`) }) }) + +describe('css.raw', () => { + test('native CSS prop and value', () => { + const styles = css.raw({ display: 'flex' }) + + expect(styles).toMatchInlineSnapshot(` + { + "display": "flex", + } + `) + }) + + test('token value', () => { + const styles = css.raw({ color: 'blue.300' }) + + expect(styles).toMatchInlineSnapshot(` + { + "color": "blue.300", + } + `) + }) + + test('utility prop', () => { + const styles = css.raw({ srOnly: true }) + + expect(styles).toMatchInlineSnapshot(` + { + "srOnly": true, + } + `) + }) + + test('shorthand prop', () => { + const styles = css.raw({ bg: 'red' }) + + expect(styles).toMatchInlineSnapshot(` + { + "bg": "red", + } + `) + }) + + test('object condition prop', () => { + const styles = css.raw({ bg: { _hover: 'yellow.100' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "bg": { + "_hover": "yellow.100", + }, + } + `) + }) + + test('condition prop', () => { + const styles = css.raw({ _hover: { bg: 'yellow.200' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "_hover": { + "bg": "yellow.200", + }, + } + `) + }) + + test('nested condition prop', () => { + const styles = css.raw({ _hover: { _dark: { bg: 'pink' } } }) + + expect(styles).toMatchInlineSnapshot(` + { + "_hover": { + "_dark": { + "bg": "pink", + }, + }, + } + `) + }) + + test('arbitrary value', () => { + const styles = css.raw({ color: '#fff' }) + + expect(styles).toMatchInlineSnapshot(` + { + "color": "#fff", + } + `) + }) + + test('arbitrary selector', () => { + const styles = css.raw({ ['&:data-panda']: { display: 'flex' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "&:data-panda": { + "display": "flex", + }, + } + `) + }) + + test('responsive condition', () => { + const styles = css.raw({ sm: { bg: 'purple' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "sm": { + "bg": "purple", + }, + } + `) + }) + + test('responsive array syntax prop', () => { + const styles = css.raw({ bg: ['cyan.100', 'cyan.200', null, undefined, 'cyan.300'] }) + + expect(styles).toMatchInlineSnapshot(` + { + "bg": [ + "cyan.100", + "cyan.200", + null, + undefined, + "cyan.300", + ], + } + `) + }) + + test('using inline token helper - in value', () => { + const styles = css.raw({ border: '1px solid token(colors.blue.400)' }) + + expect(styles).toMatchInlineSnapshot(` + { + "border": "1px solid token(colors.blue.400)", + } + `) + }) + + test('using inline token helper - in condition', () => { + const styles = css.raw({ '@media screen and (min-width: token(sizes.4xl))': { bg: 'blue.500' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "@media screen and (min-width: token(sizes.4xl))": { + "bg": "blue.500", + }, + } + `) + }) + + test('nested condition prop with array syntax', () => { + const styles = css.raw({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } }) + + expect(styles).toMatchInlineSnapshot(` + { + "_hover": { + "_dark": { + "bg": [ + "pink.100", + "pink.200", + ], + }, + }, + } + `) + }) + + test('same prop', () => { + const styles = css.raw({ bgColor: 'red.100', backgroundColor: 'red.200' }) + + expect(styles).toMatchInlineSnapshot(` + { + "backgroundColor": "red.200", + "bgColor": "red.100", + } + `) + + const styles2 = css.raw({ backgroundColor: 'red.300', bgColor: 'red.400' }) + + expect(styles2).toMatchInlineSnapshot(` + { + "backgroundColor": "red.300", + "bgColor": "red.400", + } + `) + }) + + test('merging styles', () => { + const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, { backgroundColor: 'red.600' }) + + expect(styles).toMatchInlineSnapshot(` + { + "backgroundColor": "red.600", + "fontSize": "sm", + } + `) + }) + + test('merging styles with nested conditions', () => { + const styles = css.raw({ fontSize: 'sm', _hover: { color: 'green.100' } }, { _hover: { color: 'green.200' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "_hover": { + "color": "green.200", + }, + "fontSize": "sm", + } + `) + }) + + test('merging styles with object condition prop', () => { + const styles = css.raw({ fontSize: 'md' }, { fontSize: { base: 'lg', sm: 'xs' } }) + + expect(styles).toMatchInlineSnapshot(` + { + "fontSize": { + "base": "lg", + "sm": "xs", + }, + } + `) + }) + + test('merging styles with array item', () => { + const styles = css.raw({ fontSize: 'sm', bgColor: 'red.500' }, [ + { backgroundColor: 'red.600' }, + { fontSize: '12px' }, + ]) + + expect(styles).toMatchInlineSnapshot(` + { + "backgroundColor": "red.600", + "fontSize": "12px", + } + `) + }) +}) diff --git a/sandbox/codegen/__tests__/scenarios/strict.test.ts b/sandbox/codegen/__tests__/scenarios/strict.test.ts index cbda8bc36..863db50b7 100644 --- a/sandbox/codegen/__tests__/scenarios/strict.test.ts +++ b/sandbox/codegen/__tests__/scenarios/strict.test.ts @@ -185,3 +185,188 @@ describe('css', () => { assertType(css({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } })) }) }) + +describe('css.raw', () => { + test('native CSS prop and value', () => { + assertType(css.raw({ display: 'flex' })) + + // @ts-expect-error expected from strictPropertyValues: true + assertType(css.raw({ display: 'abc' })) + assertType(css.raw({ content: 'abc' })) + assertType(css.raw({ willChange: 'abc' })) + + assertType(css.raw({ pos: 'absolute' })) + + // @ts-expect-error expected from strictPropertyValues: true + assertType(css.raw({ position: 'absolute123' })) + // @ts-expect-error expected from strictPropertyValues: true + assertType(css.raw({ pos: 'absolute123' })) + // @ts-expect-error expected from strictTokens: true + assertType(css.raw({ flex: '0 1' })) + }) + + test('token value', () => { + assertType(css.raw({ color: 'blue.300' })) + }) + + test('css var', () => { + assertType(css.raw({ color: 'var(--button-color)' })) + assertType(css.raw({ display: 'var(--button-color)' })) + }) + + test('utility prop', () => { + assertType( + css.raw({ + srOnly: true, + }), + ) + }) + + test('shorthand prop', () => { + assertType( + css.raw({ + // @ts-expect-error expected from strictTokens: true + backgroundColor: 'red', + // @ts-expect-error expected from strictTokens: true + bg: 'red', + }), + ) + }) + + test('object condition prop', () => { + assertType(css.raw({ bg: { _hover: 'yellow.100' } })) + }) + + test('condition prop', () => { + assertType(css.raw({ _hover: { bg: 'yellow.200' } })) + }) + + test('nested condition prop', () => { + assertType( + css.raw({ + _hover: { + _dark: { + // @ts-expect-error expected from strictTokens: true + bg: 'pink', + }, + }, + }), + ) + }) + + test('arbitrary value', () => { + assertType( + css.raw({ + // @ts-expect-error expected from strictTokens: true + color: '#fff', + }), + ) + }) + + test('arbitrary value escape hatch', () => { + assertType( + css.raw({ + color: '[#fff]', + fontSize: '[123px]', + }), + ) + }) + + test('arbitrary value escape hatch with conditionals', () => { + assertType( + css.raw({ + color: '[#fff]', + fontSize: '[123px]', + bgColor: '[#fff!]', + borderColor: '[#fff !important]', + _hover: { + color: '[#fff]', + fontSize: '[123px]', + bgColor: '[#fff!]', + borderColor: '[#fff !important]', + }, + backgroundColor: { + _dark: '[#3B00B9]', + _hover: '[#3B00B9!]', + _focus: '[#3B00B9 !important]', + }, + }), + ) + }) + + test('arbitrary selector', () => { + assertType(css.raw({ ['&:data-panda']: { display: 'flex' } })) + }) + + test('important', () => { + assertType( + css.raw({ + fontSize: '2xl !important', + p: '4 !important', + // @ts-expect-error expected from strictTokens: true + bgColor: '#fff!', + // @ts-expect-error expected from strictTokens: true + borderColor: '#fff !important', + _hover: { + fontSize: '2xl !important', + p: '4 !important', + // @ts-expect-error expected from strictTokens: true + + bgColor: '#fff!', + // @ts-expect-error expected from strictTokens: true + borderColor: '#fff !important', + }, + // @ts-expect-error expected from strictTokens: true + backgroundColor: { + _disabled: '2xl!', + _active: '4 !important', + _hover: '#3B00B9!', + _focus: '#3B00B9 !important', + }, + }), + ) + }) + + test('responsive condition', () => { + assertType( + css.raw({ + sm: { + // @ts-expect-error expected from strictTokens: true + bg: 'purple', + }, + }), + ) + }) + + test('responsive array syntax prop', () => { + assertType( + css.raw({ + bg: [ + 'cyan.100', + 'cyan.200', + null, + // @ts-expect-error expected from strictTokens: true + undefined, + 'cyan.300', + ], + }), + ) + }) + + test('using inline token helper - in value', () => { + assertType( + css.raw({ + // @ts-expect-error expected from strictTokens: true + border: '1px solid token(colors.blue.400)', + }), + ) + }) + + test('using inline token helper - in condition', () => { + assertType(css.raw({ '@media screen and (min-width: token(sizes.4xl))': { bg: 'blue.500' } })) + }) + + test('nested condition prop with array syntax', () => { + assertType(css.raw({ _hover: { _dark: { bg: ['pink.100', 'pink.200'] } } })) + }) +})