boss-css 0.0.16 → 0.0.17

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 (6) hide show
  1. package/dist/devtools-app/index.mjs +17 -17
  2. package/dist/parser/jsx/browser.cjs +8 -3
  3. package/dist/parser/jsx/browser.mjs +8 -3
  4. package/dist/runtime/index.cjs +10 -8
  5. package/dist/runtime/index.mjs +10 -8
  6. package/package.json +1 -1
package/dist/devtools-app/index.mjs CHANGED
@@ -12,13 +12,13 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
12
12
  .display\\:flex { display: flex }
13
13
  .z-index\\:2147483647 { z-index: 2147483647 }
14
14
  .position\\:fixed { position: fixed }
15
- .isolation\\:isolate { isolation: isolate }
16
15
  .width\\:100\\% { width: 100% }
16
+ .isolation\\:isolate { isolation: isolate }
17
17
  .width\\:760px { width: 760px }
18
18
  .bottom\\:24px { bottom: 24px }
19
+ .flex\\:0_0_100\\% { flex: 0 0 100% }
19
20
  .align-items\\:stretch { align-items: stretch }
20
21
  .z-index\\:60 { z-index: 60 }
21
- .flex\\:0_0_100\\% { flex: 0 0 100% }
22
22
  .flex\\:1 { flex: 1 }
23
23
  .max-height\\:80vh { max-height: 80vh }
24
24
  .left\\:24px { left: 24px }
@@ -33,8 +33,8 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
33
33
  .height\\:8px { height: 8px }
34
34
  .border-radius\\:18px { border-radius: 18px }
35
35
  .color\\:\\#f5f6f8 { color: #f5f6f8 }
36
- .rotate\\:45deg { rotate: 45deg }
37
36
  .gap\\:14px { gap: 14px }
37
+ .rotate\\:45deg { rotate: 45deg }
38
38
  .border\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.32\\) { border: 1px solid rgba(88,102,128,0.32) }
39
39
  .border\\:1px_solid_\\#2b2f36 { border: 1px solid #2b2f36 }
40
40
  .height\\:26px { height: 26px }
@@ -42,13 +42,13 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
42
42
  .align-items\\:center { align-items: center }
43
43
  .background\\:linear-gradient\\(160deg\\,rgba\\(16\\,20\\,30\\,0\\.96\\)\\,rgba\\(8\\,10\\,16\\,0\\.98\\)\\) { background: linear-gradient(160deg,rgba(16,20,30,0.96),rgba(8,10,16,0.98)) }
44
44
  .padding\\:10px_14px { padding: 10px 14px }
45
- .border-left\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.45\\) { border-left: 1px solid rgba(88,102,128,0.45) }
46
45
  .height\\:1px { height: 1px }
46
+ .border-left\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.45\\) { border-left: 1px solid rgba(88,102,128,0.45) }
47
47
  .gap\\:8px { gap: 8px }
48
48
  .box-shadow\\:0_30px_80px_rgba\\(4\\,6\\,10\\,0\\.65\\) { box-shadow: 0 30px 80px rgba(4,6,10,0.65) }
49
+ .background-color\\:rgba\\(88\\,102\\,128\\,0\\.24\\) { background-color: rgba(88,102,128,0.24) }
49
50
  .height\\:32px { height: 32px }
50
51
  .border-top\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.45\\) { border-top: 1px solid rgba(88,102,128,0.45) }
51
- .background-color\\:rgba\\(88\\,102\\,128\\,0\\.24\\) { background-color: rgba(88,102,128,0.24) }
52
52
  .padding\\:6px_8px { padding: 6px 8px }
53
53
  .backdrop-filter\\:blur\\(14px\\) { backdrop-filter: blur(14px) }
54
54
  .box-shadow\\:0_8px_20px_rgba\\(0\\,0\\,0\\,0\\.3\\) { box-shadow: 0 8px 20px rgba(0,0,0,0.3) }
@@ -58,26 +58,26 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
58
58
  .background-color\\:rgba\\(9\\,12\\,18\\,0\\.8\\) { background-color: rgba(9,12,18,0.8) }
59
59
  .font-family\\:IBM_Plex_Sans\\,Space_Grotesk\\,ui-sans-serif\\,system-ui { font-family: IBM Plex Sans,Space Grotesk,ui-sans-serif,system-ui }
