Skip to content

Latest commit

 

History

History
2110 lines (1718 loc) · 53.7 KB

CHANGELOG.md

File metadata and controls

2110 lines (1718 loc) · 53.7 KB
Raw

@pandacss/dev

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

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

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

Minor Changes

  • 2691f16: Add config.themes to easily define and apply a theme on multiple tokens at once, using data attributes and CSS variables.

    Can pre-generate multiple themes with token overrides as static CSS, but also dynamically import and inject a theme stylesheet at runtime (browser or server).

    Example:

    // panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  // main theme
  theme: {
    extend: {
      tokens: {
        colors: {
          text: { value: 'blue' },
        },
      },
      semanticTokens: {
        colors: {
          body: {
            value: {
              base: '{colors.blue.600}',
              _osDark: '{colors.blue.400}',
            },
          },
        },
      },
    },
  },
  // alternative theme variants
  themes: {
    primary: {
      tokens: {
        colors: {
          text: { value: 'red' },
        },
      },
      semanticTokens: {
        colors: {
          muted: { value: '{colors.red.200}' },
          body: {
            value: {
              base: '{colors.red.600}',
              _osDark: '{colors.red.400}',
            },
          },
        },
      },
    },
    secondary: {
      tokens: {
        colors: {
          text: { value: 'blue' },
        },
      },
      semanticTokens: {
        colors: {
          muted: { value: '{colors.blue.200}' },
          body: {
            value: {
              base: '{colors.blue.600}',
              _osDark: '{colors.blue.400}',
            },
          },
        },
      },
    },
  },
})

    Pregenerating themes

    By default, no additional theme variant is generated, you need to specify the specific themes you want to generate in staticCss.themes to include them in the CSS output.

    // panda.config.ts
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  staticCss: {
    themes: ['primary', 'secondary'],
  },
})

    This will generate the following CSS:

    @layer tokens {
  :where(:root, :host) {
    --colors-text: blue;
    --colors-body: var(--colors-blue-600);
  }

  [data-panda-theme='primary'] {
    --colors-text: red;
    --colors-muted: var(--colors-red-200);
    --colors-body: var(--colors-red-600);
  }

  @media (prefers-color-scheme: dark) {
    :where(:root, :host) {
      --colors-body: var(--colors-blue-400);
    }

    [data-panda-theme='primary'] {
      --colors-body: var(--colors-red-400);
    }
  }
}

    An alternative way of applying a theme is by using the new styled-system/themes entrypoint where you can import the themes CSS variables and use them in your app.

    ℹ️ The styled-system/themes will always contain every themes (tree-shaken if not used), staticCss.themes only applies to the CSS output.

    Each theme has a corresponding JSON file with a similar structure:

    {
  "name": "primary",
  "id": "panda-themes-primary",
  "dataAttr": "primary",
  "css": "[data-panda-theme=primary] { ... }"
}

    ℹ️ Note that for semantic tokens, you need to use inject the theme styles, see below

    Dynamically import a theme using its name:

    import { getTheme } from '../styled-system/themes'

const theme = await getTheme('red')
//    ^? {
//     name: "red";
//     id: string;
//     css: string;
// }

    Inject the theme styles into the DOM:

    import { injectTheme } from '../styled-system/themes'

const theme = await getTheme('red')
injectTheme(document.documentElement, theme) // this returns the injected style element

    SSR example with NextJS:

    // app/layout.tsx
import { Inter } from 'next/font/google'
import { cookies } from 'next/headers'
import { ThemeName, getTheme } from '../../styled-system/themes'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const store = cookies()
  const themeName = store.get('theme')?.value as ThemeName
  const theme = themeName && (await getTheme(themeName))

  return (
    <html lang="en" data-panda-theme={themeName ? themeName : undefined}>
      {themeName && (
        <head>
          <style type="text/css" id={theme.id} dangerouslySetInnerHTML={{ __html: theme.css }} />
        </head>
      )}
      <body>{children}</body>
    </html>
  )
}

// app/page.tsx
import { getTheme, injectTheme } from '../../styled-system/themes'

