oncss 1.1.2 → 1.1.3
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/core.d.ts +1 -1
- package/core.js +11 -10
- package/core.js.map +2 -2
- package/package.json +1 -1
- package/readme.md +9 -9
- package/types.d.ts +3 -3
package/core.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare const cssPrefix: (prop: string, value: string) => {
|
|
|
7
7
|
prop: string;
|
|
8
8
|
value: string;
|
|
9
9
|
};
|
|
10
|
-
export declare const style: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys
|
|
10
|
+
export declare const style: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>, dept?: number) => CSSFactoryType | {
|
|
11
11
|
cache: boolean;
|
|
12
12
|
cachekey: string;
|
|
13
13
|
classname: string;
|
package/core.js
CHANGED
|
@@ -3,7 +3,7 @@ _global.Factory = _global.Factory || /* @__PURE__ */ new Map();
|
|
|
3
3
|
const CSSFactory = _global.Factory;
|
|
4
4
|
const uid = (str) => {
|
|
5
5
|
var hash = 0, len = str.length;
|
|
6
|
-
for (var i = 0; i < len; i
|
|
6
|
+
for (var i = 0; i < len; i) {
|
|
7
7
|
hash = (hash << 5) - hash + str.charCodeAt(i);
|
|
8
8
|
hash |= 0;
|
|
9
9
|
}
|
|
@@ -75,7 +75,7 @@ const cssPrefix = (prop, value) => {
|
|
|
75
75
|
PREFIXCACHE.set(prop, { _prop, _vprefix });
|
|
76
76
|
return { prop: _prop, value: _value };
|
|
77
77
|
};
|
|
78
|
-
const style = (_css, cls, opt) => {
|
|
78
|
+
const style = (_css, cls, opt, dept = 0) => {
|
|
79
79
|
let cachekey;
|
|
80
80
|
let classname = cls;
|
|
81
81
|
if (!cls) {
|
|
@@ -92,12 +92,13 @@ const style = (_css, cls, opt) => {
|
|
|
92
92
|
let stack = [`${classname}{`];
|
|
93
93
|
let medias = {};
|
|
94
94
|
let skiped = {};
|
|
95
|
+
dept += 1;
|
|
95
96
|
for (let prop in _css) {
|
|
96
97
|
let val = _css[prop];
|
|
97
98
|
let firstChar = prop.charAt(0);
|
|
98
99
|
if (firstChar === "&") {
|
|
99
100
|
let ncls = prop.replace(/&/g, classname);
|
|
100
|
-
const r = style(val, ncls, opt);
|
|
101
|
+
const r = style(val, ncls, opt, dept);
|
|
101
102
|
if (opt?.skipProps) {
|
|
102
103
|
skiped = {
|
|
103
104
|
...skiped,
|
|
@@ -109,7 +110,7 @@ const style = (_css, cls, opt) => {
|
|
|
109
110
|
if (prop.startsWith("@global") || prop.startsWith("@keyframes")) {
|
|
110
111
|
let _css2 = "";
|
|
111
112
|
for (let selector in val) {
|
|
112
|
-
let r = style(val[selector], selector, opt);
|
|
113
|
+
let r = style(val[selector], selector, opt, dept);
|
|
113
114
|
_css2 += r.stack;
|
|
114
115
|
if (opt?.skipProps) {
|
|
115
116
|
skiped = {
|
|
@@ -124,7 +125,7 @@ const style = (_css, cls, opt) => {
|
|
|
124
125
|
stack.push(_css2);
|
|
125
126
|
}
|
|
126
127
|
} else {
|
|
127
|
-
let r = style(val, classname, opt);
|
|
128
|
+
let r = style(val, classname, opt, dept);
|
|
128
129
|
const atcss = prop + "{" + r.stack + "}";
|
|
129
130
|
stack.push(atcss);
|
|
130
131
|
if (opt?.skipProps) {
|
|
@@ -135,7 +136,7 @@ const style = (_css, cls, opt) => {
|
|
|
135
136
|
}
|
|
136
137
|
}
|
|
137
138
|
} else {
|
|
138
|
-
if (opt?.skipProps && opt.skipProps(prop, val)) {
|
|
139
|
+
if (opt?.skipProps && opt.skipProps(prop, val, dept)) {
|
|
139
140
|
if (!(classname in skiped)) skiped[classname] = [];
|
|
140
141
|
skiped[classname].push(prop);
|
|
141
142
|
continue;
|
|
@@ -155,7 +156,7 @@ const style = (_css, cls, opt) => {
|
|
|
155
156
|
}
|
|
156
157
|
}
|
|
157
158
|
let _css2 = { [prop]: val[media] };
|
|
158
|
-
let r = style(_css2, classname, opt);
|
|
159
|
+
let r = style(_css2, classname, opt, dept);
|
|
159
160
|
let _style = r.stack;
|
|
160
161
|
let mediakey = `@media (min-width: ${breakpoint}px)`;
|
|
161
162
|
medias[mediakey] = medias[mediakey] ? medias[mediakey] + _style : _style;
|
|
@@ -168,7 +169,7 @@ const style = (_css, cls, opt) => {
|
|
|
168
169
|
}
|
|
169
170
|
} else {
|
|
170
171
|
if (opt?.getProps) {
|
|
171
|
-
let _props = opt.getProps(prop, val, _css);
|
|
172
|
+
let _props = opt.getProps(prop, val, _css, dept);
|
|
172
173
|
if (_props) {
|
|
173
174
|
let r = style(_props, classname, {
|
|
174
175
|
...opt,
|
|
@@ -190,14 +191,14 @@ const style = (_css, cls, opt) => {
|
|
|
190
191
|
let r = style(_props, classname, {
|
|
191
192
|
...opt,
|
|
192
193
|
aliases: void 0
|
|
193
|
-
});
|
|
194
|
+
}, dept);
|
|
194
195
|
r.stack = r.stack.replace(`${classname}{`, "").replace(`}`, "");
|
|
195
196
|
stack[0] += r.stack;
|
|
196
197
|
continue;
|
|
197
198
|
}
|
|
198
199
|
}
|
|
199
200
|
if (opt?.getValue) {
|
|
200
|
-
val = opt.getValue(prop, val, _css);
|
|
201
|
+
val = opt.getValue(prop, val, _css, dept);
|
|
201
202
|
}
|
|
202
203
|
let p = cssPrefix(prop, val);
|
|
203
204
|
stack[0] += `${p.prop}:${p.value};`;
|
package/core.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/core.ts"],
|
|
4
|
-
"sourcesContent": ["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\n\nconst _global: any = typeof window !== 'undefined' ? window : global;\n_global.Factory = _global.Factory || new Map<string, CSSFactoryType>();\nexport const CSSFactory = _global.Factory as Map<string, CSSFactoryType>\n\nexport const uid = (str: string) => {\n var hash = 0, len = str.length;\n for (var i = 0; i < len; i++) {\n hash = ((hash << 5) - hash) + str.charCodeAt(i);\n hash |= 0;\n }\n let id = hash.toString(32).slice(-10).replace(/-/g, \"\");\n if (/^\\d/.test(id.charAt(0))) id = 'c' + id;\n return id;\n}\n\nconst number_val_props = [\n \"fontWeight\",\n \"font-weight\",\n \"lineHeight\",\n \"line-height\",\n \"opacity\",\n \"zIndex\",\n \"z-index\",\n \"flex\",\n \"order\",\n \"flexGrow\",\n \"flex-grow\",\n \"flexShrink\",\n \"flex-shrink\",\n \"flexBasis\",\n \"flex-basis\",\n \"columns\",\n \"perspective\",\n \"stroke-dashoffset\"\n]\n\nexport const formatCSSProp = (prop: string) => prop.split(/(?=[A-Z])/).join(\"-\").toLowerCase();\nexport const formatCSSValue = (prop: string, val: any) => typeof val === 'number' && !number_val_props.includes(prop) ? `${val}px` : val\n\nconst PREFIXES = ['webkit', 'moz', 'ms', 'o'];\nlet _declaration: CSSStyleDeclaration;\nconst PREFIXCACHE = new Map();\n\nexport const cssPrefix = (prop: string, value: string): { prop: string, value: string } => {\n value = formatCSSValue(prop, value);\n prop = formatCSSProp(prop);\n\n if (typeof window === 'undefined') {\n return { prop, value };\n }\n\n const declaration = _declaration || (_declaration = document.createElement(\"div\").style);\n value = value?.toString();\n\n // Check if the property and value work as is\n if (declaration.setProperty(prop, value), declaration.getPropertyValue(prop) === value) {\n return { prop, value };\n }\n\n // Check cached property and value prefix\n const cached = PREFIXCACHE.get(prop);\n if (cached) {\n return { prop: cached._prop, value: `${cached._vprefix}${value}` };\n }\n\n let _prop = prop;\n let _value = value;\n let _vprefix = '';\n\n // Try property prefixes\n const camelCaseProp = prop.includes('-') ? prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : prop;\n for (const prefix of PREFIXES) {\n if (declaration[`${prefix}${camelCaseProp}` as any] !== undefined) {\n _prop = `-${prefix}-${prop}`;\n break;\n }\n }\n\n // Check if prefixed property works with the value\n declaration.setProperty(_prop, value);\n if (!declaration.getPropertyValue(_prop)) {\n for (const prefix of PREFIXES) {\n const prefixedValue = `-${prefix}-${value}`;\n if (declaration.setProperty(_prop, prefixedValue), declaration.getPropertyValue(_prop) === prefixedValue) {\n _value = prefixedValue;\n _vprefix = `-${prefix}-`;\n break;\n }\n }\n }\n\n PREFIXCACHE.set(prop, { _prop, _vprefix });\n return { prop: _prop, value: _value };\n};\n\nexport const style = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>) => {\n let cachekey\n let classname = cls\n if (!cls) {\n cachekey = JSON.stringify(_css)\n const has = CSSFactory.get(cachekey)\n if (has) {\n has.cache = true\n return has\n }\n classname = (opt?.classPrefix || \"\") + uid(cachekey)\n } else if (typeof cls !== 'string') {\n throw new Error(`Invalid class name: ${cls}`)\n }\n\n let stack: any = [`${classname}{`]\n let medias: any = {}\n let skiped: any = {}\n\n for (let prop in _css) {\n let val = (_css as any)[prop]\n let firstChar = prop.charAt(0)\n if (firstChar === '&') {\n let ncls = prop.replace(/&/g, classname as string)\n const r: any = style(val, ncls, opt)\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n stack.push(r.stack)\n } else if (firstChar === '@') {\n if (prop.startsWith(\"@global\") || prop.startsWith(\"@keyframes\")) {\n let _css = ''\n for (let selector in val) {\n let r: any = style(val[selector], selector, opt)\n _css += r.stack\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n if (prop.startsWith(\"@keyframes\")) {\n stack.push(`${prop}{${_css}}`)\n } else {\n stack.push(_css)\n }\n } else {\n let r: any = style(val, classname, opt)\n const atcss = prop + \"{\" + r.stack + \"}\"\n stack.push(atcss)\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n } else {\n if (opt?.skipProps && opt.skipProps(prop, val)) {\n if (!((classname as any) in skiped)) skiped[classname as string] = []\n skiped[classname as string].push(prop)\n continue\n }\n if (typeof val === 'object') {\n for (let media in val) {\n if (typeof val[media] === 'object' || typeof val[media] === 'function' || Array.isArray(val[media])) {\n throw new Error(`Invalid css value: ${val[media]}`);\n }\n let breakpoint = media\n let isNumber = !isNaN(parseInt(breakpoint))\n if (!isNumber) {\n if (opt?.breakpoints && !isNaN(parseInt((opt.breakpoints as any)[media]))) {\n breakpoint = opt.breakpoints[media as BreakpointKeys].toString()\n } else {\n throw new Error(`Invalid breakpoint prop: ${media}`);\n }\n }\n let _css = { [prop]: val[media] }\n let r: any = style(_css, classname, opt)\n let _style = r.stack\n let mediakey = `@media (min-width: ${breakpoint}px)`\n medias[mediakey] = medias[mediakey] ? medias[mediakey] + _style : _style\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n } else {\n if (opt?.getProps) {\n let _props: any = opt.getProps(prop, val, _css)\n if (_props) {\n let r: any = style(_props, classname, {\n ...opt,\n getProps: undefined\n })\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n stack.push(r.stack)\n continue;\n }\n }\n if (opt?.aliases && (opt.aliases as any)[prop]) {\n let _props = (opt.aliases as any)[prop](val)\n if (_props) {\n let r: any = style(_props, classname, {\n ...opt,\n aliases: undefined\n })\n r.stack = r.stack.replace(`${classname}{`, '').replace(`}`, '')\n stack[0] += r.stack\n continue;\n }\n }\n if (opt?.getValue) {\n val = opt.getValue(prop, val, _css)\n }\n let p = cssPrefix(prop, val)\n stack[0] += `${p.prop}:${p.value};`\n }\n }\n }\n stack[0] += \"}\"\n if (stack[0] === `${classname}{}`) {\n stack[0] = \"\"\n }\n stack = stack.join('')\n for (let media in medias) {\n stack += `${media}{${medias[media].replace(new RegExp(`}\\\\${classname}\\\\{`, 'g'), '')}}`\n }\n\n if (cachekey) {\n stack = stack.replace(new RegExp(classname as string, 'g'), `.${classname}`)\n const r = {\n cache: false,\n cachekey,\n classname: classname as string,\n css: stack,\n cssraw: _css,\n skiped,\n getStyleTag: () => document?.querySelector(`[data-oncss=\"${classname}\"]`) as HTMLStyleElement | null,\n deleteStyle: () => {\n const tag = document?.querySelector(`[data-oncss=\"${classname}\"]`)\n tag && tag.remove()\n },\n }\n r.toString = () => classname as string\n CSSFactory.set(cachekey, r)\n let inject = opt?.injectStyle || true\n if (inject && typeof window !== 'undefined') {\n if (!document.querySelector(`[data-oncss=\"${classname}\"]`)) {\n const tag = document.createElement(\"style\");\n tag.innerHTML = r.css\n tag.setAttribute(`data-oncss`, classname as string)\n document.head.append(tag)\n }\n }\n return r\n }\n return { stack, skiped }\n}"],
|
|
5
|
-
"mappings": "AAEA,MAAM,UAAe,OAAO,WAAW,cAAc,SAAS;AAC9D,QAAQ,UAAU,QAAQ,WAAW,oBAAI,IAA4B;AAC9D,MAAM,aAAa,QAAQ;AAE3B,MAAM,MAAM,CAAC,QAAgB;AAChC,MAAI,OAAO,GAAG,MAAM,IAAI;AACxB,WAAS,IAAI,GAAG,IAAI,KAAK,
|
|
4
|
+
"sourcesContent": ["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\n\nconst _global: any = typeof window !== 'undefined' ? window : global;\n_global.Factory = _global.Factory || new Map<string, CSSFactoryType>();\nexport const CSSFactory = _global.Factory as Map<string, CSSFactoryType>\n\nexport const uid = (str: string) => {\n var hash = 0, len = str.length;\n for (var i = 0; i < len; i) {\n hash = ((hash << 5) - hash) + str.charCodeAt(i);\n hash |= 0;\n }\n let id = hash.toString(32).slice(-10).replace(/-/g, \"\");\n if (/^\\d/.test(id.charAt(0))) id = 'c' + id;\n return id;\n}\n\nconst number_val_props = [\n \"fontWeight\",\n \"font-weight\",\n \"lineHeight\",\n \"line-height\",\n \"opacity\",\n \"zIndex\",\n \"z-index\",\n \"flex\",\n \"order\",\n \"flexGrow\",\n \"flex-grow\",\n \"flexShrink\",\n \"flex-shrink\",\n \"flexBasis\",\n \"flex-basis\",\n \"columns\",\n \"perspective\",\n \"stroke-dashoffset\"\n]\n\nexport const formatCSSProp = (prop: string) => prop.split(/(?=[A-Z])/).join(\"-\").toLowerCase();\nexport const formatCSSValue = (prop: string, val: any) => typeof val === 'number' && !number_val_props.includes(prop) ? `${val}px` : val\n\nconst PREFIXES = ['webkit', 'moz', 'ms', 'o'];\nlet _declaration: CSSStyleDeclaration;\nconst PREFIXCACHE = new Map();\n\nexport const cssPrefix = (prop: string, value: string): { prop: string, value: string } => {\n value = formatCSSValue(prop, value);\n prop = formatCSSProp(prop);\n\n if (typeof window === 'undefined') {\n return { prop, value };\n }\n\n const declaration = _declaration || (_declaration = document.createElement(\"div\").style);\n value = value?.toString();\n\n // Check if the property and value work as is\n if (declaration.setProperty(prop, value), declaration.getPropertyValue(prop) === value) {\n return { prop, value };\n }\n\n // Check cached property and value prefix\n const cached = PREFIXCACHE.get(prop);\n if (cached) {\n return { prop: cached._prop, value: `${cached._vprefix}${value}` };\n }\n\n let _prop = prop;\n let _value = value;\n let _vprefix = '';\n\n // Try property prefixes\n const camelCaseProp = prop.includes('-') ? prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : prop;\n for (const prefix of PREFIXES) {\n if (declaration[`${prefix}${camelCaseProp}` as any] !== undefined) {\n _prop = `-${prefix}-${prop}`;\n break;\n }\n }\n\n // Check if prefixed property works with the value\n declaration.setProperty(_prop, value);\n if (!declaration.getPropertyValue(_prop)) {\n for (const prefix of PREFIXES) {\n const prefixedValue = `-${prefix}-${value}`;\n if (declaration.setProperty(_prop, prefixedValue), declaration.getPropertyValue(_prop) === prefixedValue) {\n _value = prefixedValue;\n _vprefix = `-${prefix}-`;\n break;\n }\n }\n }\n\n PREFIXCACHE.set(prop, { _prop, _vprefix });\n return { prop: _prop, value: _value };\n};\n\nexport const style = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>, dept = 0) => {\n let cachekey\n let classname = cls\n if (!cls) {\n cachekey = JSON.stringify(_css)\n const has = CSSFactory.get(cachekey)\n if (has) {\n has.cache = true\n return has\n }\n classname = (opt?.classPrefix || \"\") + uid(cachekey)\n } else if (typeof cls !== 'string') {\n throw new Error(`Invalid class name: ${cls}`)\n }\n\n let stack: any = [`${classname}{`]\n let medias: any = {}\n let skiped: any = {}\n dept += 1\n\n for (let prop in _css) {\n let val = (_css as any)[prop]\n let firstChar = prop.charAt(0)\n if (firstChar === '&') {\n let ncls = prop.replace(/&/g, classname as string)\n const r: any = style(val, ncls, opt, dept)\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n stack.push(r.stack)\n } else if (firstChar === '@') {\n if (prop.startsWith(\"@global\") || prop.startsWith(\"@keyframes\")) {\n let _css = ''\n for (let selector in val) {\n let r: any = style(val[selector], selector, opt, dept)\n _css += r.stack\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n if (prop.startsWith(\"@keyframes\")) {\n stack.push(`${prop}{${_css}}`)\n } else {\n stack.push(_css)\n }\n } else {\n let r: any = style(val, classname, opt, dept)\n const atcss = prop + \"{\" + r.stack + \"}\"\n stack.push(atcss)\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n } else {\n if (opt?.skipProps && opt.skipProps(prop, val, dept)) {\n if (!((classname as any) in skiped)) skiped[classname as string] = []\n skiped[classname as string].push(prop)\n continue\n }\n if (typeof val === 'object') {\n for (let media in val) {\n if (typeof val[media] === 'object' || typeof val[media] === 'function' || Array.isArray(val[media])) {\n throw new Error(`Invalid css value: ${val[media]}`);\n }\n let breakpoint = media\n let isNumber = !isNaN(parseInt(breakpoint))\n if (!isNumber) {\n if (opt?.breakpoints && !isNaN(parseInt((opt.breakpoints as any)[media]))) {\n breakpoint = opt.breakpoints[media as BreakpointKeys].toString()\n } else {\n throw new Error(`Invalid breakpoint prop: ${media}`);\n }\n }\n let _css = { [prop]: val[media] }\n let r: any = style(_css, classname, opt, dept)\n let _style = r.stack\n let mediakey = `@media (min-width: ${breakpoint}px)`\n medias[mediakey] = medias[mediakey] ? medias[mediakey] + _style : _style\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n }\n } else {\n if (opt?.getProps) {\n let _props: any = opt.getProps(prop, val, _css, dept)\n if (_props) {\n let r: any = style(_props, classname, {\n ...opt,\n getProps: undefined\n })\n if (opt?.skipProps) {\n skiped = {\n ...skiped,\n ...r.skiped\n }\n }\n stack.push(r.stack)\n continue;\n }\n }\n if (opt?.aliases && (opt.aliases as any)[prop]) {\n let _props = (opt.aliases as any)[prop](val)\n if (_props) {\n let r: any = style(_props, classname, {\n ...opt,\n aliases: undefined\n }, dept)\n r.stack = r.stack.replace(`${classname}{`, '').replace(`}`, '')\n stack[0] += r.stack\n continue;\n }\n }\n if (opt?.getValue) {\n val = opt.getValue(prop, val, _css, dept)\n }\n let p = cssPrefix(prop, val)\n stack[0] += `${p.prop}:${p.value};`\n }\n }\n }\n stack[0] += \"}\"\n if (stack[0] === `${classname}{}`) {\n stack[0] = \"\"\n }\n stack = stack.join('')\n for (let media in medias) {\n stack += `${media}{${medias[media].replace(new RegExp(`}\\\\${classname}\\\\{`, 'g'), '')}}`\n }\n\n if (cachekey) {\n stack = stack.replace(new RegExp(classname as string, 'g'), `.${classname}`)\n const r = {\n cache: false,\n cachekey,\n classname: classname as string,\n css: stack,\n cssraw: _css,\n skiped,\n getStyleTag: () => document?.querySelector(`[data-oncss=\"${classname}\"]`) as HTMLStyleElement | null,\n deleteStyle: () => {\n const tag = document?.querySelector(`[data-oncss=\"${classname}\"]`)\n tag && tag.remove()\n },\n }\n r.toString = () => classname as string\n CSSFactory.set(cachekey, r)\n let inject = opt?.injectStyle || true\n if (inject && typeof window !== 'undefined') {\n if (!document.querySelector(`[data-oncss=\"${classname}\"]`)) {\n const tag = document.createElement(\"style\");\n tag.innerHTML = r.css\n tag.setAttribute(`data-oncss`, classname as string)\n document.head.append(tag)\n }\n }\n return r\n }\n return { stack, skiped }\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["_css"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -63,15 +63,15 @@ The `css` function can be customized through an options object:
|
|
|
63
63
|
|
|
64
64
|
### Available Properties
|
|
65
65
|
|
|
66
|
-
| Property | Type | Description
|
|
67
|
-
| ------------- | ---------- |
|
|
68
|
-
| `classPrefix` | `string` | Adds a prefix to generated class names.
|
|
69
|
-
| `breakpoints` | `object` | Custom breakpoints for responsive designs.
|
|
70
|
-
| `aliases` | `object` | Custom shorthand properties for CSS rules.
|
|
71
|
-
| `injectStyle` | `boolean` | Controls whether styles are auto-injected.
|
|
72
|
-
| `skipProps` | `function` | Filters out unwanted properties.
|
|
73
|
-
| `getValue` | `function` | Transforms property values dynamically.
|
|
74
|
-
| `getProps` | `function` | Customizes specific property handling.
|
|
66
|
+
| Property | Type | Description |
|
|
67
|
+
| ------------- | ---------- | ------------------------------------------------------------------------------------------------- |
|
|
68
|
+
| `classPrefix` | `string` | Adds a prefix to generated class names. |
|
|
69
|
+
| `breakpoints` | `object` | Custom breakpoints for responsive designs. |
|
|
70
|
+
| `aliases` | `object` | Custom shorthand properties for CSS rules. |
|
|
71
|
+
| `injectStyle` | `boolean` | Controls whether styles are auto-injected. |
|
|
72
|
+
| `skipProps` | `function` | Filters out unwanted properties. Receives `prop`, `value`, and `dept` as arguments. |
|
|
73
|
+
| `getValue` | `function` | Transforms property values dynamically. Receives `value`, `prop`, `css`, and `dept` as arguments. |
|
|
74
|
+
| `getProps` | `function` | Customizes specific property handling. Receives `prop`, `value`, `css`, and `dept` as arguments. |
|
|
75
75
|
|
|
76
76
|
### Example with Options
|
|
77
77
|
|
package/types.d.ts
CHANGED
|
@@ -44,9 +44,9 @@ export interface CSSOptionProps<Aliases, BreakpointKeys extends string> {
|
|
|
44
44
|
};
|
|
45
45
|
aliases?: OptionAliases<Aliases>;
|
|
46
46
|
injectStyle?: boolean;
|
|
47
|
-
skipProps?: (prop: string, value: string | number) => boolean | void;
|
|
48
|
-
getValue?: (value: string | number, prop: string, css: CSSProps<Aliases, BreakpointKeys
|
|
49
|
-
getProps?: (prop: string, value: string | number, css: CSSProps<Aliases, BreakpointKeys
|
|
47
|
+
skipProps?: (prop: string, value: string | number, dept: number) => boolean | void;
|
|
48
|
+
getValue?: (value: string | number, prop: string, css: CSSProps<Aliases, BreakpointKeys>, dept: number) => (string | number);
|
|
49
|
+
getProps?: (prop: string, value: string | number, css: CSSProps<Aliases, BreakpointKeys>, dept: number) => CSSProps<Aliases, BreakpointKeys> | void;
|
|
50
50
|
}
|
|
51
51
|
export type CSSFactoryType = {
|
|
52
52
|
css: string;
|