Skip to Content
Emotion Variantsv2.1.1
DocsChangelog

Changelog

2.1.1

Patch Changes

  • #56 821c511 Thanks @JeongHwan-dev! - docs(core): refresh the README for slots, extend, and responsive variants, and link the new docs site at emotion-variants.org

2.1.0

Minor Changes

  • #53 2e7f5b4 Thanks @JeongHwan-dev! - feat(core): add extend to build one ev() result on another

    • ev({ extend: button, ... }) inherits the parent's base, variants, compoundVariants, and defaultVariants; the parent is not changed
    • the parent's styles come before the child's at every step: base, then each matching variant value, then compound variants
    • a child can add values to an inherited axis, add styles to an inherited value, and declare new axes; defaultVariants are merged per axis with the child's value winning
    • with slots, a child can add slots and style inherited ones; a config with slots can only extend one with slots
    • extend throws at definition time when the value is not an ev() result, or when a config with slots extends one without
    • add a third type parameter to EvConfig<T, N, E> for the type of the extend value (defaults to undefined)

  • #54 36c2199 Thanks @JeongHwan-dev! - feat(core): add createEv for responsive variant values

    • createEv({ breakpoints }) returns { ev }; breakpoints are media queries keyed by a name, declared smallest first
    • every variant prop of that ev also accepts { initial, [breakpoint]: value }; initial falls back to the default variant, and each breakpoint's styles are wrapped in its media query, in declared order
    • an axis that received a responsive value matches no compound variant in that call
    • className() and slot functions accept the same values; defaultVariants does not
    • the exported ev is createEv().ev and behaves as before
    • add the Ev<B> type, and a trailing breakpoint-name parameter B (defaults to never) to EvVariants<T, B>, EvFunction<T, B>, and EvSlotsFunction<N, T, B>

  • #51 768ad08 Thanks @JeongHwan-dev! - feat(core): add slots and compoundSlots for multi-part components

    • ev({ slots }) styles every part of a component from one config. Variant values and compound style are keyed by slot name, and the call returns one style function per slot: const { root, title } = card({ size }), then css={root()}
    • a slot function accepts the same variants as the call, resolved per axis as slot props, then call props, then defaultVariants; compound entries are matched per slot against the resolved values
    • compoundSlots applies one style to several slots, always or only when variants match
    • with slots, className() returns one class name per slot and there is no classNames; base cannot be combined with slots
    • export the EvSlotsFunction type, and add a second type parameter to EvConfig<T, N> for the slot names (defaults to never)
    • ReturnType<ReturnType<typeof ev>> no longer resolves to SerializedStyles[], because ev now returns either form; use SerializedStyles[] from @emotion/react directly

  • #50 83838ab Thanks @JeongHwan-dev! - feat(core): add the VariantProps type and array conditions in compoundVariants

    • export VariantProps<T>, which extracts the variant props from an ev() result: type ButtonVariants = VariantProps<typeof button>
    • a compoundVariants condition can now be an array of values, which matches when the variant has any of them: { variants: { size: ['small', 'medium'] }, style }
    • fix a variant value that only exists on Object.prototype, such as 'constructor', pushing a non-style value into the result; unknown values are now ignored

2.0.0

Major Changes

  • #43 3456f97 Thanks @JeongHwan-dev! - fix(core): apply default variants when a prop is undefined, make classNames return real class names

    • button({ size: undefined }) now falls back to defaultVariants.size instead of dropping it; this matches the README Button example which forwards possibly-undefined props
    • classNames previously returned "[object Object]" for every entry because @emotion/react's css() yields SerializedStyles, not class names. It now injects each style through @emotion/css on first access and returns the generated class names
    • add className(variants), which returns one class name covering base, variant and compound variant styles, for className props and non-React code
    • @emotion/css is a new required peer dependency
    • ev() now always returns SerializedStyles[] (previously Interpolation<unknown>, a bare object when only one style matched); the css prop accepts both

1.0.2

Patch Changes

  • #41 176a7f2 Thanks @JeongHwan-dev! - chore(core): switch to ESM package type and fix ESM type resolution

    • set "type": "module"; emit dist/index.{js,d.ts} for ESM and dist/index.{cjs,d.cts} for CJS
    • split exports "types" per import/require condition so node16 ESM no longer resolves CJS types
    • add "sideEffects": false, use git+https repository url, narrow "files" to dist
    • drop redundant react peer dependency (@emotion/react already declares it)
    • remove duplicate build from the release script (prepublishOnly already builds)
    • rename .lintstagedrc.js to .cjs, delete stale .npmignore, bump @types/node to 22

1.0.1

Patch Changes

  • #33 ddc21a5 Thanks @JeongHwan-dev! - chore(core): build with tsdown instead of tsup

    Output filenames and entry points are unchanged; the bundle is 27-31% smaller gzipped.

  • #27 ae2f98e Thanks @JeongHwan-dev! - chore(core): remove unused @emotion/serialize runtime dependency

  • #25 2630063 Thanks @JeongHwan-dev! - ci(release): migrate release pipeline from semantic-release to changesets

1.0.0

Major Changes

Patch Changes

Edit on GitHub

Last updated on

Types

Every type emotion-variants exports, and when you would reach for it.

On this page

2.1.1Patch Changes2.1.0Minor Changes2.0.0Major Changes1.0.2Patch Changes1.0.1Patch Changes1.0.0Major ChangesPatch Changes