60
60
  .font-family\\:IBM_Plex_Mono\\,ui-monospace\\,SFMono-Regular\\,Menlo\\,Monaco\\,Consolas\\,monospace { font-family: IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace }
61
- .border\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.45\\) { border: 1px solid rgba(88,102,128,0.45) }
62
61
  .align-items\\:flex-start { align-items: flex-start }
62
+ .border\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.45\\) { border: 1px solid rgba(88,102,128,0.45) }
63
63
  .border\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.3\\) { border: 1px solid rgba(88,102,128,0.3) }
64
64
  .pointer-events\\:auto { pointer-events: auto }
65
+ .gap\\:12px { gap: 12px }
65
66
  .min-height\\:26px { min-height: 26px }
66
67
  .border-radius\\:8px { border-radius: 8px }
67
- .gap\\:12px { gap: 12px }
68
68
  .overflow\\:hidden { overflow: hidden }
69
- .padding\\:4px_8px { padding: 4px 8px }
70
69
  .flex-wrap\\:wrap { flex-wrap: wrap }
70
+ .padding\\:4px_8px { padding: 4px 8px }
71
+ .row-gap\\:6px { row-gap: 6px }
71
72
  .min-height\\:32px { min-height: 32px }
72
73
  .font-size\\:10px { font-size: 10px }
73
- .row-gap\\:6px { row-gap: 6px }
74
74
  .color\\:\\#8c98ad { color: #8c98ad }
75
75
  .flex-shrink\\:0 { flex-shrink: 0 }
76
+ .font-size\\:11px { font-size: 11px }
76
77
  .min-height\\:38px { min-height: 38px }
77
78
  .box-shadow\\:0_10px_24px_rgba\\(0\\,0\\,0\\,0\\.35\\) { box-shadow: 0 10px 24px rgba(0,0,0,0.35) }
78
- .font-size\\:11px { font-size: 11px }
79
- .backdrop-filter\\:blur\\(8px\\) { backdrop-filter: blur(8px) }
80
79
  .color\\:\\#b9c4d8 { color: #b9c4d8 }
80
+ .backdrop-filter\\:blur\\(8px\\) { backdrop-filter: blur(8px) }
81
81
  .width\\:110px { width: 110px }
82
82
  .flex\\:0_0_110px { flex: 0 0 110px }
83
83
  .gap\\:4px { gap: 4px }
@@ -87,8 +87,8 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
87
87
  .grid-template-columns\\:1fr_auto_1fr { grid-template-columns: 1fr auto 1fr }
88
88
  .padding\\:2px { padding: 2px }
89
89
  .color\\:\\#ffffff { color: #ffffff }
90
- .height\\:auto { height: auto }
91
90
  .min-width\\:180px { min-width: 180px }
91
+ .height\\:auto { height: auto }
92
92
  .padding\\:14px_18px { padding: 14px 18px }
93
93
  .align-content\\:flex-start { align-content: flex-start }
94
94
  .border-bottom\\:1px_solid_rgba\\(88\\,102\\,128\\,0\\.24\\) { border-bottom: 1px solid rgba(88,102,128,0.24) }
@@ -98,8 +98,8 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
98
98
  .cursor\\:grab { cursor: grab }
99
99
  .max-width\\:100\\% { max-width: 100% }
100
100
  .user-select\\:none { user-select: none }
101
- .appearance\\:none { appearance: none }
102
101
  .color\\:inherit { color: inherit }
102
+ .appearance\\:none { appearance: none }
103
103
  .border\\:0 { border: 0 }
104
104
  .overflow\\:auto { overflow: auto }
105
105
  .outline\\:none { outline: none }
