Skip to content

Latest commit

 

History

History
3879 lines (3233 loc) · 106 KB

CHANGELOG.md

File metadata and controls

3879 lines (3233 loc) · 106 KB
Raw

@pandacss/node

0.49.0

Patch Changes

0.48.1

Patch Changes

0.48.0

Patch Changes

0.47.1

Patch Changes

0.47.0

Patch Changes

0.46.1

Patch Changes

0.46.0

Patch Changes

0.45.2

Patch Changes

0.45.1

Patch Changes

0.45.0

Patch Changes

0.44.0

Patch Changes

0.43.0

Patch Changes

0.42.0

Patch Changes

  • 19c3a2c: Minor changes to the format of the panda analyze --output coverage.json file

  • ec64819: Change recipes className to be optional, both for recipes and slotRecipes, with a fallback to its name.

    import { defineConfig } from '@pandacss/core'

export default defineConfig({
  recipes: {
    button: {
      className: 'button', // 👈 was mandatory, is now optional
      variants: {
        size: {
          sm: { padding: '2', borderRadius: 'sm' },
          md: { padding: '4', borderRadius: 'md' },
        },
      },
    },
  },
})

  • 17a1932: [BREAKING] Removed the legacy config.optimize option because it was redundant. Now, we always optimize the generated CSS where possible.

  • Updated dependencies [e157dd1]

  • Updated dependencies [19c3a2c]

  • Updated dependencies [f00ff88]

  • Updated dependencies [ec64819]

  • Updated dependencies [17a1932]

0.41.0

Patch Changes

0.40.1

Patch Changes

0.40.0

Minor Changes

  • 5dcdae4: Improve monorepo setup DX by exposing some cli flags

    panda init

    • Added new flag --no-codegen to skip codegen during initialization
    • Added new flag --outdir to specify the output directory for generated files

    panda emit-pkg

    • Added new --base flag to specify the base directory for the entrypoints in the generated package.json#exports field

Patch Changes

0.39.2

Patch Changes

0.39.1

Patch Changes

0.39.0

Patch Changes

0.38.0

Minor Changes

  • 2c8b933: Add least resource used (LRU) cache in the hot parts to prevent memory from growing infinitely

Patch Changes

0.37.2

Patch Changes

0.37.1

Patch Changes

0.37.0

Patch Changes

0.36.1

Patch Changes

0.36.0

Patch Changes

0.35.0

Patch Changes

0.34.3

Patch Changes

0.34.2

Patch Changes

0.34.1

Patch Changes

0.34.0

Patch Changes

0.33.0

Patch Changes

0.32.1

Patch Changes

0.32.0

Minor Changes

  • de4d9ef: Allow config.hooks to be shared in plugins

    For hooks that can transform Panda's internal state by returning something (like cssgen:done and codegen:prepare), each hook instance will be called sequentially and the return result (if any) of the previous hook call is passed to the next hook so that they can be chained together.

Patch Changes

0.31.0

Minor Changes

  • f0296249: - Sort the longhand/shorthand atomic rules in a deterministic order to prevent property conflicts

    • Automatically merge the base object in the css root styles in the runtime
    • This may be a breaking change depending on how your styles are created

    Ex:

    css({
  padding: '1px',
  paddingTop: '3px',
  paddingBottom: '4px',
})

    Will now always generate the following css:

    @layer utilities {
  .p_1px {
    padding: 1px;
  }

  .pt_3px {
    padding-top: 3px;
  }

  .pb_4px {
    padding-bottom: 4px;
  }
}

Patch Changes

0.30.2

Patch Changes

0.30.1

Patch Changes

0.30.0

