oncss 1.0.0 → 1.0.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 -2
- package/core.js +1 -1
- package/core.js.map +3 -3
- package/index.d.ts +2 -2
- package/index.js +1 -1
- package/index.js.map +2 -2
- package/package.json +2 -2
- package/readme.md +112 -3
- package/types.d.ts +6 -3
package/core.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';
|
|
2
2
|
export declare const CSSFactory: Map<string, CSSFactoryType>;
|
|
3
|
-
export declare const uid: (str: string) =>
|
|
3
|
+
export declare const uid: (str: string) => string;
|
|
4
4
|
export declare const formatCSSProp: (prop: string) => string;
|
|
5
5
|
export declare const formatCSSValue: (prop: string, val: any) => any;
|
|
6
6
|
export declare const cssPrefix: (prop: string, value: string) => {
|
|
@@ -14,7 +14,6 @@ export declare const style: <Aliases, BreakpointKeys extends string>(_css: CSSPr
|
|
|
14
14
|
css: any;
|
|
15
15
|
cssraw: CSSProps<Aliases, BreakpointKeys>;
|
|
16
16
|
skiped: any;
|
|
17
|
-
toString: () => string;
|
|
18
17
|
getStyleTag: () => HTMLStyleElement | null;
|
|
19
18
|
deleteStyle: () => void;
|
|
20
19
|
} | {
|
package/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const k=typeof window<"u"?window:global;k.Factory=k.Factory||new Map;const
|
|
1
|
+
const k=typeof window<"u"?window:global;k.Factory=k.Factory||new Map;const m=k.Factory,b=r=>{for(var n=0,t=r.length,f=0;f<t;f++)n=(n<<5)-n+r.charCodeAt(f),n|=0;let s=n.toString(32).slice(-10).replace(/-/g,"");return/^\d/.test(s.charAt(0))&&(s="c"+s),s},C=["fontWeight","font-weight","lineHeight","line-height","opacity","zIndex","z-index","flex","order","flexGrow","flex-grow","flexShrink","flex-shrink","flexBasis","flex-basis","columns","perspective","stroke-dashoffset"],E=r=>r.split(/(?=[A-Z])/).join("-").toLowerCase(),A=(r,n)=>typeof n=="number"&&!C.includes(r)?`${n}px`:n,$=["webkit","moz","ms","o"];let x;const P=new Map,_=(r,n)=>{if(n=A(r,n),r=E(r),typeof window>"u")return{prop:r,value:n};const t=x||(x=document.createElement("div").style);if(n=n?.toString(),t.setProperty(r,n),t.getPropertyValue(r)===n)return{prop:r,value:n};const f=P.get(r);if(f)return{prop:f._prop,value:`${f._vprefix}${n}`};let s=r,o=n,d="";const l=r.includes("-")?r.replace(/-([a-z])/g,(e,i)=>i.toUpperCase()):r;for(const e of $)if(t[`${e}${l}`]!==void 0){s=`-${e}-${r}`;break}if(t.setProperty(s,n),!t.getPropertyValue(s))for(const e of $){const i=`-${e}-${n}`;if(t.setProperty(s,i),t.getPropertyValue(s)===i){o=i,d=`-${e}-`;break}}return P.set(r,{_prop:s,_vprefix:d}),{prop:s,value:o}},g=(r,n,t)=>{let f,s=n;if(n){if(typeof n!="string")throw new Error(`Invalid class name: ${n}`)}else{f=JSON.stringify(r);const e=m.get(f);if(e)return e.cache=!0,e;s=(t?.classPrefix||"")+b(f)}let o=[`${s}{`],d={},l={};for(let e in r){let i=r[e],y=e.charAt(0);if(y==="&"){let a=e.replace(/&/g,s);const c=g(i,a,t);t?.skipProps&&(l={...l,...c.skiped}),o.push(c.stack)}else if(y==="@")if(e.startsWith("@global")||e.startsWith("@keyframes")){let a="";for(let c in i){let p=g(i[c],c,t);a+=p.stack,t?.skipProps&&(l={...l,...p.skiped})}e.startsWith("@keyframes")?o.push(`${e}{${a}}`):o.push(a)}else{let a=g(i,s,t);const c=e+"{"+a.stack+"}";o.push(c),t?.skipProps&&(l={...l,...a.skiped})}else if(typeof i=="object")for(let a in i){if(typeof i[a]=="object"||typeof i[a]=="function"||Array.isArray(i[a]))throw new Error(`Invalid css value: ${i[a]}`);let c=a;if(!!isNaN(parseInt(c)))if(t?.breakpoints&&!isNaN(parseInt(t.breakpoints[a])))c=t.breakpoints[a].toString();else throw new Error(`Invalid breakpoint prop: ${a}`);let w={[e]:i[a]},S=g(w,s,t),h=S.stack,u=`@media (min-width: ${c}px)`;d[u]=d[u]?d[u]+h:h,t?.skipProps&&(l={...l,...S.skiped})}else{if(t?.skipProps&&t.skipProps(e,i)){l[s]||(l[s]=[]),l[s].push(e);continue}if(t?.getProps){let c=t.getProps(e,i,r);if(c){let p=g(c,s,{...t,getProps:void 0});t?.skipProps&&(l={...l,...p.skiped}),o.push(p.stack);continue}}if(t?.getValue)i=t.getValue(e,i,r);else if(t?.aliases&&t.aliases[e]){let c=t.aliases[e](e,i);if(c){let p=g(c,s,t);p.stack=p.stack.replace(`${s}{`,"").replace("}",""),o[0]+=p.stack,l[s]=p.skiped;continue}}let a=_(e,i);o[0]+=`${a.prop}:${a.value};`}}o[0]+="}",o[0]===`${s}{}`&&(o[0]=""),o=o.join("");for(let e in d)o+=`${e}{${d[e].replace(new RegExp(`}\\${s}\\{`,"g"),"")}}`;if(f){o=o.replace(new RegExp(s,"g"),`.${s}`);const e={cache:!1,cachekey:f,classname:s,css:o,cssraw:r,skiped:l,getStyleTag:()=>document?.querySelector(`[data-oncss="${s}"]`),deleteStyle:()=>{const y=document?.querySelector(`[data-oncss="${s}"]`);y&&y.remove()}};if(e.toString=()=>s,m.set(f,e),(t?.injectStyle||!0)&&typeof window<"u"){if(document.querySelector(`[data-oncss="${s}"]`))return;const y=document.createElement("style");y.innerHTML=e.css,y.setAttribute("data-oncss",s),document.head.append(y)}return e}return{stack:o,skiped:l}};export{m as CSSFactory,_ as cssPrefix,E as formatCSSProp,A as formatCSSValue,g as style,b as uid};
|
|
2
2
|
//# sourceMappingURL=core.js.map
|
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';\r\n\r\nconst _global: any = typeof window !== 'undefined' ? window : global;\r\n_global.Factory = _global.Factory || new Map<string, CSSFactoryType>();\r\nexport const CSSFactory = _global.Factory as Map<string, CSSFactoryType>\r\n\r\nexport const uid = (str: string) => {\r\n var hash = 0, len = str.length;\r\n for (var i = 0; i < len; i++) {\r\n hash = ((hash << 5) - hash) + str.charCodeAt(i);\r\n hash |= 0;\r\n }\r\n let id = hash.toString(32).slice(-10).replaceAll(\"-\", \"\");\r\n if (/^\\d/.test(id.charAt(0))) id = 'c' + id;\r\n return id;\r\n}\r\n\r\nconst number_val_props = [\r\n \"fontWeight\",\r\n \"font-weight\",\r\n \"lineHeight\",\r\n \"line-height\",\r\n \"opacity\",\r\n \"zIndex\",\r\n \"z-index\",\r\n \"flex\",\r\n \"order\",\r\n \"flexGrow\",\r\n \"flex-grow\",\r\n \"flexShrink\",\r\n \"flex-shrink\",\r\n \"flexBasis\",\r\n \"flex-basis\",\r\n \"columns\",\r\n \"perspective\",\r\n \"stroke-dashoffset\"\r\n]\r\n\r\nexport const formatCSSProp = (prop: string) => prop.split(/(?=[A-Z])/).join(\"-\").toLowerCase();\r\nexport const formatCSSValue = (prop: string, val: any) => typeof val === 'number' && !number_val_props.includes(prop) ? `${val}px` : val\r\n\r\nconst PREFIXES = ['webkit', 'moz', 'ms', 'o'];\r\nlet _declaration: CSSStyleDeclaration;\r\nconst PREFIXCACHE = new Map();\r\n\r\nexport const cssPrefix = (prop: string, value: string): { prop: string, value: string } => {\r\n value = formatCSSValue(prop, value);\r\n prop = formatCSSProp(prop);\r\n\r\n if (typeof window === 'undefined') {\r\n return { prop, value };\r\n }\r\n\r\n const declaration = _declaration || (_declaration = document.createElement(\"div\").style);\r\n value = value?.toString();\r\n\r\n // Check if the property and value work as is\r\n if (declaration.setProperty(prop, value), declaration.getPropertyValue(prop) === value) {\r\n return { prop, value };\r\n }\r\n\r\n // Check cached property and value prefix\r\n const cached = PREFIXCACHE.get(prop);\r\n if (cached) {\r\n return { prop: cached._prop, value: `${cached._vprefix}${value}` };\r\n }\r\n\r\n let _prop = prop;\r\n let _value = value;\r\n let _vprefix = '';\r\n\r\n // Try property prefixes\r\n const camelCaseProp = prop.includes('-') ? prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : prop;\r\n for (const prefix of PREFIXES) {\r\n if (declaration[`${prefix}${camelCaseProp}` as any] !== undefined) {\r\n _prop = `-${prefix}-${prop}`;\r\n break;\r\n }\r\n }\r\n\r\n // Check if prefixed property works with the value\r\n declaration.setProperty(_prop, value);\r\n if (!declaration.getPropertyValue(_prop)) {\r\n for (const prefix of PREFIXES) {\r\n const prefixedValue = `-${prefix}-${value}`;\r\n if (declaration.setProperty(_prop, prefixedValue), declaration.getPropertyValue(_prop) === prefixedValue) {\r\n _value = prefixedValue;\r\n _vprefix = `-${prefix}-`;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n PREFIXCACHE.set(prop, { _prop, _vprefix });\r\n return { prop: _prop, value: _value };\r\n};\r\n\r\nexport const style = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>) => {\r\n let cachekey\r\n let classname = cls\r\n if (!cls) {\r\n cachekey = JSON.stringify(_css)\r\n const has = CSSFactory.get(cachekey)\r\n if (has) {\r\n has.cache = true\r\n return has\r\n }\r\n classname = uid(cachekey)\r\n } else if (typeof cls !== 'string') {\r\n throw new Error(`Invalid class name: ${cls}`)\r\n }\r\n\r\n let stack: any = [`${classname}{`]\r\n let medias: any = {}\r\n let skiped: any = {}\r\n\r\n for (let prop in _css) {\r\n let val = (_css as any)[prop]\r\n\r\n if (prop.startsWith(\"&\")) {\r\n let ncls = prop.replaceAll(\"&\", classname as string)\r\n const r: any = style(val, ncls, opt)\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n stack.push(r.stack)\r\n } else if (prop.startsWith(\"@media\")) {\r\n let r: any = style(val, classname, opt)\r\n const mediacss = prop + \"{\" + r.stack + \"}\"\r\n stack.push(mediacss)\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n } else if (prop.startsWith(\"@keyframes\")) {\r\n let frams = ''\r\n for (let frame in val) {\r\n const r: any = style(val[frame], frame, opt)\r\n frams += r.stack\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n stack.push(`${prop}{${frams}}`)\r\n } else if (prop.startsWith(\"@global\")) {\r\n let _css = ''\r\n for (let selector in val) {\r\n let r: any = style(val[selector], selector, opt)\r\n _css += r.stack\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n stack.push(_css)\r\n } else if (typeof val === 'object') {\r\n for (let media in val) {\r\n if (typeof val[media] === 'object' || typeof val[media] === 'function' || Array.isArray(val[media])) {\r\n throw new Error(`Invalid css value: ${val[media]}`);\r\n }\r\n let breakpoint = media\r\n let isNumber = !isNaN(parseInt(breakpoint))\r\n if (!isNumber) {\r\n if (opt?.breakpoints && !isNaN(parseInt((opt.breakpoints as any)[media]))) {\r\n breakpoint = opt.breakpoints[media as BreakpointKeys].toString()\r\n } else {\r\n throw new Error(`Invalid breakpoint prop: ${media}`);\r\n }\r\n }\r\n let _css = { [prop]: val[media] }\r\n let r: any = style(_css, classname, opt)\r\n let _style = r.stack\r\n let mediakey = `@media (min-width: ${breakpoint}px)`\r\n medias[mediakey] = medias[mediakey] ? medias[mediakey] + _style : _style\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n } else {\r\n if (opt?.skipProps && opt.skipProps(prop, val)) {\r\n if (!skiped[classname as string]) skiped[classname as string] = []\r\n skiped[classname as string].push(prop)\r\n continue\r\n }\r\n if (opt?.getProps) {\r\n let _props: any = opt.getProps(prop, val, _css)\r\n if (_props) {\r\n let s = style(_props, classname, {\r\n ...opt,\r\n getProps: undefined\r\n })\r\n stack.push(s)\r\n continue;\r\n }\r\n }\r\n if (opt?.getValue) {\r\n val = opt.getValue(prop, val, _css)\r\n } else if (opt?.aliases && (opt.aliases as any)[prop]) {\r\n let _props = (opt.aliases as any)[prop](prop, val)\r\n if (_props) {\r\n let r: any = style(_props, classname, {\r\n ...opt,\r\n getProps: undefined\r\n })\r\n let s = r.stack\r\n s = s.replace(`${classname}{`, '').replace(`}`, '')\r\n s = s.replace(`}`, '')\r\n stack[0] += s\r\n skiped[classname as string] = r.skiped\r\n continue;\r\n }\r\n }\r\n const format = cssPrefix(prop, val)\r\n stack[0] += `${format.prop}:${format.value};`\r\n }\r\n }\r\n stack[0] += \"}\"\r\n if (stack[0] === `${classname}{}`) {\r\n stack[0] = \"\"\r\n }\r\n stack = stack.join('')\r\n for (let media in medias) {\r\n stack += `${media}{${medias[media].replaceAll(`}${classname}{`, '')}}`\r\n }\r\n\r\n if (cachekey) {\r\n stack = stack.replaceAll(classname, \".\" + classname)\r\n const r = {\r\n cache: false,\r\n cachekey,\r\n classname: classname as string,\r\n css: stack,\r\n cssraw: _css,\r\n skiped,\r\n toString: () => classname as string,\r\n getStyleTag: () => document?.querySelector(`[data-oncss=\"${classname}\"]`) as HTMLStyleElement | null,\r\n deleteStyle: () => {\r\n const tag = document?.querySelector(`[data-oncss=\"${classname}\"]`)\r\n tag && tag.remove()\r\n },\r\n }\r\n CSSFactory.set(cachekey, r)\r\n let inject = opt?.injectStyle || true\r\n if (inject && typeof window !== 'undefined') {\r\n if (document.querySelector(`[data-oncss=\"${classname}\"]`)) return;\r\n const tag = document.createElement(\"style\");\r\n tag.innerHTML = r.css\r\n tag.setAttribute(`data-oncss`, classname as string)\r\n document.head.append(tag)\r\n }\r\n return r\r\n }\r\n return { stack, skiped }\r\n}"],
|
|
5
|
-
"mappings": "AAEA,MAAMA,EAAe,OAAO,OAAW,IAAc,OAAS,OAC9DA,EAAQ,QAAUA,EAAQ,SAAW,IAAI,IAClC,MAAMC,EAAaD,EAAQ,QAErBE,EAAOC,GAAgB,CAEhC,QADIC,EAAO,EAAGC,EAAMF,EAAI,OACfG,EAAI,EAAGA,EAAID,EAAKC,IACrBF,GAASA,GAAQ,GAAKA,EAAQD,EAAI,WAAWG,CAAC,EAC9CF,GAAQ,EAEZ,IAAIG,EAAKH,EAAK,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,
|
|
6
|
-
"names": ["_global", "CSSFactory", "uid", "str", "hash", "len", "i", "id", "number_val_props", "formatCSSProp", "prop", "formatCSSValue", "val", "PREFIXES", "_declaration", "PREFIXCACHE", "cssPrefix", "value", "declaration", "cached", "_prop", "_value", "_vprefix", "camelCaseProp", "_", "c", "prefix", "prefixedValue", "style", "_css", "cls", "opt", "cachekey", "classname", "has", "stack", "medias", "skiped", "
|
|
4
|
+
"sourcesContent": ["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\r\n\r\nconst _global: any = typeof window !== 'undefined' ? window : global;\r\n_global.Factory = _global.Factory || new Map<string, CSSFactoryType>();\r\nexport const CSSFactory = _global.Factory as Map<string, CSSFactoryType>\r\n\r\nexport const uid = (str: string) => {\r\n var hash = 0, len = str.length;\r\n for (var i = 0; i < len; i++) {\r\n hash = ((hash << 5) - hash) + str.charCodeAt(i);\r\n hash |= 0;\r\n }\r\n let id = hash.toString(32).slice(-10).replace(/-/g, \"\");\r\n if (/^\\d/.test(id.charAt(0))) id = 'c' + id;\r\n return id;\r\n}\r\n\r\nconst number_val_props = [\r\n \"fontWeight\",\r\n \"font-weight\",\r\n \"lineHeight\",\r\n \"line-height\",\r\n \"opacity\",\r\n \"zIndex\",\r\n \"z-index\",\r\n \"flex\",\r\n \"order\",\r\n \"flexGrow\",\r\n \"flex-grow\",\r\n \"flexShrink\",\r\n \"flex-shrink\",\r\n \"flexBasis\",\r\n \"flex-basis\",\r\n \"columns\",\r\n \"perspective\",\r\n \"stroke-dashoffset\"\r\n]\r\n\r\nexport const formatCSSProp = (prop: string) => prop.split(/(?=[A-Z])/).join(\"-\").toLowerCase();\r\nexport const formatCSSValue = (prop: string, val: any) => typeof val === 'number' && !number_val_props.includes(prop) ? `${val}px` : val\r\n\r\nconst PREFIXES = ['webkit', 'moz', 'ms', 'o'];\r\nlet _declaration: CSSStyleDeclaration;\r\nconst PREFIXCACHE = new Map();\r\n\r\nexport const cssPrefix = (prop: string, value: string): { prop: string, value: string } => {\r\n value = formatCSSValue(prop, value);\r\n prop = formatCSSProp(prop);\r\n\r\n if (typeof window === 'undefined') {\r\n return { prop, value };\r\n }\r\n\r\n const declaration = _declaration || (_declaration = document.createElement(\"div\").style);\r\n value = value?.toString();\r\n\r\n // Check if the property and value work as is\r\n if (declaration.setProperty(prop, value), declaration.getPropertyValue(prop) === value) {\r\n return { prop, value };\r\n }\r\n\r\n // Check cached property and value prefix\r\n const cached = PREFIXCACHE.get(prop);\r\n if (cached) {\r\n return { prop: cached._prop, value: `${cached._vprefix}${value}` };\r\n }\r\n\r\n let _prop = prop;\r\n let _value = value;\r\n let _vprefix = '';\r\n\r\n // Try property prefixes\r\n const camelCaseProp = prop.includes('-') ? prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase()) : prop;\r\n for (const prefix of PREFIXES) {\r\n if (declaration[`${prefix}${camelCaseProp}` as any] !== undefined) {\r\n _prop = `-${prefix}-${prop}`;\r\n break;\r\n }\r\n }\r\n\r\n // Check if prefixed property works with the value\r\n declaration.setProperty(_prop, value);\r\n if (!declaration.getPropertyValue(_prop)) {\r\n for (const prefix of PREFIXES) {\r\n const prefixedValue = `-${prefix}-${value}`;\r\n if (declaration.setProperty(_prop, prefixedValue), declaration.getPropertyValue(_prop) === prefixedValue) {\r\n _value = prefixedValue;\r\n _vprefix = `-${prefix}-`;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n PREFIXCACHE.set(prop, { _prop, _vprefix });\r\n return { prop: _prop, value: _value };\r\n};\r\n\r\nexport const style = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>) => {\r\n let cachekey\r\n let classname = cls\r\n if (!cls) {\r\n cachekey = JSON.stringify(_css)\r\n const has = CSSFactory.get(cachekey)\r\n if (has) {\r\n has.cache = true\r\n return has\r\n }\r\n classname = (opt?.classPrefix || \"\") + uid(cachekey)\r\n } else if (typeof cls !== 'string') {\r\n throw new Error(`Invalid class name: ${cls}`)\r\n }\r\n\r\n let stack: any = [`${classname}{`]\r\n let medias: any = {}\r\n let skiped: any = {}\r\n\r\n for (let prop in _css) {\r\n let val = (_css as any)[prop]\r\n let firstChar = prop.charAt(0)\r\n if (firstChar === '&') {\r\n let ncls = prop.replace(/&/g, classname as string)\r\n const r: any = style(val, ncls, opt)\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n stack.push(r.stack)\r\n } else if (firstChar === '@') {\r\n if (prop.startsWith(\"@global\") || prop.startsWith(\"@keyframes\")) {\r\n let _css = ''\r\n for (let selector in val) {\r\n let r: any = style(val[selector], selector, opt)\r\n _css += r.stack\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n if (prop.startsWith(\"@keyframes\")) {\r\n stack.push(`${prop}{${_css}}`)\r\n } else {\r\n stack.push(_css)\r\n }\r\n } else {\r\n let r: any = style(val, classname, opt)\r\n const atcss = prop + \"{\" + r.stack + \"}\"\r\n stack.push(atcss)\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n } else if (typeof val === 'object') {\r\n for (let media in val) {\r\n if (typeof val[media] === 'object' || typeof val[media] === 'function' || Array.isArray(val[media])) {\r\n throw new Error(`Invalid css value: ${val[media]}`);\r\n }\r\n let breakpoint = media\r\n let isNumber = !isNaN(parseInt(breakpoint))\r\n if (!isNumber) {\r\n if (opt?.breakpoints && !isNaN(parseInt((opt.breakpoints as any)[media]))) {\r\n breakpoint = opt.breakpoints[media as BreakpointKeys].toString()\r\n } else {\r\n throw new Error(`Invalid breakpoint prop: ${media}`);\r\n }\r\n }\r\n let _css = { [prop]: val[media] }\r\n let r: any = style(_css, classname, opt)\r\n let _style = r.stack\r\n let mediakey = `@media (min-width: ${breakpoint}px)`\r\n medias[mediakey] = medias[mediakey] ? medias[mediakey] + _style : _style\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n }\r\n } else {\r\n if (opt?.skipProps && opt.skipProps(prop, val)) {\r\n if (!skiped[classname as string]) skiped[classname as string] = []\r\n skiped[classname as string].push(prop)\r\n continue\r\n }\r\n if (opt?.getProps) {\r\n let _props: any = opt.getProps(prop, val, _css)\r\n if (_props) {\r\n let r: any = style(_props, classname, {\r\n ...opt,\r\n getProps: undefined\r\n })\r\n if (opt?.skipProps) {\r\n skiped = {\r\n ...skiped,\r\n ...r.skiped\r\n }\r\n }\r\n stack.push(r.stack)\r\n continue;\r\n }\r\n }\r\n if (opt?.getValue) {\r\n val = opt.getValue(prop, val, _css)\r\n } else if (opt?.aliases && (opt.aliases as any)[prop]) {\r\n let _props = (opt.aliases as any)[prop](prop, val)\r\n if (_props) {\r\n let r: any = style(_props, classname, opt)\r\n r.stack = r.stack.replace(`${classname}{`, '').replace(`}`, '')\r\n stack[0] += r.stack\r\n skiped[classname as string] = r.skiped\r\n continue;\r\n }\r\n }\r\n let p = cssPrefix(prop, val)\r\n stack[0] += `${p.prop}:${p.value};`\r\n }\r\n }\r\n stack[0] += \"}\"\r\n if (stack[0] === `${classname}{}`) {\r\n stack[0] = \"\"\r\n }\r\n stack = stack.join('')\r\n for (let media in medias) {\r\n stack += `${media}{${medias[media].replace(new RegExp(`}\\\\${classname}\\\\{`, 'g'), '')}}`\r\n }\r\n\r\n if (cachekey) {\r\n stack = stack.replace(new RegExp(classname as string, 'g'), `.${classname}`)\r\n const r = {\r\n cache: false,\r\n cachekey,\r\n classname: classname as string,\r\n css: stack,\r\n cssraw: _css,\r\n skiped,\r\n getStyleTag: () => document?.querySelector(`[data-oncss=\"${classname}\"]`) as HTMLStyleElement | null,\r\n deleteStyle: () => {\r\n const tag = document?.querySelector(`[data-oncss=\"${classname}\"]`)\r\n tag && tag.remove()\r\n },\r\n }\r\n r.toString = () => classname as string\r\n CSSFactory.set(cachekey, r)\r\n let inject = opt?.injectStyle || true\r\n if (inject && typeof window !== 'undefined') {\r\n if (document.querySelector(`[data-oncss=\"${classname}\"]`)) return;\r\n const tag = document.createElement(\"style\");\r\n tag.innerHTML = r.css\r\n tag.setAttribute(`data-oncss`, classname as string)\r\n document.head.append(tag)\r\n }\r\n return r\r\n }\r\n return { stack, skiped }\r\n}"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_global", "CSSFactory", "uid", "str", "hash", "len", "i", "id", "number_val_props", "formatCSSProp", "prop", "formatCSSValue", "val", "PREFIXES", "_declaration", "PREFIXCACHE", "cssPrefix", "value", "declaration", "cached", "_prop", "_value", "_vprefix", "camelCaseProp", "_", "c", "prefix", "prefixedValue", "style", "_css", "cls", "opt", "cachekey", "classname", "has", "stack", "medias", "skiped", "firstChar", "ncls", "r", "selector", "atcss", "media", "breakpoint", "_style", "mediakey", "_props", "p", "tag"]
|
|
7
7
|
}
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSProps, CSSOptionProps } from "./types";
|
|
1
|
+
import { CSSProps, CSSOptionProps, CSSFactoryType } from "./types";
|
|
2
2
|
export { CSSFactory, formatCSSProp, formatCSSValue } from './core';
|
|
3
3
|
export * from './types';
|
|
4
|
-
declare const css: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>) =>
|
|
4
|
+
export declare const css: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>) => CSSFactoryType;
|
|
5
5
|
export default css;
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{style as r}from"./core";import{CSSFactory as
|
|
1
|
+
import{style as r}from"./core";import{CSSFactory as f,formatCSSProp as m,formatCSSValue as l}from"./core";export*from"./types";const s=(o,e)=>r(o,void 0,e);var n=s;export{f as CSSFactory,s as css,n as default,m as formatCSSProp,l as formatCSSValue};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["import { style } from \"./core\";\r\nimport { CSSProps, CSSOptionProps } from \"./types\";\r\nexport { CSSFactory, formatCSSProp, formatCSSValue } from './core'\r\nexport * from './types'\r\n\r\
|
|
5
|
-
"mappings": "AAAA,OAAS,SAAAA,MAAa,SAEtB,OAAS,cAAAC,EAAY,iBAAAC,EAAe,kBAAAC,MAAsB,SAC1D,WAAc,
|
|
4
|
+
"sourcesContent": ["import { style } from \"./core\";\r\nimport { CSSProps, CSSOptionProps, CSSFactoryType } from \"./types\";\r\nexport { CSSFactory, formatCSSProp, formatCSSValue } from './core'\r\nexport * from './types'\r\n\r\nexport const css = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>): CSSFactoryType => style<Aliases, BreakpointKeys>(_css, undefined, options) as any\r\nexport default css"],
|
|
5
|
+
"mappings": "AAAA,OAAS,SAAAA,MAAa,SAEtB,OAAS,cAAAC,EAAY,iBAAAC,EAAe,kBAAAC,MAAsB,SAC1D,WAAc,UAEP,MAAMC,EAAM,CAAyCC,EAAyCC,IAAsEN,EAA+BK,EAAM,OAAWC,CAAO,EAClO,IAAOC,EAAQH",
|
|
6
6
|
"names": ["style", "CSSFactory", "formatCSSProp", "formatCSSValue", "css", "_css", "options", "index_default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
# oncss
|
|
2
|
-
|
|
1
|
+
# oncss
|
|
3
2
|
`oncss` is a CSS-in-JS library that provides developers with a powerful `css` function to style their web applications. It enables modern styling techniques, including nested selectors, responsive design, and dynamic keyframes, all while offering seamless integration with JavaScript frameworks like React.
|
|
4
3
|
|
|
5
4
|
---
|
|
@@ -30,6 +29,7 @@ The `css` function is the heart of `oncss`, designed to dynamically generate and
|
|
|
30
29
|
- **Keyframes**: Create animations with `@keyframes`.
|
|
31
30
|
- **Global Styles**: Apply styles globally with `@global`.
|
|
32
31
|
- **Custom Breakpoints**: Define reusable breakpoints for responsiveness.
|
|
32
|
+
- **Other At-Rules**: Utilize additional at-rules like `@container`, `@layer`, and `@supports`.
|
|
33
33
|
|
|
34
34
|
### Basic Example
|
|
35
35
|
|
|
@@ -47,7 +47,7 @@ const buttonStyles = css({
|
|
|
47
47
|
},
|
|
48
48
|
});
|
|
49
49
|
|
|
50
|
-
console.log(buttonStyles
|
|
50
|
+
console.log(buttonStyles);
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
---
|
|
@@ -204,6 +204,115 @@ const globalStyles = css({
|
|
|
204
204
|
|
|
205
205
|
---
|
|
206
206
|
|
|
207
|
+
## Supported At-Rules
|
|
208
|
+
|
|
209
|
+
`oncss` supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:
|
|
210
|
+
|
|
211
|
+
| At-Rule | Description |
|
|
212
|
+
| ------------ | ---------------------------------------------------------------------------- |
|
|
213
|
+
| `@media` | Used for applying styles based on media queries for responsive design. |
|
|
214
|
+
| `@keyframes` | Defines animations that can be applied to elements. |
|
|
215
|
+
| `@global` | Applies styles globally across the entire application. |
|
|
216
|
+
| `@container` | Used for container queries to apply styles based on container size. |
|
|
217
|
+
| `@layer` | Defines style layers to control the order of style application. |
|
|
218
|
+
| `@supports` | Applies styles based on the support of specific CSS features in the browser. |
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## Server-Side Styling
|
|
223
|
+
|
|
224
|
+
`oncss` supports server-side rendering (SSR) by utilizing the `CSSFactory` to store and manage generated CSS styles. This allows you to extract and inject styles into your server-rendered HTML.
|
|
225
|
+
|
|
226
|
+
### Example with React
|
|
227
|
+
|
|
228
|
+
Here's an example of how to use `oncss` for server-side rendering with React:
|
|
229
|
+
|
|
230
|
+
```tsx
|
|
231
|
+
import React from 'react';
|
|
232
|
+
import ReactDOMServer from 'react-dom/server';
|
|
233
|
+
import css, { CSSFactory } from 'oncss';
|
|
234
|
+
|
|
235
|
+
const buttonStyle = css({
|
|
236
|
+
backgroundColor: 'blue',
|
|
237
|
+
color: 'white',
|
|
238
|
+
padding: '10px 20px',
|
|
239
|
+
borderRadius: '5px',
|
|
240
|
+
'&:hover': {
|
|
241
|
+
backgroundColor: 'darkblue',
|
|
242
|
+
},
|
|
243
|
+
});
|
|
244
|
+
|
|
245
|
+
function Button() {
|
|
246
|
+
return <button className={buttonStyle}>Click Me</button>;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
const App = () => (
|
|
250
|
+
<div>
|
|
251
|
+
<Button />
|
|
252
|
+
</div>
|
|
253
|
+
);
|
|
254
|
+
|
|
255
|
+
// Render the component to a string
|
|
256
|
+
const html = ReactDOMServer.renderToString(<App />);
|
|
257
|
+
|
|
258
|
+
// Extract the generated CSS from CSSFactory
|
|
259
|
+
const styles = Array.from(CSSFactory.values())
|
|
260
|
+
.map(style => style.css)
|
|
261
|
+
.join('\n');
|
|
262
|
+
|
|
263
|
+
// Inject the styles into the HTML
|
|
264
|
+
const fullHtml = `
|
|
265
|
+
<!DOCTYPE html>
|
|
266
|
+
<html lang="en">
|
|
267
|
+
<head>
|
|
268
|
+
<meta charset="UTF-8">
|
|
269
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
270
|
+
<title>SSR with oncss</title>
|
|
271
|
+
<style>${styles}</style>
|
|
272
|
+
</head>
|
|
273
|
+
<body>
|
|
274
|
+
<div id="root">${html}</div>
|
|
275
|
+
</body>
|
|
276
|
+
</html>
|
|
277
|
+
`;
|
|
278
|
+
|
|
279
|
+
console.log(fullHtml);
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
In this example, the `CSSFactory` is used to collect all generated CSS styles during the server-side rendering process. These styles are then injected into the HTML document, ensuring that the styles are applied correctly when the page is loaded in the browser.
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## Utility Functions
|
|
287
|
+
|
|
288
|
+
### CSSFactory
|
|
289
|
+
|
|
290
|
+
`CSSFactory` is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.
|
|
291
|
+
|
|
292
|
+
### formatCSSProp
|
|
293
|
+
|
|
294
|
+
`formatCSSProp` is a utility function that converts camelCase CSS property names to kebab-case.
|
|
295
|
+
|
|
296
|
+
```typescript
|
|
297
|
+
import { formatCSSProp } from 'oncss';
|
|
298
|
+
|
|
299
|
+
const formattedProp = formatCSSProp('backgroundColor');
|
|
300
|
+
console.log(formattedProp); // 'background-color'
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### formatCSSValue
|
|
304
|
+
|
|
305
|
+
`formatCSSValue` is a utility function that formats CSS values, adding units like `px` where necessary.
|
|
306
|
+
|
|
307
|
+
```typescript
|
|
308
|
+
import { formatCSSValue } from 'oncss';
|
|
309
|
+
|
|
310
|
+
const formattedValue = formatCSSValue('width', 100);
|
|
311
|
+
console.log(formattedValue); // '100px'
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
---
|
|
315
|
+
|
|
207
316
|
## TypeScript Integration
|
|
208
317
|
|
|
209
318
|
`oncss` provides full TypeScript support, allowing you to define types for your CSS properties and options.
|
package/types.d.ts
CHANGED
|
@@ -3,8 +3,12 @@ type CSSProperties = CSS.Properties<number | string>;
|
|
|
3
3
|
type CSSNestedSelectors<Aliases, BreakpointKeys extends string> = {
|
|
4
4
|
[key: `& ${string}`]: CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
|
|
5
5
|
};
|
|
6
|
+
type CSSNestedSelectorsWithoutChild<Aliases, BreakpointKeys extends string> = {
|
|
7
|
+
"&": CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
|
|
8
|
+
};
|
|
9
|
+
type AtRules = "media" | "container" | "layer" | "supports";
|
|
6
10
|
type MediaCSS<Aliases, BreakpointKeys extends string> = {
|
|
7
|
-
[key:
|
|
11
|
+
[key: `@${AtRules} ${string}`]: CSSProps<Aliases, BreakpointKeys>;
|
|
8
12
|
};
|
|
9
13
|
type KeyframesCSS<Aliases> = {
|
|
10
14
|
[key: `@keyframes ${string}`]: {
|
|
@@ -27,7 +31,7 @@ export type CSSValueWithoutBreakpoint<Aliases> = {
|
|
|
27
31
|
type CSSValue<Aliases, BreakpointKeys extends string> = {
|
|
28
32
|
[Property in keyof (CSSProperties & Aliases)]?: (CSSProperties & Aliases)[Property] | BreakpointTypes<BreakpointKeys, (CSSProperties & Aliases)[Property]>;
|
|
29
33
|
};
|
|
30
|
-
export type CSSPropsWithoutGlobal<Aliases, BreakpointKeys extends string> = CSSValue<Aliases, BreakpointKeys> | KeyframesCSS<Aliases> | MediaCSS<Aliases, BreakpointKeys> | CSSNestedSelectors<Aliases, BreakpointKeys>;
|
|
34
|
+
export type CSSPropsWithoutGlobal<Aliases, BreakpointKeys extends string> = CSSValue<Aliases, BreakpointKeys> | KeyframesCSS<Aliases> | MediaCSS<Aliases, BreakpointKeys> | CSSNestedSelectors<Aliases, BreakpointKeys> | CSSNestedSelectorsWithoutChild<Aliases, BreakpointKeys>;
|
|
31
35
|
export type CSSProps<Aliases, BreakpointKeys extends string> = GlobalCSS<Aliases, BreakpointKeys> | CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
|
|
32
36
|
export type AliasFn<Aliases> = (prop: string, value: string | number) => CSSValueWithoutBreakpoint<Aliases>;
|
|
33
37
|
export interface CSSOptionProps<Aliases, BreakpointKeys extends string> {
|
|
@@ -52,6 +56,5 @@ export type CSSFactoryType = {
|
|
|
52
56
|
skiped: string[];
|
|
53
57
|
getStyleTag: () => HTMLStyleElement | null;
|
|
54
58
|
deleteStyle: () => void;
|
|
55
|
-
toString: () => string;
|
|
56
59
|
};
|
|
57
60
|
export {};
|