export default function Home() {
  return (
    <>
      <button
        onClick={async () => {
          const current = document.documentElement.dataset.pandaTheme
          const next = current === 'primary' ? 'secondary' : 'primary'
          const theme = await getTheme(next)
          setCookie('theme', next, 7)
          injectTheme(document.documentElement, theme)
        }}
      >
        swap theme
      </button>
    </>
  )
}

// Set a Cookie
function setCookie(cName: string, cValue: any, expDays: number) {
  let date = new Date()
  date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000)
  const expires = 'expires=' + date.toUTCString()
  document.cookie = cName + '=' + cValue + '; ' + expires + '; path=/'
}

    Finally, you can create a theme contract to ensure that all themes have the same structure:

    import { defineThemeContract } from '@pandacss/dev'

const defineTheme = defineThemeContract({
  tokens: {
    colors: {
      red: { value: '' }, // theme implementations must have a red color
    },
  },
})

defineTheme({
  selector: '.theme-secondary',
  tokens: {
    colors: {
      // ^^^^   Property 'red' is missing in type '{}' but required in type '{ red: { value: string; }; }'
      //
      // fixed with
      // red: { value: 'red' },
    },
  },
})

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

  • 1968da5: Allow dynamically recording profiling session by pressing the p key in your terminal when using the --cpu-prof flag for long-running sessions (with -w or --watch for panda / panda cssgen / panda codegen).
  • 8feeb95: Add definePlugin config functions for type-safety around plugins, add missing plugins in config dependencies to trigger a config reload on plugins change
  • Updated dependencies [34d94cf]
  • Updated dependencies [1968da5]
  • Updated dependencies [e855c64]
  • Updated dependencies [8feeb95]
  • Updated dependencies [cca50d5]
  • Updated dependencies [fde37d8]

0.32.1

Patch Changes

0.32.0

Patch Changes

0.31.0

Minor Changes

  • a17fe387: - Add a config.polyfill option that will polyfill the CSS @layer at-rules using a postcss plugin
    • And --polyfill flag to panda and panda cssgen commands

Patch Changes

0.30.2

Patch Changes

0.30.1

Patch Changes

0.30.0

Patch Changes

  • 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 [05686b9d]

  • 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

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

Minor Changes

  • 1efc4277: Add support for emit-pkg command to emit just the package.json file with the required entrypoints. If an existing package.json file is present, the exports field will be updated.

    When setting up Panda in a monorepo, this command is useful in monorepo setups where you want the codegen to run only in a dedicated workspace package.

Patch Changes

0.22.1

Patch Changes

0.22.0

Patch Changes

0.21.0

Patch Changes

0.20.1

Patch Changes

0.20.0

Patch Changes

0.19.0

Minor Changes

  • b3ca8412: Require explicit installation of @pandacss/studio to use the panda studio command.

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

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

Patch Changes

0.13.1

Patch Changes

0.13.0

Minor Changes

  • 04b5fd6c: - Add support for minification in cssgen command.
    • Fix issue where panda --minify does not work.

Patch Changes

0.12.2

Patch Changes

0.12.1

Patch Changes

0.12.0

Minor Changes

  • 75ba44de: Add the CLI interactive mode

Patch Changes

0.11.1

Patch Changes

0.11.0

Patch Changes

0.10.0

Minor Changes

  • a669f4d5: Introduce new slot recipe features.

    Slot recipes are useful for styling composite or multi-part components easily.

    • sva: the slot recipe version of cva
    • defineSlotRecipe: the slot recipe version of defineRecipe

    Definition

    import { sva } from 'styled-system/css'

const button = sva({
  slots: ['label', 'icon'],
  base: {
    label: { color: 'red', textDecoration: 'underline' },
  },
  variants: {
    rounded: {
      true: {},
    },
    size: {
      sm: {
        label: { fontSize: 'sm' },
        icon: { fontSize: 'sm' },
      },
      lg: {
        label: { fontSize: 'lg' },
        icon: { fontSize: 'lg', color: 'pink' },
      },
    },
  },
  defaultVariants: {
    size: 'sm',
  },
})

    Usage

    export function App() {
  const btnClass = button({ size: 'lg', rounded: true })

  return (
    <button>
      <p class={btnClass.label}> Label</p>
      <p class={btnClass.icon}> Icon</p>
    </button>
  )
}

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

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