Patch Changes

  • 05686b9d: Refactor the --cpu-prof profiler to use the node:inspector instead of relying on an external module (v8-profiler-next, which required node-gyp)

  • ab32d1d7: Introduce 3 new hooks:

    tokens:created

    This hook is called when the token engine has been created. You can use this hook to add your format token names and variables.

    This is especially useful when migrating from other css-in-js libraries, like Stitches.

    export default defineConfig({
  // ...
  hooks: {
    'tokens:created': ({ configure }) => {
      configure({
        formatTokenName: (path) => '

0.29.1

Patch Changes

0.29.0

Minor Changes

  • a2fb5cc6: - Add support for explicitly specifying config related files that should trigger a context reload on change.

    We automatically track the config file and (transitive) files imported by the config file as much as possible, but sometimes we might miss some. You can use this option as a workaround for those edge cases.

    Set the dependencies option in panda.config.ts to a glob or list of files.

    export default defineConfig({
  // ...
  dependencies: ['path/to/files/**.ts'],
})

    • Invoke config:change hook in more situations (when the --watch flag is passed to panda codegen, panda cssgen, panda ship)

    • Watch for more config options paths changes, so that the related artifacts will be regenerated a bit more reliably (ex: updating the config.hooks will now trigger a full regeneration of styled-system)

Patch Changes

0.28.0

Minor Changes

  • f58f6df2: Refactor config.hooks to be much more powerful, you can now:

    • Tweak the config after it has been resolved (after presets are loaded and merged), this could be used to dynamically load all recipes from a folder
    • Transform a source file's content before parsing it, this could be used to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
    • Implement your own parser logic and add the extracted results to the classic Panda pipeline, this could be used to parse style usage from any template language
    • Tweak the CSS content for any @layer or even right before it's written to disk (if using the CLI) or injected through the postcss plugin, allowing all kinds of customizations like removing the unused CSS variables, etc.
    • React to any config change or after the codegen step (your outdir, the styled-system folder) have been generated

    See the list of available config.hooks here:

    export interface PandaHooks {
  /**
   * Called when the config is resolved, after all the presets are loaded and merged.
   * This is the first hook called, you can use it to tweak the config before the context is created.
   */
  'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
  /**
   * Called when the Panda context has been created and the API is ready to be used.
   */
  'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
  /**
   * Called when the config file or one of its dependencies (imports) has changed.
   */
  'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
  /**
   * Called after reading the file content but before parsing it.
   * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
   * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
   */
  'parser:before': (args: { filePath: string; content: string }) => string | void
  /**
   * Called after the file styles are extracted and processed into the resulting ParserResult object.
   * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
   */
  'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
  /**
   * Called after the codegen is completed
   */
  'codegen:done': () => MaybeAsyncReturn
  /**
   * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
   * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
   * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
   */
  'cssgen:done': (args: {
    artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
    content: string
  }) => string | void
}

Patch Changes

0.27.3

Patch Changes

0.27.2

Patch Changes

0.27.1

Patch Changes

0.27.0

Minor Changes

  • 84304901: Improve performance, mostly for the CSS generation by removing a lot of postcss usage (and plugins).

    Public changes:

    • Introduce a new config.lightningcss option to use lightningcss (currently disabled by default) instead of postcss.
    • Add a new config.browserslist option to configure the browserslist used by lightningcss.
    • Add a --lightningcss flag to the panda and panda cssgen command to use lightningcss instead of postcss for this run.

    Internal changes:

    • markImportant fn from JS instead of walking through postcss AST nodes
    • use a fork of stitches stringify function instead of postcss-css-in-js to write the CSS string from a JS object
    • only compute once TokenDictionary properties
    • refactor serializeStyle to use the same code path as the rest of the pipeline with StyleEncoder / StyleDecoder and rename it to transformStyles to better convey what it does

Patch Changes

0.26.2

Patch Changes

0.26.1

Patch Changes

0.26.0

Minor Changes

  • 1bd7fbb7: Fix @pandacss/postcss plugin regression when the entry CSS file (with @layer rules order) contains user-defined rules, those user-defined rules would not be reloaded correctly after being changed.

Patch Changes

0.25.0

Patch Changes

0.24.2

Patch Changes

0.24.1

Patch Changes

0.24.0

Minor Changes

  • 63b3f1f2: - Boost style extraction performance by moving more work away from postcss
    • Using a hashing strategy, the compiler only computes styles/classname once per style object and prop-value-condition pair
    • Fix regression in previous implementation that increased memory usage per extraction, leading to slower performance over time

Patch Changes

0.23.0

Patch Changes

0.22.1

Patch Changes

0.22.0

Patch Changes

  • a2f6c2c8: Fix potential cross-platform issues with path resolving by using pathe instead of path

  • 11753fea: Improve initial css extraction time by at least 5x 🚀

    Initial extraction time can get slow when using static CSS with lots of recipes or parsing a lot of files.

    Scenarios

    • Park UI went from 3500ms to 580ms (6x faster)
    • Panda Website went from 2900ms to 208ms (14x faster)

    Potential Breaking Change

    If you use hooks in your panda.config file to listen for when css is extracted, we no longer return the css string for performance reasons. We might reconsider this in the future.

  • Updated dependencies [526c6e34]

  • Updated dependencies [8db47ec6]

  • Updated dependencies [9c0d3f8f]

  • Updated dependencies [11753fea]

  • Updated dependencies [c95c40bd]

  • Updated dependencies [e83afef0]

0.21.0

Patch Changes

0.20.1

Patch Changes

0.20.0

Patch Changes

0.19.0

Patch Changes

0.18.3

Patch Changes

0.18.2

Patch Changes

0.18.1

Patch Changes

0.18.0

Patch Changes

0.17.5

Patch Changes

0.17.4

Patch Changes

0.17.3

Patch Changes

0.17.2

Patch Changes

0.17.1

Patch Changes

0.17.0

Minor Changes

  • 12281ff8: Improve support for styled element composition. This ensures that you can compose two styled elements together and the styles will be merged correctly.

    const Box = styled('div', {
  base: {
    background: 'red.light',
    color: 'white',
  },
})

const ExtendedBox = styled(Box, {
  base: { background: 'red.dark' },
})

// <ExtendedBox> will have a background of `red.dark` and a color of `white`

    Limitation: This feature does not allow compose mixed styled composition. A mixed styled composition happens when an element is created from a cva/inline cva, and another created from a config recipe.

    • CVA or Inline CVA + CVA or Inline CVA = ✅
    • Config Recipe + Config Recipe = ✅
    • CVA or Inline CVA + Config Recipe = ❌
    import { button } from '../styled-system/recipes'

const Button = styled('div', button)

// ❌ This will throw an error
const ExtendedButton = styled(Button, {
  base: { background: 'red.dark' },
})

Patch Changes

0.16.0

Minor Changes

  • 36252b1d: ## --minimal flag

    Adds a new --minimal flag for the CLI on the panda cssgen command to skip generating CSS for theme tokens, preflightkeyframes, static and global css

    Thich means that the generated CSS will only contain the CSS related to the styles found in the included files.

    Note that you can use a glob to override the config.include option like this: panda cssgen "src/**/*.css" --minimal

    This is useful when you want to split your CSS into multiple files, for example if you want to split by pages.

    Use it like this:

    panda cssgen "src/**/pages/*.css" --minimal --outfile dist/pages.css

    cssgen {type}

    In addition to the optional glob that you can already pass to override the config.include option, the panda cssgen command now accepts a new {type} argument to generate only a specific type of CSS:

    • preflight
    • tokens
    • static
    • global
    • keyframes

    Note that this only works when passing an --outfile.

    You can use it like this:

    panda cssgen "static" --outfile dist/static.css

Patch Changes

0.15.5

Patch Changes

0.15.4

Patch Changes

0.15.3

Patch Changes

0.15.2

Patch Changes

0.15.1

Patch Changes

0.15.0

Patch Changes

0.14.0

Minor Changes

  • 8106b411: Add generator:done hook to perform actions when codegen artifacts are emitted.

Patch Changes

0.13.1

Patch Changes

0.13.0

Patch Changes

0.12.2

Patch Changes

0.12.1

Patch Changes

0.12.0

Patch Changes

0.11.1

Patch Changes

0.11.0

Patch Changes

0.10.0

Patch Changes

0.9.0

Patch Changes

0.8.0

Patch Changes

0.7.0

Patch Changes

0.6.0

Patch Changes

0.5.1

Patch Changes

  • 5b09ab3b: Add support for --outfile flag in the cssgen command.

    panda cssgen --outfile dist/styles.css

  • 78ed6ed4: Fix issue where using a nested outdir like src/styled-system with a baseUrl like ./src would result on parser NOT matching imports like import { container } from "styled-system/patterns"; cause it would expect the full path src/styled-system

  • e48b130a: - Remove stack from box.toJSON() so that generated JSON files have less noise, mostly useful to get make the panda debug command easier to read

    • Also use the ParserResult.toJSON() method on panda debug command for the same reason

    instead of:

    [
  {
    "type": "map",
    "value": {
      "padding": {
        "type": "literal",
        "value": "25px",
        "node": "StringLiteral",
        "stack": [
          "CallExpression",
          "ObjectLiteralExpression",
          "PropertyAssignment",
          "Identifier",
          "Identifier",
          "VariableDeclaration",
          "StringLiteral"
        ],
        "line": 10,
        "column": 20
      },
      "fontSize": {
        "type": "literal",
        "value": "2xl",
        "node": "StringLiteral",
        "stack": [
          "CallExpression",
          "ObjectLiteralExpression",
          "PropertyAssignment",
          "ConditionalExpression"
        ],
        "line": 11,
        "column": 67
      }
    },
    "node": "CallExpression",
    "stack": [
      "CallExpression",
      "ObjectLiteralExpression"
    ],
    "line": 11,
    "column": 21
  },

    we now have:

    {
  "css": [
    {
      "type": "object",
      "name": "css",
      "box": {
        "type": "map",
        "value": {},
        "node": "CallExpression",
        "line": 15,
        "column": 27
      },
      "data": [
        {
          "alignItems": "center",
          "backgroundColor": "white",
          "border": "1px solid black",
          "borderRadius": "8px",
          "display": "flex",
          "gap": "16px",
          "p": "8px",
          "pr": "16px"
        }
      ]
    }
  ],
  "cva": [],
  "recipe": {
    "checkboxRoot": [
      {
        "type": "recipe",
        "name": "checkboxRoot",
        "box": {
          "type": "map",
          "value": {},
          "node": "CallExpression",
          "line": 38,
          "column": 47
        },
        "data": [
          {}
        ]
      }
    ],

  • 1a2c0e2b: Fix panda.config.xxx file dependencies detection when using the builder (= with PostCSS or with the VSCode extension). It will now also properly resolve tsconfig path aliases.

  • Updated dependencies [6f03ead3]

  • Updated dependencies [8c670d60]

  • Updated dependencies [33198907]

  • Updated dependencies [53fb0708]

  • Updated dependencies [c0335cf4]

  • Updated dependencies [762fd0c9]

  • Updated dependencies [f9247e52]

  • Updated dependencies [1ed239cd]

  • Updated dependencies [09ebaf2e]

  • Updated dependencies [78ed6ed4]

  • Updated dependencies [e48b130a]

  • Updated dependencies [1a2c0e2b]

  • Updated dependencies [b8f8c2a6]

  • Updated dependencies [a3d760ce]

  • Updated dependencies [d9bc63e7]

0.5.0

Patch Changes

0.4.0

Patch Changes

0.3.2

Patch Changes

0.3.1

Patch Changes

0.3.0

Patch Changes

0.0.2

Patch Changes

  • path.join('-'), }) }, }, })

## `utility:created`

This hook is called when the internal classname engine has been created. You can override the default `toHash` function
used when `config.hash` is set to `true`

```ts
export default defineConfig({
  // ...
  hooks: {
    'utility:created': ({ configure }) => {
      configure({
        toHash: (paths, toHash) => {
          const stringConds = paths.join(':')
          const splitConds = stringConds.split('_')
          const hashConds = splitConds.map(toHash)
          return hashConds.join('_')
        },
      })
    },
  },
})

codegen:prepare

This hook is called right before writing the codegen files to disk. You can use this hook to tweak the codegen files

export default defineConfig({
  // ...
  hooks: {
    'codegen:prepare': ({ artifacts, changed }) => {
      // do something with the emitted js/d.ts files
    },
  },
})

  • d5977c24: - Add a --logfile flag to the panda, panda codegen, panda cssgen and panda debug commands.

    • Add a logfile option to the postcss plugin

    Logs will be streamed to the file specified by the --logfile flag or the logfile option. This is useful for debugging issues that occur during the build process.

    panda --logfile ./logs/panda.log
    module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {
      logfile: './logs/panda.log',
    },
  },
}

  • Updated dependencies [0dd45b6a]

  • Updated dependencies [74485ef1]

  • Updated dependencies [ab32d1d7]

  • Updated dependencies [ab32d1d7]

  • Updated dependencies [49c760cd]

  • Updated dependencies [d5977c24]

0.29.1

Patch Changes

0.29.0

Minor Changes

  • a2fb5cc6: - Add support for explicitly specifying config related files that should trigger a context reload on change.

    We automatically track the config file and (transitive) files imported by the config file as much as possible, but sometimes we might miss some. You can use this option as a workaround for those edge cases.

    Set the dependencies option in panda.config.ts to a glob or list of files.

    export default defineConfig({
  // ...
  dependencies: ['path/to/files/**.ts'],
})

    • Invoke config:change hook in more situations (when the --watch flag is passed to panda codegen, panda cssgen, panda ship)

    • Watch for more config options paths changes, so that the related artifacts will be regenerated a bit more reliably (ex: updating the config.hooks will now trigger a full regeneration of styled-system)

Patch Changes

0.28.0

Minor Changes

  • f58f6df2: Refactor config.hooks to be much more powerful, you can now:

    • Tweak the config after it has been resolved (after presets are loaded and merged), this could be used to dynamically load all recipes from a folder
    • Transform a source file's content before parsing it, this could be used to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
    • Implement your own parser logic and add the extracted results to the classic Panda pipeline, this could be used to parse style usage from any template language
    • Tweak the CSS content for any @layer or even right before it's written to disk (if using the CLI) or injected through the postcss plugin, allowing all kinds of customizations like removing the unused CSS variables, etc.
    • React to any config change or after the codegen step (your outdir, the styled-system folder) have been generated

    See the list of available config.hooks here:

    export interface PandaHooks {
  /**
   * Called when the config is resolved, after all the presets are loaded and merged.
   * This is the first hook called, you can use it to tweak the config before the context is created.
   */
  'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
  /**
   * Called when the Panda context has been created and the API is ready to be used.
   */
  'context:created': (args: { ctx: ApiInterface; logger: LoggerInterface }) => void
  /**
   * Called when the config file or one of its dependencies (imports) has changed.
   */
  'config:change': (args: { config: UserConfig }) => MaybeAsyncReturn
  /**
   * Called after reading the file content but before parsing it.
   * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
   * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
   */
  'parser:before': (args: { filePath: string; content: string }) => string | void
  /**
   * Called after the file styles are extracted and processed into the resulting ParserResult object.
   * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
   */
  'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
  /**
   * Called after the codegen is completed
   */
  'codegen:done': () => MaybeAsyncReturn
  /**
   * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
   * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
   * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
   */
  'cssgen:done': (args: {
    artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
    content: string
  }) => string | void
}

Patch Changes

0.27.3

Patch Changes

0.27.2

Patch Changes

0.27.1

Patch Changes

0.27.0

Minor Changes

  • 84304901: Improve performance, mostly for the CSS generation by removing a lot of postcss usage (and plugins).

    Public changes:

    • Introduce a new config.lightningcss option to use lightningcss (currently disabled by default) instead of postcss.
    • Add a new config.browserslist option to configure the browserslist used by lightningcss.
    • Add a --lightningcss flag to the panda and panda cssgen command to use lightningcss instead of postcss for this run.

    Internal changes:

    • markImportant fn from JS instead of walking through postcss AST nodes
    • use a fork of stitches stringify function instead of postcss-css-in-js to write the CSS string from a JS object
    • only compute once TokenDictionary properties
    • refactor serializeStyle to use the same code path as the rest of the pipeline with StyleEncoder / StyleDecoder and rename it to transformStyles to better convey what it does

Patch Changes

0.26.2

Patch Changes

0.26.1

Patch Changes

0.26.0

Minor Changes

  • 1bd7fbb7: Fix @pandacss/postcss plugin regression when the entry CSS file (with @layer rules order) contains user-defined rules, those user-defined rules would not be reloaded correctly after being changed.

Patch Changes

0.25.0

Patch Changes

0.24.2

Patch Changes

0.24.1

Patch Changes

0.24.0

Minor Changes

  • 63b3f1f2: - Boost style extraction performance by moving more work away from postcss
    • Using a hashing strategy, the compiler only computes styles/classname once per style object and prop-value-condition pair
    • Fix regression in previous implementation that increased memory usage per extraction, leading to slower performance over time

Patch Changes

0.23.0

Patch Changes

0.22.1

Patch Changes

0.22.0

Patch Changes

  • a2f6c2c8: Fix potential cross-platform issues with path resolving by using pathe instead of path

  • 11753fea: Improve initial css extraction time by at least 5x 🚀

    Initial extraction time can get slow when using static CSS with lots of recipes or parsing a lot of files.

    Scenarios

    • Park UI went from 3500ms to 580ms (6x faster)
    • Panda Website went from 2900ms to 208ms (14x faster)

    Potential Breaking Change

    If you use hooks in your panda.config file to listen for when css is extracted, we no longer return the css string for performance reasons. We might reconsider this in the future.

  • Updated dependencies [526c6e34]

  • Updated dependencies [8db47ec6]

  • Updated dependencies [9c0d3f8f]

  • Updated dependencies [11753fea]

  • Updated dependencies [c95c40bd]

  • Updated dependencies [e83afef0]

0.21.0

Patch Changes

0.20.1

Patch Changes

0.20.0

Patch Changes

0.19.0

Patch Changes

0.18.3

Patch Changes

0.18.2

Patch Changes

0.18.1

Patch Changes

0.18.0

Patch Changes

0.17.5

Patch Changes

0.17.4

Patch Changes

0.17.3

Patch Changes

0.17.2

Patch Changes

0.17.1

Patch Changes

0.17.0

Minor Changes

  • 12281ff8: Improve support for styled element composition. This ensures that you can compose two styled elements together and the styles will be merged correctly.

    const Box = styled('div', {
  base: {
    background: 'red.light',
    color: 'white',
  },
})

const ExtendedBox = styled(Box, {
  base: { background: 'red.dark' },
})

// <ExtendedBox> will have a background of `red.dark` and a color of `white`

    Limitation: This feature does not allow compose mixed styled composition. A mixed styled composition happens when an element is created from a cva/inline cva, and another created from a config recipe.

    • CVA or Inline CVA + CVA or Inline CVA = ✅
    • Config Recipe + Config Recipe = ✅
    • CVA or Inline CVA + Config Recipe = ❌
    import { button } from '../styled-system/recipes'

const Button = styled('div', button)

// ❌ This will throw an error
const ExtendedButton = styled(Button, {
  base: { background: 'red.dark' },
})

Patch Changes

0.16.0

Minor Changes

  • 36252b1d: ## --minimal flag

    Adds a new --minimal flag for the CLI on the panda cssgen command to skip generating CSS for theme tokens, preflightkeyframes, static and global css

    Thich means that the generated CSS will only contain the CSS related to the styles found in the included files.

    Note that you can use a glob to override the config.include option like this: panda cssgen "src/**/*.css" --minimal

    This is useful when you want to split your CSS into multiple files, for example if you want to split by pages.

    Use it like this:

    panda cssgen "src/**/pages/*.css" --minimal --outfile dist/pages.css

    cssgen {type}

    In addition to the optional glob that you can already pass to override the config.include option, the panda cssgen command now accepts a new {type} argument to generate only a specific type of CSS:

    • preflight
    • tokens
    • static
    • global
    • keyframes

    Note that this only works when passing an --outfile.

    You can use it like this:

    panda cssgen "static" --outfile dist/static.css

Patch Changes

0.15.5

Patch Changes

0.15.4

Patch Changes

0.15.3

Patch Changes

0.15.2

Patch Changes

0.15.1

Patch Changes

0.15.0

Patch Changes

0.14.0

Minor Changes

  • 8106b411: Add generator:done hook to perform actions when codegen artifacts are emitted.

Patch Changes

0.13.1

Patch Changes

0.13.0

Patch Changes

0.12.2

Patch Changes

0.12.1

Patch Changes

0.12.0

Patch Changes

0.11.1

Patch Changes

0.11.0

Patch Changes

0.10.0

Patch Changes

0.9.0

Patch Changes

0.8.0

Patch Changes

0.7.0

Patch Changes

0.6.0

Patch Changes

0.5.1

Patch Changes

  • 5b09ab3b: Add support for --outfile flag in the cssgen command.

    panda cssgen --outfile dist/styles.css

  • 78ed6ed4: Fix issue where using a nested outdir like src/styled-system with a baseUrl like ./src would result on parser NOT matching imports like import { container } from "styled-system/patterns"; cause it would expect the full path src/styled-system

  • e48b130a: - Remove stack from box.toJSON() so that generated JSON files have less noise, mostly useful to get make the panda debug command easier to read

    • Also use the ParserResult.toJSON() method on panda debug command for the same reason

    instead of:

    [
  {
    "type": "map",
    "value": {
      "padding": {
        "type": "literal",
        "value": "25px",
        "node": "StringLiteral",
        "stack": [
          "CallExpression",
          "ObjectLiteralExpression",
          "PropertyAssignment",
          "Identifier",
          "Identifier",
          "VariableDeclaration",
          "StringLiteral"
        ],
        "line": 10,
        "column": 20
      },
      "fontSize": {
        "type": "literal",
        "value": "2xl",
        "node": "StringLiteral",
        "stack": [
          "CallExpression",
          "ObjectLiteralExpression",
          "PropertyAssignment",
          "ConditionalExpression"
        ],
        "line": 11,
        "column": 67
      }
    },
    "node": "CallExpression",
    "stack": [
      "CallExpression",
      "ObjectLiteralExpression"
    ],
    "line": 11,
    "column": 21
  },

    we now have:

    {
  "css": [
    {
      "type": "object",
      "name": "css",
      "box": {
        "type": "map",
        "value": {},
        "node": "CallExpression",
        "line": 15,
        "column": 27
      },
      "data": [
        {
          "alignItems": "center",
          "backgroundColor": "white",
          "border": "1px solid black",
          "borderRadius": "8px",
          "display": "flex",
          "gap": "16px",
          "p": "8px",
          "pr": "16px"
        }
      ]
    }
  ],
  "cva": [],
  "recipe": {
    "checkboxRoot": [
      {
        "type": "recipe",
        "name": "checkboxRoot",
        "box": {
          "type": "map",
          "value": {},
          "node": "CallExpression",
          "line": 38,
          "column": 47
        },
        "data": [
          {}
        ]
      }
    ],

  • 1a2c0e2b: Fix panda.config.xxx file dependencies detection when using the builder (= with PostCSS or with the VSCode extension). It will now also properly resolve tsconfig path aliases.

  • Updated dependencies [6f03ead3]

  • Updated dependencies [8c670d60]

  • Updated dependencies [33198907]

  • Updated dependencies [53fb0708]

  • Updated dependencies [c0335cf4]

  • Updated dependencies [762fd0c9]

  • Updated dependencies [f9247e52]

  • Updated dependencies [1ed239cd]

  • Updated dependencies [09ebaf2e]

  • Updated dependencies [78ed6ed4]

  • Updated dependencies [e48b130a]

  • Updated dependencies [1a2c0e2b]

  • Updated dependencies [b8f8c2a6]

  • Updated dependencies [a3d760ce]

  • Updated dependencies [d9bc63e7]

0.5.0

Patch Changes

0.4.0

Patch Changes

0.3.2

Patch Changes

0.3.1

Patch Changes

0.3.0

Patch Changes

0.0.2

Patch Changes