@@ -127,19 +127,19 @@ var e,t,n={955(e,t,n){e.exports=function(e){if(e.CSS&&e.CSS.escape)return e.CSS.
127
127
  .padding\\:8px_16px { padding: 8px 16px }
128
128
  .padding\\:6px_10px { padding: 6px 10px }
129
129
  .transition\\:background-color_120ms_ease\\,color_120ms_ease\\,border-color_120ms_ease { transition: background-color 120ms ease,color 120ms ease,border-color 120ms ease }
130
- .background\\:primary-gradient-vertical { background: var(--color-primary-gradient-vertical) }
131
130
  .color\\:\\#e8eef8 { color: #e8eef8 }
131
+ .background\\:primary-gradient-vertical { background: var(--color-primary-gradient-vertical) }
132
132
  .color\\:primary-soft { color: var(--color-primary-soft) }
133
133
  .background-color\\:\\#0e121a { background-color: #0e121a }
134
- .background\\:transparent { background: transparent }
135
134
  .border\\:1px_solid_rgba\\(86\\,98\\,120\\,0\\.45\\) { border: 1px solid rgba(86,98,120,0.45) }
136
- .color\\:\\#c4cede { color: #c4cede }
135
+ .background\\:transparent { background: transparent }
137
136
  .border-radius\\:12px { border-radius: 12px }
137
+ .color\\:\\#c4cede { color: #c4cede }
138
138
  .padding\\:8px { padding: 8px }
139
139
  .box-shadow\\:0_16px_30px_rgba\\(0\\,0\\,0\\,0\\.45\\) { box-shadow: 0 16px 30px rgba(0,0,0,0.45) }
140
140
  .padding\\:12px_14px { padding: 12px 14px }
141
- .border\\:1px_solid_rgba\\(120\\,132\\,156\\,0\\.4\\) { border: 1px solid rgba(120,132,156,0.4) }
142
141
  .color\\:\\#d8e2f1 { color: #d8e2f1 }
142
+ .border\\:1px_solid_rgba\\(120\\,132\\,156\\,0\\.4\\) { border: 1px solid rgba(120,132,156,0.4) }
143
143
  .padding\\:4px_10px { padding: 4px 10px }
144
144
  .gap\\:16px { gap: 16px }
145
145
  .background-color\\:rgba\\(16\\,18\\,24\\,0\\.96\\) { background-color: rgba(16,18,24,0.96) }
package/dist/parser/jsx/browser.cjs CHANGED
@@ -41,13 +41,18 @@ const onBrowserObjectStart = (api, { input, tag = "div", contexts = [], output =
41
41
  delete input[prop];
42
42
  continue;
43
43
  }
44
- if (ignoredProps.has(prop) || require_isDOMProp.default(tag, prop)) {
45
- output[prop] = input[prop];
44
+ const value = input[prop];
45
+ const isNestedContextObject = value !== null && typeof value === "object" && !Array.isArray(value);
46
+ const resolved = api.dictionary.resolve(prop);
47
+ const hasDescriptor = Boolean(resolved.descriptor);
48
+ const isCssProp = (0, _boss_css_is_css_prop.default)(tag, prop);
49
+ if (ignoredProps.has(prop) || require_isDOMProp.default(tag, prop) || !isCssProp && !hasDescriptor && !isNestedContextObject) {
50
+ output[prop] = value;
46
51
  delete input[prop];
47
52
  continue;
48
53
  }
49
54
  if (typeof input[prop] === "function") {
50
- if (isClassnameFirst && (0, _boss_css_is_css_prop.default)(tag, prop)) continue;
55
+ if (isClassnameFirst) continue;
51
56
  input[prop] = input[prop]();
52
57
  }
53
58
  }
package/dist/parser/jsx/browser.mjs CHANGED
@@ -39,13 +39,18 @@ const onBrowserObjectStart = (api, { input, tag = "div", contexts = [], output =
39
39
  delete input[prop];
40
40
  continue;
41
41
  }
42
- if (ignoredProps.has(prop) || isDOMProp(tag, prop)) {
43
- output[prop] = input[prop];
42
+ const value = input[prop];
43
+ const isNestedContextObject = value !== null && typeof value === "object" && !Array.isArray(value);
44
+ const resolved = api.dictionary.resolve(prop);
45
+ const hasDescriptor = Boolean(resolved.descriptor);
46
+ const isCssProp = isCSSProp(tag, prop);
47
+ if (ignoredProps.has(prop) || isDOMProp(tag, prop) || !isCssProp && !hasDescriptor && !isNestedContextObject) {
48
+ output[prop] = value;
44
49
  delete input[prop];
45
50
  continue;
46
51
  }
47
52
  if (typeof input[prop] === "function") {
48
- if (isClassnameFirst && isCSSProp(tag, prop)) continue;
53
+ if (isClassnameFirst) continue;
49
54
  input[prop] = input[prop]();
50
55
  }
51
56
  }
package/dist/runtime/index.cjs CHANGED
@@ -43,8 +43,7 @@ function resolveStyleTag(input) {
43
43
  function factory(tag) {
44
44
  return function $$(props, ref, ...restArgs) {
45
45
  const currentApi = getApi();
46
- if (tag || ref !== void 0) {
47
- let tagName = tag;
46
+ if (tag !== void 0 || ref !== void 0) {
48
47
  const input = props ?? {};
49
48
  const { children, as, ...rest } = input;
50
49
  const runtimeApi = currentApi.runtimeApi;
@@ -56,12 +55,15 @@ function factory(tag) {
56
55
  if (applyRef) applyRef(rest, ref);
57
56
  else rest.ref = ref;
58
57
  }
59
- const asTag = typeof as === "string" ? as : void 0;
60
- const displayName = asTag || tagName;
61
- tagName = asTag || tagName || "div";
62
- const Component = createComponent(tagName);
63
- Component.displayName = displayName ? "$$." + displayName : "$$";
64
- const output = resolveBossOutput(rest, tagName);
58
+ const asBossTag = as && typeof as === "function" && typeof as.__bossTag === "string" ? as.__bossTag : void 0;
59
+ const styleTag = (typeof as === "string" ? as : asBossTag) ?? (typeof tag === "string" ? tag : void 0) ?? "div";
60
+ const renderTarget = as ?? tag ?? "div";
61
+ const Component = typeof renderTarget === "string" ? createComponent(renderTarget) : renderTarget;
62
+ if (typeof Component === "function" && typeof Component.__bossTag === "string") {
63
+ const displayName = typeof as === "string" ? as : typeof tag === "string" ? tag : styleTag;
64
+ Component.displayName = displayName ? "$$." + displayName : "$$";
65
+ }
66
+ const output = resolveBossOutput(rest, styleTag);
65
67
  if (dev !== void 0) return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren, dev);
66
68
  if (resolvedChildren === void 0) return currentApi.runtimeApi?.createElement(Component, output);
67
69
  return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren);
package/dist/runtime/index.mjs CHANGED
@@ -43,8 +43,7 @@ function resolveStyleTag(input) {
43
43
  function factory(tag) {
44
44
  return function $$(props, ref, ...restArgs) {
45
45
  const currentApi = getApi();
46
- if (tag || ref !== void 0) {
47
- let tagName = tag;
46
+ if (tag !== void 0 || ref !== void 0) {
48
47
  const input = props ?? {};
49
48
  const { children, as, ...rest } = input;
50
49
  const runtimeApi = currentApi.runtimeApi;
@@ -56,12 +55,15 @@ function factory(tag) {
56
55
  if (applyRef) applyRef(rest, ref);
57
56
  else rest.ref = ref;
58
57
  }
59
- const asTag = typeof as === "string" ? as : void 0;
60
- const displayName = asTag || tagName;
61
- tagName = asTag || tagName || "div";
62
- const Component = createComponent(tagName);
63
- Component.displayName = displayName ? "$$." + displayName : "$$";
64
- const output = resolveBossOutput(rest, tagName);
58
+ const asBossTag = as && typeof as === "function" && typeof as.__bossTag === "string" ? as.__bossTag : void 0;
59
+ const styleTag = (typeof as === "string" ? as : asBossTag) ?? (typeof tag === "string" ? tag : void 0) ?? "div";
60
+ const renderTarget = as ?? tag ?? "div";
61
+ const Component = typeof renderTarget === "string" ? createComponent(renderTarget) : renderTarget;
62
+ if (typeof Component === "function" && typeof Component.__bossTag === "string") {
63
+ const displayName = typeof as === "string" ? as : typeof tag === "string" ? tag : styleTag;
64
+ Component.displayName = displayName ? "$$." + displayName : "$$";
65
+ }
66
+ const output = resolveBossOutput(rest, styleTag);
65
67
  if (dev !== void 0) return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren, dev);
66
68
  if (resolvedChildren === void 0) return currentApi.runtimeApi?.createElement(Component, output);
67
69
  return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "boss-css",
3
- "version": "0.0.16",
3
+ "version": "0.0.17",
4
4
  "description": "Polymorphic, usage-driven CSS-in-JS.",
5
5
  "bin": {
6
6
  "boss": "./dist/cli/index.cjs",