- #178
d6be7fa
Thanks @roginfarrer! - No new changes since last release. Marking as stable!
- #169
54915d1
Thanks @s-robertson! - Fix an issue where conditionless properties that have both static and dynamic values wouldn't provide autocomplete suggestions for the static values.
- #156
98dc1ed
Thanks @roginfarrer! - Fixed complex type errors related to the permutations of configuration. See use #101 for example.
-
3731e6a: Support assigning properties to layers via
@layer
option ondefineProperties
Example usage:
// sprinkles.css.ts import { defineProperties } from "rainbow-sprinkles"; import { layer } from "@vanilla-extract/css"; export const sprinklesLayer = layer(); const properties = defineProperties({ "@layer": sprinklesLayer, // etc. });
- d2f2e29: Update flexShrink type to support string values
- 4a82f2a: Changed the type off
outlineOffset
from<length>
to<line-width>{1,4}
. This allows valid string sizes to be used such aspx
andrem
units.
- 0173ace: Added support for
@container
queries
- 4e88f36: Fixed inline styles created for staticProperties
- a4ef068: Allow scale keys with hyphen or dot by modifying VALUE_REGEX
- fabac72: Replace String.matchAll with RegExp.exec to broaden browser and Node version support
- bf7d842: Replaced Array.at() to improve browser support
- 35565d6: - Added support for multiple vars in the same prop value
- Added caching to increase performance of repeatedly parsing prop values
- 0af248c: Update types to allow
null
in sprinkle values - 19bd82c: Fixed classes not being created when property value is 0
- ce5d3ab: Updated CSS type for Line Width to support strings
- 9818127: Fixed stringification of number values
- 9835d49: Fixes errors when using Numbers as values
- 5030301: Attached
properties
to rainbowSprinkles method to access all configured property names
- a4ec472: Added support for negative values
- d60c450: Updated dependencies
- 0db3335: Prevents assigning a variable if the value of a property matches a static value.
- a1cc5b9: Add support for no conditions
-
e9f8620: This is a big refactor to support composing multiple instances of properties. AKA, this makes the API match closer to
@vanilla-extract/sprinkles
, where you usedefineProperties
to create one or more sets of properties, then compose them withcreateRainbowSprinkles
.Before:
// rainbow-sprinkles.css.ts import {createRainbowSprinkles} from 'rainbow-sprinkles'; export const rainbowSprinkles = createRainbowSprinkles({ ... })
After:
// rainbow-sprinkles.css.ts import {defineProperties, createRainbowSprinkles} from 'rainbow-sprinkles'; const properties = defineProperties({ ... }) export const rainbowSprinkles = createRainbowSprinkles(properties) ```tx
- 4d0158a: - Prevents scale values that do not have a `# rainbow-sprinkles prefix from evaluating to scale values.
- Fixes the case where a configured CSS property had a defined scale for staticProperties, and allowed arbitrary values through dynamicProperties, and the incorrect classes were being generated
- 357ff4b: Fix latest tag
-
de5a718: -
createRainbowSprinkles
can now (and should) be created in a.css.js
filecreateRainbowSprinkles
now creates the CSS and returns just the runtime function:rainbowSprinkles
rainbowSprinkles
works similarly togetBoxProps
, but now it returns a new property,otherProps
, which are the props filtered through the function that are not rainbow sprinkles.
The runtime function produced by
createRainbowSprinkles
is now serialized, meaning it can be exported from a.css.js
file. (Attempting to do so previously would throw an error when being compiled by vanilla-extract.). Subsequently, this allowed a larger refactor to simplify the set-up API.Before:
// rainbow-sprinkles.ts export const { getBoxProps, extractSprinklesFromProps, createRainbowSprinklesCss } = createRainbowSprinkles({ ... })
After:
// rainbow-sprinkles.css.ts export const rainbowSprinkles = createRainbowSprinkles({ ... })
rainbowSprinkles
functions similarly togetBoxProps
, with the notable addition ofotherProps
:// App.tsx import { rainbowSprinkles } from "./rainbow-sprinkles.css"; const Box = (props) => { const { className, style, otherProps } = rainbowSprinkles(props); return <div className={className} style={style} {...otherProps} />; };
- b6931a1: Fixed processing of null or undefined prop values
- e97903d: Add CSSVarFunction as a value type for dynamicProperties
- 643499a: Add CSSVarFunction as value to dynamicProperties and staticProperties
- b1a10d9: Move vanilla-extract dependencies to peer dependencies
- 4440ab3: Replaced csstype with internal fork
- ce2f0ce: Update readme
- abbd196: Refactor of the CSS creation logic to improve readability and types
- f327cba: Refactored and improved types, so sprinkles props are now fully accurate. Additionally, all values that are provided with an alias (e.g., when using
vars
) will require a '$' prefix
-
271d262: Introduced staticProperties, which allows configuration of fixed utility classes (not dynamic). Can be useful for frequently used CSS property/value pairs to reduce overall bundle size
properties
renamed todynamicProperties
-
80821d8: - Introduced
staticProperties
, which allows configuration of fixed utility classes (not dynamic). Can be useful for frequently used CSS property/value pairs to reduce overall bundle sizeproperties
renamed todynamicProperties
prefix. This helps to clarify which values are theme values when other values are acceptable.