css-in-props 3.6.1 → 3.6.4
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.
- package/README.md +22 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -66,3 +66,25 @@ The prefix-to-handler registry that powers media queries, selectors, conditional
|
|
|
66
66
|
```javascript
|
|
67
67
|
import { transformersByPrefix } from 'css-in-props'
|
|
68
68
|
```
|
|
69
|
+
|
|
70
|
+
## Interaction with the define system
|
|
71
|
+
|
|
72
|
+
The `$` prefix is used both by css-in-props (`$isActive` case conditional) and by the define system (e.g. `$router`, and deprecated v2 handlers like `$propsCollection`, `$collection`). The propertization layer in `@domql/utils/props.js` uses `CSS_SELECTOR_PREFIXES` to decide which keys to move into `props`.
|
|
73
|
+
|
|
74
|
+
**The `$` prefix requires special handling:**
|
|
75
|
+
|
|
76
|
+
Keys starting with `$` that have a matching define handler (either `element.define[key]` or `context.define[key]`) must **stay at the element root** so that `throughInitialDefine` can process them. Only `$`-prefixed keys without define handlers should be moved into `props` for css-in-props processing. This matters for the built-in `$router` handler and for backwards compatibility with older v2 projects using deprecated collection handlers.
|
|
77
|
+
|
|
78
|
+
```javascript
|
|
79
|
+
// In props.js — check define handlers BEFORE checking CSS_SELECTOR_PREFIXES
|
|
80
|
+
const defineValue = this.define?.[key]
|
|
81
|
+
const globalDefineValue = this.context?.define?.[key]
|
|
82
|
+
if (isFunction(defineValue) || isFunction(globalDefineValue)) continue
|
|
83
|
+
|
|
84
|
+
// Only then check the prefix
|
|
85
|
+
if (CSS_SELECTOR_PREFIXES.has(firstChar)) {
|
|
86
|
+
obj.props[key] = value // move to props for css-in-props
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
> **Lesson learned:** Without the define-awareness check, keys like `$propsCollection` were moved into `props` and became invisible to the define system, breaking collection-based rendering in projects like Rosi and BigBrother.
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "css-in-props",
|
|
3
3
|
"description": "Utilize props as CSS methods",
|
|
4
4
|
"author": "symbo.ls",
|
|
5
|
-
"version": "3.6.
|
|
5
|
+
"version": "3.6.4",
|
|
6
6
|
"repository": "https://github.com/symbo-ls/smbls",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"module": "./dist/esm/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"src"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@domql/utils": "^3.6.
|
|
39
|
-
"@symbo.ls/emotion": "^3.6.
|
|
40
|
-
"@symbo.ls/scratch": "^3.6.
|
|
38
|
+
"@domql/utils": "^3.6.4",
|
|
39
|
+
"@symbo.ls/emotion": "^3.6.4",
|
|
40
|
+
"@symbo.ls/scratch": "^3.6.4"
|
|
41
41
|
},
|
|
42
42
|
"gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
|
|
43
43
|
"browser": "./dist/esm/index.js",
|