styleframe 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/CHANGELOG.md +93 -0
  2. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,98 @@
1
1
  # styleframe
2
2
 
3
+ ## 3.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#145](https://github.com/styleframe-dev/styleframe/pull/145) [`1597105`](https://github.com/styleframe-dev/styleframe/commit/1597105d55c1dd43adc6ec146858770a830dc1fb) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add duration design tokens for consistent animation and transition timing
8
+ - Add `useDuration` composable with semantic duration scale from `instant` (0ms) through `slowest` (1000ms)
9
+ - Add `durationValues` default token values: instant, fastest, faster, fast, normal, slow, slower, slowest
10
+ - Register `duration` domain in `useDesignTokensPreset` with full theming and override support
11
+ - Add `duration` namespace to `useTransitionDurationUtility` and `useTransitionDelayUtility` for `@token` references
12
+ - Replace hardcoded `150ms` with `@duration.fast` in `useTransitionPropertyUtility`
13
+
14
+ - [#129](https://github.com/styleframe-dev/styleframe/pull/129) [`2610041`](https://github.com/styleframe-dev/styleframe/commit/2610041beb03a8afc8de17af8857b9931f3359b0) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add custom utility syntax support and separate class name generation from CSS escaping
15
+ - Extract `defaultUtilitySelectorFn` to `@styleframe/core` returning raw class names; add `classNameToCssSelector` for consistent CSS escaping
16
+ - Add `ScannerUtilitiesConfig` with pluggable `pattern`, `parse`, and `selector` functions for custom utility naming conventions
17
+ - Thread custom utilities config through extractor, matcher, scanner, and plugin layers
18
+
19
+ - [#146](https://github.com/styleframe-dev/styleframe/pull/146) [`bff61d1`](https://github.com/styleframe-dev/styleframe/commit/bff61d104eca9b1f2a72911593abf0a7fc90ec34) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Close 416px breakpoint gap by adding 768px md breakpoint
20
+ - Shift default breakpoint scale to align with industry standards (Tailwind, Bootstrap, Chakra)
21
+ - Change md from 992px to 768px to cover the tablet range
22
+ - Shift lg to 992px, xl to 1200px, and add new 2xl at 1440px
23
+
24
+ - [#135](https://github.com/styleframe-dev/styleframe/pull/135) [`228b0c0`](https://github.com/styleframe-dev/styleframe/commit/228b0c0bc36332d371dd8a7ca430ebe2be3ac046) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Implement importree-based HMR with selective cache invalidation
25
+ - Replace full-reload HMR with importree-powered dependency graph for selective Jiti cache invalidation
26
+ - Use persistent shared Jiti instance with `moduleCache: true` so unchanged dependencies stay cached across reloads
27
+ - Add `dependency-graph` module that builds merged forward/reverse import trees for cross-entry dependency tracking
28
+ - Export `createSharedJiti`, `clearJitiCache`, and `clearAllJitiCache` from `@styleframe/loader`
29
+ - Remove `resolve.alias` option in favor of automatic dependency detection via importree
30
+
31
+ - [#137](https://github.com/styleframe-dev/styleframe/pull/137) [`8d6e731`](https://github.com/styleframe-dev/styleframe/commit/8d6e7316dff6ebd0ed5cc29a4061c50786e9e8f5) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `resolve.alias` option to plugin for custom path resolution
32
+ - Add `resolve.alias` option to plugin types for configuring module path alias mappings
33
+ - Resolve relative alias paths to absolute paths relative to the plugin working directory
34
+ - Pass aliases through to Jiti loader and importree dependency graph for proper module resolution and HMR tracking
35
+
36
+ - [#133](https://github.com/styleframe-dev/styleframe/pull/133) [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Refactor design tokens preset, add Button recipe, and improve Badge recipe
37
+ - Refactor `useDesignTokensPreset` with improved variable composables and `createUseDerivedVariable` utility
38
+ - Add `useButtonRecipe` with color, variant, and size support including compound variant styles
39
+ - Improve `useBadgeRecipe` sizing, contrast, and accessibility
40
+ - Update color references from `@color.light`/`@color.dark` to `@color.white`/`@color.black`
41
+ - Enhance `createUseRecipe` with better types and `@`-prefixed token reference support in recipe definitions
42
+
43
+ - [#138](https://github.com/styleframe-dev/styleframe/pull/138) [`5f06459`](https://github.com/styleframe-dev/styleframe/commit/5f064599bae7a3679aeef0dbcb9bfaf0c4167355) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add sanitize.css preset with configurable normalization categories
44
+ - Add `useSanitizePreset` with opt-out config for base, forms, typography, and reduced motion
45
+ - Add `useSanitizeBaseSelectors` with cross-browser normalization (box-sizing, margins, forms, accessibility)
46
+ - Add `useSanitizeFormsSelectors` with form element normalization and consistent select appearance
47
+ - Add `useSanitizeTypographySelectors` with system font stack defaults
48
+ - Add `useSanitizeReduceMotionSelectors` with `prefers-reduced-motion` media query support
49
+
50
+ - [#133](https://github.com/styleframe-dev/styleframe/pull/133) [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add unique id and parent-child traversal to token types, validate @ references, and resolve utility sibling keys
51
+ - Add unique `id` field to Root, Selector, AtRule, Theme, Utility, Modifier, and Variable token types for stable identity tracking
52
+ - Add `parentId` to track parent-child relationships across the token tree
53
+ - Add `root._registry` for efficient id-based lookups and tree traversal
54
+ - Validate `@`-prefixed string references against root-level variables in `parseDeclarationsBlock`, throwing descriptive errors for undefined variables
55
+ - Add null/undefined guard to `ref()` with clear error messages
56
+ - Support `@`-prefixed values in utility entries that resolve to sibling keys (e.g., `{ default: "@solid", solid: "solid" }`)
57
+
58
+ - [#130](https://github.com/styleframe-dev/styleframe/pull/130) [`7ec356a`](https://github.com/styleframe-dev/styleframe/commit/7ec356a0ff945c58df7de5740ef85c6ed781a50a) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add custom utility name support and shorthand utilities preset
59
+ - Add `names` config option to `useUtilitiesPreset` for custom CSS class name prefixes on any utility
60
+ - Add `utilityOptions` parameter to `createUseUtility` and `createUseSpacingUtility` to support name overrides
61
+ - Add `useShorthandUtilitiesPreset` with TailwindCSS-compatible shorthand mappings (e.g., `._m:sm` instead of `._margin:sm`)
62
+
63
+ - [#142](https://github.com/styleframe-dev/styleframe/pull/142) [`89032b8`](https://github.com/styleframe-dev/styleframe/commit/89032b86dee47538a85f10e3083d128aaf60f864) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add z-index design token with semantic stacking scale
64
+ - Add `useZIndex` composable with semantic layer names (base, dropdown, sticky, overlay, modal, popover, toast, max)
65
+ - Add `zIndexValues` defaults with 100-increment scale for consistent stacking order
66
+ - Integrate z-index into `useDesignTokensPreset` and `useUtilitiesPreset`
67
+ - Update z-index utility docs to use semantic token values instead of arbitrary numbers
68
+
69
+ ### Patch Changes
70
+
71
+ - [#141](https://github.com/styleframe-dev/styleframe/pull/141) [`295f04e`](https://github.com/styleframe-dev/styleframe/commit/295f04e6fdd011df6437986cc179e17efd8cd1be) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `@variablename` notation support in `css` template literals
72
+ - `@variablename` strings in static parts of `css` template literals are automatically converted to variable references: `` css`1px solid @color.primary` `` resolves `@color.primary` to `ref("color.primary")`
73
+ - Supports dotted names (e.g., `@color.primary.500`) and multiple references per segment (e.g., `` css`@spacing.x @spacing.y` ``)
74
+
75
+ - [#128](https://github.com/styleframe-dev/styleframe/pull/128) [`71009c2`](https://github.com/styleframe-dev/styleframe/commit/71009c2c0a07a0bfd240e70e61020c8b7e923edb) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add auto-resolve for variables and at-rules in `css` template literal interpolations
76
+ - Variables interpolated directly in `css` are automatically converted to references: `` css`${variable}` `` is equivalent to `` css`${ref(variable)}` ``
77
+ - AtRule and keyframes instances interpolated in `css` resolve to their rule name: `` css`${keyframeInstance}` `` is equivalent to `` css`${keyframeInstance.rule}` ``
78
+
79
+ - [#126](https://github.com/styleframe-dev/styleframe/pull/126) [`3ffb881`](https://github.com/styleframe-dev/styleframe/commit/3ffb8814f9b7db1912180b2e0c53e1b6675df4d6) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Extract modifier registration from `useUtilitiesPreset` into a dedicated `useModifiersPreset` composable with independent configuration
80
+
81
+ - [#140](https://github.com/styleframe-dev/styleframe/pull/140) [`7a61df0`](https://github.com/styleframe-dev/styleframe/commit/7a61df083bc534caa9271a1ef4535f7be979d7c2) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `@variablename` reference support in `variable()` values, `ref()` fallbacks, and `selector()` declaration values
82
+ - `variable('name', '1px solid @color.primary')` resolves embedded `@` references to a CSS object with mixed text and reference parts
83
+ - `ref('name', '@fallbackvar')` resolves `@`-prefixed fallback values to nested references
84
+ - `selector({ border: "1px solid @color.primary" })` resolves embedded `@` references in declaration values
85
+ - Extract shared `resolvePropertyValue()` utility for consistent `@` reference resolution across all contexts
86
+
87
+ - [#130](https://github.com/styleframe-dev/styleframe/pull/130) [`7ec356a`](https://github.com/styleframe-dev/styleframe/commit/7ec356a0ff945c58df7de5740ef85c6ed781a50a) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Document custom utility names and `useShorthandUtilitiesPreset` in utilities preset docs
88
+ - Add `Custom Names` section documenting the `names` config option in `useUtilitiesPreset`
89
+ - Add `useShorthandUtilitiesPreset` section with usage examples and full shorthand name mapping table
90
+
91
+ - Updated dependencies [[`295f04e`](https://github.com/styleframe-dev/styleframe/commit/295f04e6fdd011df6437986cc179e17efd8cd1be), [`71009c2`](https://github.com/styleframe-dev/styleframe/commit/71009c2c0a07a0bfd240e70e61020c8b7e923edb), [`2610041`](https://github.com/styleframe-dev/styleframe/commit/2610041beb03a8afc8de17af8857b9931f3359b0), [`228b0c0`](https://github.com/styleframe-dev/styleframe/commit/228b0c0bc36332d371dd8a7ca430ebe2be3ac046), [`8d6e731`](https://github.com/styleframe-dev/styleframe/commit/8d6e7316dff6ebd0ed5cc29a4061c50786e9e8f5), [`7a61df0`](https://github.com/styleframe-dev/styleframe/commit/7a61df083bc534caa9271a1ef4535f7be979d7c2), [`ce62d31`](https://github.com/styleframe-dev/styleframe/commit/ce62d318275deed277d828fdd8d2500c1a9d767f)]:
92
+ - @styleframe/core@3.1.0
93
+ - @styleframe/plugin@3.1.0
94
+ - @styleframe/transpiler@3.0.1
95
+
3
96
  ## 3.1.0
4
97
 
5
98
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleframe",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "bin": {
5
5
  "styleframe": "./dist/cli.cjs"
6
6
  },
@@ -88,18 +88,18 @@
88
88
  "@styleframe/license": "^2.0.2"
89
89
  },
90
90
  "peerDependencies": {
91
- "@styleframe/plugin": "^3.0.0",
92
- "@styleframe/core": "^3.0.1",
91
+ "@styleframe/plugin": "^3.1.0",
92
+ "@styleframe/core": "^3.1.0",
93
93
  "@styleframe/loader": "^3.0.0",
94
- "@styleframe/transpiler": "^3.0.0"
94
+ "@styleframe/transpiler": "^3.0.1"
95
95
  },
96
96
  "devDependencies": {
97
97
  "@styleframe/config-typescript": "^3.0.0",
98
98
  "@styleframe/cli": "^3.0.0",
99
- "@styleframe/plugin": "^3.0.0",
100
- "@styleframe/core": "^3.0.1",
99
+ "@styleframe/plugin": "^3.1.0",
100
+ "@styleframe/core": "^3.1.0",
101
101
  "@styleframe/loader": "^3.0.0",
102
- "@styleframe/transpiler": "^3.0.0",
102
+ "@styleframe/transpiler": "^3.0.1",
103
103
  "@types/node": "^22.15.17",
104
104
  "@vitest/coverage-v8": "^3.2.4",
105
105
  "bumpp": "^10.1.0",