oncss 1.2.4 → 1.2.6
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.mjs → core.cjs} +29 -13
- package/core.cjs.map +1 -0
- package/core.js +23 -13
- package/core.js.map +1 -1
- package/index.cjs +11 -0
- package/index.cjs.map +1 -0
- package/index.d.ts +1 -1
- package/index.js +7 -1
- package/index.js.map +1 -1
- package/package.json +2 -10
- package/readme.md +397 -397
- package/types.d.ts +2 -0
- package/core.mjs.map +0 -1
- package/index.mjs +0 -1
- package/index.mjs.map +0 -1
package/{core.mjs → core.cjs}
RENAMED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var youid = require('youid');
|
|
4
|
+
|
|
5
|
+
const _global = typeof window !== 'undefined' ? window : global;
|
|
2
6
|
_global.Factory = _global.Factory || new Map();
|
|
3
7
|
const CSSFactory = _global.Factory;
|
|
4
8
|
const number_val_props = [
|
|
@@ -70,7 +74,7 @@ const cssPrefix = (prop, value) => {
|
|
|
70
74
|
return { prop: _prop, value: _value };
|
|
71
75
|
};
|
|
72
76
|
const style = (_css, cls, opt, dept = 1) => {
|
|
73
|
-
var _a;
|
|
77
|
+
var _a, _b, _c;
|
|
74
78
|
let cachekey;
|
|
75
79
|
let classname = cls;
|
|
76
80
|
if (!cls) {
|
|
@@ -198,32 +202,44 @@ const style = (_css, cls, opt, dept = 1) => {
|
|
|
198
202
|
stack += `${media}{${medias[media].replace(new RegExp(`}\\${classname}\\{`, 'g'), '')}}`;
|
|
199
203
|
}
|
|
200
204
|
if (cachekey) {
|
|
201
|
-
|
|
205
|
+
const _con = (_a = opt === null || opt === void 0 ? void 0 : opt.container) !== null && _a !== void 0 ? _a : document;
|
|
206
|
+
const _document = _con instanceof Document ? _con : (_con === null || _con === void 0 ? void 0 : _con.ownerDocument) || document;
|
|
207
|
+
const _container = _con instanceof Document ? _con.head : _con;
|
|
208
|
+
const selector = (_b = opt === null || opt === void 0 ? void 0 : opt.selector) !== null && _b !== void 0 ? _b : ".";
|
|
209
|
+
stack = stack.replace(new RegExp(classname, 'g'), `${selector}${classname}`);
|
|
202
210
|
const r = {
|
|
203
211
|
cache: false,
|
|
204
212
|
cachekey,
|
|
213
|
+
selector,
|
|
205
214
|
classname: classname,
|
|
206
215
|
css: stack,
|
|
207
216
|
cssraw: _css,
|
|
208
217
|
skiped,
|
|
209
|
-
getStyleTag: () =>
|
|
218
|
+
getStyleTag: () => _container === null || _container === void 0 ? void 0 : _container.querySelector(`[data-href="${classname}"]`),
|
|
210
219
|
deleteStyle: () => {
|
|
211
|
-
const tag =
|
|
220
|
+
const tag = _container === null || _container === void 0 ? void 0 : _container.querySelector(`[data-href="${classname}"]`);
|
|
212
221
|
tag && tag.remove();
|
|
213
|
-
}
|
|
214
|
-
toString: () => classname
|
|
222
|
+
}
|
|
215
223
|
};
|
|
216
224
|
CSSFactory.set(cachekey, r);
|
|
217
|
-
let inject = (
|
|
218
|
-
if (inject && typeof
|
|
219
|
-
if (!
|
|
220
|
-
|
|
225
|
+
let inject = (_c = opt === null || opt === void 0 ? void 0 : opt.injectStyle) !== null && _c !== void 0 ? _c : true;
|
|
226
|
+
if (inject && typeof _document !== 'undefined') {
|
|
227
|
+
if (!_container.querySelector(`[data-href="${classname}"]`)) {
|
|
228
|
+
console.log("asd");
|
|
229
|
+
const tag = _document.createElement("style");
|
|
221
230
|
tag.innerHTML = r.css;
|
|
222
231
|
tag.setAttribute(`data-href`, classname);
|
|
223
|
-
|
|
232
|
+
_container.appendChild(tag);
|
|
224
233
|
}
|
|
225
234
|
}
|
|
226
235
|
return r;
|
|
227
236
|
}
|
|
228
237
|
return { stack, skiped };
|
|
229
|
-
};
|
|
238
|
+
};
|
|
239
|
+
|
|
240
|
+
exports.CSSFactory = CSSFactory;
|
|
241
|
+
exports.cssPrefix = cssPrefix;
|
|
242
|
+
exports.formatCSSProp = formatCSSProp;
|
|
243
|
+
exports.formatCSSValue = formatCSSValue;
|
|
244
|
+
exports.style = style;
|
|
245
|
+
//# sourceMappingURL=core.cjs.map
|
package/core.cjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"core.cjs","sources":["../src/core.ts"],"sourcesContent":["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\r\nimport youid from 'youid';\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\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>, dept = 1) => {\r\n let cachekey\r\n let classname = cls\r\n\r\n\r\n\r\n if (!cls) {\r\n cachekey = JSON.stringify(_css, (_key, value) => typeof value === \"function\" ? value.toString() : value);\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 || \"\"}x${youid(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 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, dept + 1)\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, dept + 1)\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, dept + 1)\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 {\r\n if (opt?.skipProps && opt.skipProps(prop, val, dept)) {\r\n if (!((classname as any) in skiped)) skiped[classname as string] = []\r\n skiped[classname as string].push(prop)\r\n continue\r\n }\r\n if (typeof val === 'function' || Array.isArray(val)) {\r\n continue\r\n }\r\n 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, dept)\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?.getProps) {\r\n let _props: any = opt.getProps(prop, val, _css, dept)\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?.aliases && (opt.aliases as any)[prop]) {\r\n let _props = (opt.aliases as any)[prop](val)\r\n if (_props) {\r\n let r: any = style(_props, classname, {\r\n ...opt,\r\n aliases: undefined\r\n }, dept)\r\n r.stack = r.stack.replace(`${classname}{`, '').replace(`}`, '')\r\n stack[0] += r.stack\r\n continue;\r\n }\r\n }\r\n if (opt?.getValue) {\r\n val = opt.getValue(prop, val, _css, dept)\r\n }\r\n let p = cssPrefix(prop, val)\r\n stack[0] += `${p.prop}:${p.value};`\r\n }\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 const _con = opt?.container ?? document\r\n const _document = _con instanceof Document ? _con : _con?.ownerDocument || document\r\n const _container = _con instanceof Document ? _con.head : _con as HTMLElement\r\n const selector = opt?.selector ?? \".\"\r\n\r\n stack = stack.replace(new RegExp(classname as string, 'g'), `${selector}${classname}`)\r\n const r = {\r\n cache: false,\r\n cachekey,\r\n selector,\r\n classname: classname as string,\r\n css: stack,\r\n cssraw: _css,\r\n skiped,\r\n getStyleTag: () => _container?.querySelector(`[data-href=\"${classname}\"]`) as HTMLStyleElement | null,\r\n deleteStyle: () => {\r\n const tag = _container?.querySelector(`[data-href=\"${classname}\"]`)\r\n tag && tag.remove()\r\n }\r\n }\r\n\r\n CSSFactory.set(cachekey, r)\r\n let inject = opt?.injectStyle ?? true\r\n\r\n if (inject && typeof _document !== 'undefined') {\r\n if (!_container.querySelector(`[data-href=\"${classname}\"]`)) {\r\n console.log(\"asd\");\r\n\r\n const tag = _document.createElement(\"style\");\r\n tag.innerHTML = r.css\r\n tag.setAttribute(`data-href`, classname as string)\r\n _container.appendChild(tag);\r\n }\r\n }\r\n return r\r\n }\r\n return { stack, skiped }\r\n}"],"names":[],"mappings":"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"}
|
package/core.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import youid from 'youid';
|
|
2
|
+
|
|
3
|
+
const _global = typeof window !== 'undefined' ? window : global;
|
|
2
4
|
_global.Factory = _global.Factory || new Map();
|
|
3
5
|
const CSSFactory = _global.Factory;
|
|
4
6
|
const number_val_props = [
|
|
@@ -70,7 +72,7 @@ const cssPrefix = (prop, value) => {
|
|
|
70
72
|
return { prop: _prop, value: _value };
|
|
71
73
|
};
|
|
72
74
|
const style = (_css, cls, opt, dept = 1) => {
|
|
73
|
-
var _a;
|
|
75
|
+
var _a, _b, _c;
|
|
74
76
|
let cachekey;
|
|
75
77
|
let classname = cls;
|
|
76
78
|
if (!cls) {
|
|
@@ -198,32 +200,40 @@ const style = (_css, cls, opt, dept = 1) => {
|
|
|
198
200
|
stack += `${media}{${medias[media].replace(new RegExp(`}\\${classname}\\{`, 'g'), '')}}`;
|
|
199
201
|
}
|
|
200
202
|
if (cachekey) {
|
|
201
|
-
|
|
203
|
+
const _con = (_a = opt === null || opt === void 0 ? void 0 : opt.container) !== null && _a !== void 0 ? _a : document;
|
|
204
|
+
const _document = _con instanceof Document ? _con : (_con === null || _con === void 0 ? void 0 : _con.ownerDocument) || document;
|
|
205
|
+
const _container = _con instanceof Document ? _con.head : _con;
|
|
206
|
+
const selector = (_b = opt === null || opt === void 0 ? void 0 : opt.selector) !== null && _b !== void 0 ? _b : ".";
|
|
207
|
+
stack = stack.replace(new RegExp(classname, 'g'), `${selector}${classname}`);
|
|
202
208
|
const r = {
|
|
203
209
|
cache: false,
|
|
204
210
|
cachekey,
|
|
211
|
+
selector,
|
|
205
212
|
classname: classname,
|
|
206
213
|
css: stack,
|
|
207
214
|
cssraw: _css,
|
|
208
215
|
skiped,
|
|
209
|
-
getStyleTag: () =>
|
|
216
|
+
getStyleTag: () => _container === null || _container === void 0 ? void 0 : _container.querySelector(`[data-href="${classname}"]`),
|
|
210
217
|
deleteStyle: () => {
|
|
211
|
-
const tag =
|
|
218
|
+
const tag = _container === null || _container === void 0 ? void 0 : _container.querySelector(`[data-href="${classname}"]`);
|
|
212
219
|
tag && tag.remove();
|
|
213
|
-
}
|
|
214
|
-
toString: () => classname
|
|
220
|
+
}
|
|
215
221
|
};
|
|
216
222
|
CSSFactory.set(cachekey, r);
|
|
217
|
-
let inject = (
|
|
218
|
-
if (inject && typeof
|
|
219
|
-
if (!
|
|
220
|
-
|
|
223
|
+
let inject = (_c = opt === null || opt === void 0 ? void 0 : opt.injectStyle) !== null && _c !== void 0 ? _c : true;
|
|
224
|
+
if (inject && typeof _document !== 'undefined') {
|
|
225
|
+
if (!_container.querySelector(`[data-href="${classname}"]`)) {
|
|
226
|
+
console.log("asd");
|
|
227
|
+
const tag = _document.createElement("style");
|
|
221
228
|
tag.innerHTML = r.css;
|
|
222
229
|
tag.setAttribute(`data-href`, classname);
|
|
223
|
-
|
|
230
|
+
_container.appendChild(tag);
|
|
224
231
|
}
|
|
225
232
|
}
|
|
226
233
|
return r;
|
|
227
234
|
}
|
|
228
235
|
return { stack, skiped };
|
|
229
|
-
};
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
export { CSSFactory, cssPrefix, formatCSSProp, formatCSSValue, style };
|
|
239
|
+
//# sourceMappingURL=core.js.map
|
package/core.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core.js","sources":["../src/core.ts"],"sourcesContent":["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\nimport youid from 'youid';\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\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 = 1) => {\n let cachekey\n let classname = cls\n if (!cls) {\n cachekey = JSON.stringify(_css, (_key, value) => typeof value === \"function\" ? value.toString() : value);\n const has = CSSFactory.get(cachekey)\n if (has) {\n has.cache = true\n return has\n }\n classname = `${opt?.classPrefix || \"\"}x${youid(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 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 + 1)\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 + 1)\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 + 1)\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 === 'function' || Array.isArray(val)) {\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-href=\"${classname}\"]`) as HTMLStyleElement | null,\n deleteStyle: () => {\n const tag = document?.querySelector(`[data-href=\"${classname}\"]`)\n tag && tag.remove()\n },\n toString: () => classname as string\n }\n CSSFactory.set(cachekey, r)\n let inject = opt?.injectStyle ?? true\n if (inject && typeof window !== 'undefined') {\n if (!document.querySelector(`[data-href=\"${classname}\"]`)) {\n const tag = document.createElement(\"style\");\n tag.innerHTML = r.css\n tag.setAttribute(`data-href`, classname as string)\n document.head.append(tag)\n }\n }\n return r\n }\n return { stack, skiped }\n}"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"core.js","sources":["../src/core.ts"],"sourcesContent":["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\r\nimport youid from 'youid';\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\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>, dept = 1) => {\r\n let cachekey\r\n let classname = cls\r\n\r\n\r\n\r\n if (!cls) {\r\n cachekey = JSON.stringify(_css, (_key, value) => typeof value === \"function\" ? value.toString() : value);\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 || \"\"}x${youid(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 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, dept + 1)\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, dept + 1)\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, dept + 1)\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 {\r\n if (opt?.skipProps && opt.skipProps(prop, val, dept)) {\r\n if (!((classname as any) in skiped)) skiped[classname as string] = []\r\n skiped[classname as string].push(prop)\r\n continue\r\n }\r\n if (typeof val === 'function' || Array.isArray(val)) {\r\n continue\r\n }\r\n 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, dept)\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?.getProps) {\r\n let _props: any = opt.getProps(prop, val, _css, dept)\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?.aliases && (opt.aliases as any)[prop]) {\r\n let _props = (opt.aliases as any)[prop](val)\r\n if (_props) {\r\n let r: any = style(_props, classname, {\r\n ...opt,\r\n aliases: undefined\r\n }, dept)\r\n r.stack = r.stack.replace(`${classname}{`, '').replace(`}`, '')\r\n stack[0] += r.stack\r\n continue;\r\n }\r\n }\r\n if (opt?.getValue) {\r\n val = opt.getValue(prop, val, _css, dept)\r\n }\r\n let p = cssPrefix(prop, val)\r\n stack[0] += `${p.prop}:${p.value};`\r\n }\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 const _con = opt?.container ?? document\r\n const _document = _con instanceof Document ? _con : _con?.ownerDocument || document\r\n const _container = _con instanceof Document ? _con.head : _con as HTMLElement\r\n const selector = opt?.selector ?? \".\"\r\n\r\n stack = stack.replace(new RegExp(classname as string, 'g'), `${selector}${classname}`)\r\n const r = {\r\n cache: false,\r\n cachekey,\r\n selector,\r\n classname: classname as string,\r\n css: stack,\r\n cssraw: _css,\r\n skiped,\r\n getStyleTag: () => _container?.querySelector(`[data-href=\"${classname}\"]`) as HTMLStyleElement | null,\r\n deleteStyle: () => {\r\n const tag = _container?.querySelector(`[data-href=\"${classname}\"]`)\r\n tag && tag.remove()\r\n }\r\n }\r\n\r\n CSSFactory.set(cachekey, r)\r\n let inject = opt?.injectStyle ?? true\r\n\r\n if (inject && typeof _document !== 'undefined') {\r\n if (!_container.querySelector(`[data-href=\"${classname}\"]`)) {\r\n console.log(\"asd\");\r\n\r\n const tag = _document.createElement(\"style\");\r\n tag.innerHTML = r.css\r\n tag.setAttribute(`data-href`, classname as string)\r\n _container.appendChild(tag);\r\n }\r\n }\r\n return r\r\n }\r\n return { stack, skiped }\r\n}"],"names":[],"mappings":"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"}
|
package/index.cjs
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('./core.cjs');
|
|
4
|
+
|
|
5
|
+
const css = (_css, options) => core.style(_css, undefined, options);
|
|
6
|
+
|
|
7
|
+
exports.CSSFactory = core.CSSFactory;
|
|
8
|
+
exports.formatCSSProp = core.formatCSSProp;
|
|
9
|
+
exports.formatCSSValue = core.formatCSSValue;
|
|
10
|
+
exports.css = css;
|
|
11
|
+
//# sourceMappingURL=index.cjs.map
|
package/index.cjs.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"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"],"names":["style"],"mappings":";;;;AAKO,MAAM,GAAG,GAAG,CAAyC,IAAuC,EAAE,OAAiD,KAAqBA,UAAK,CAA0B,IAAI,EAAE,SAAS,EAAE,OAAO;;;;;;;"}
|
package/index.d.ts
CHANGED
|
@@ -4,4 +4,4 @@ export { CSSFactory, formatCSSProp, formatCSSValue } from './core.js';
|
|
|
4
4
|
|
|
5
5
|
declare const css: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>) => CSSFactoryType;
|
|
6
6
|
|
|
7
|
-
export { CSSFactoryType, CSSOptionProps, CSSProps, css
|
|
7
|
+
export { CSSFactoryType, CSSOptionProps, CSSProps, css };
|
package/index.js
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { style } from './core.js';
|
|
2
|
+
export { CSSFactory, formatCSSProp, formatCSSValue } from './core.js';
|
|
3
|
+
|
|
4
|
+
const css = (_css, options) => style(_css, undefined, options);
|
|
5
|
+
|
|
6
|
+
export { css };
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { style } from \"./core\";\nimport { CSSProps, CSSOptionProps, CSSFactoryType } from \"./types\";\nexport { CSSFactory, formatCSSProp, formatCSSValue } from './core'\nexport * from './types'\n\nexport const css = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>): CSSFactoryType => style<Aliases, BreakpointKeys>(_css, undefined, options) as any
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"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"],"names":[],"mappings":";;;AAKO,MAAM,GAAG,GAAG,CAAyC,IAAuC,EAAE,OAAiD,KAAqB,KAAK,CAA0B,IAAI,EAAE,SAAS,EAAE,OAAO;;;;"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oncss",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"description": "A CSS framework for modern web development.",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"module": "./index.mjs",
|
|
7
7
|
"types": "./index.d.ts",
|
|
8
|
-
"devDependencies": {
|
|
9
|
-
"@types/react": "^19.2.7",
|
|
10
|
-
"@types/react-dom": "^19.2.3",
|
|
11
|
-
"makepack": "^1.7.15",
|
|
12
|
-
"react": "^19.2.0",
|
|
13
|
-
"react-dom": "^19.2.0",
|
|
14
|
-
"typescript": "^5.9.3"
|
|
15
|
-
},
|
|
16
8
|
"keywords": [
|
|
17
9
|
"css",
|
|
18
10
|
"oncss",
|
|
@@ -40,4 +32,4 @@
|
|
|
40
32
|
"types": "./index.d.ts"
|
|
41
33
|
}
|
|
42
34
|
}
|
|
43
|
-
}
|
|
35
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,397 +1,397 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<img width="120" src="https://raw.githubusercontent.com/devnax/oncss/main/logo.png" alt="ONCSS Logo">
|
|
3
|
-
</p>
|
|
4
|
-
|
|
5
|
-
<h1 align="center">ONCSS</h1>
|
|
6
|
-
|
|
7
|
-
`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.
|
|
8
|
-
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
## Installation
|
|
12
|
-
|
|
13
|
-
Install the `oncss` package via npm:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install oncss
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Import the `css` function in your project:
|
|
20
|
-
|
|
21
|
-
```javascript
|
|
22
|
-
import css from 'oncss';
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
## Core Concept: The `css` Function
|
|
28
|
-
|
|
29
|
-
The `css` function is the heart of `oncss`, designed to dynamically generate and inject CSS into your application. It supports:
|
|
30
|
-
|
|
31
|
-
- **CSS Properties**: Use standard CSS properties and values.
|
|
32
|
-
- **Nested Selectors**: Apply styles to child elements or states using `&`.
|
|
33
|
-
- **Media Queries**: Implement responsive designs with `@media` rules.
|
|
34
|
-
- **Keyframes**: Create animations with `@keyframes`.
|
|
35
|
-
- **Global Styles**: Apply styles globally with `@global`.
|
|
36
|
-
- **Custom Breakpoints**: Define reusable breakpoints for responsiveness.
|
|
37
|
-
- **Other At-Rules**: Utilize additional at-rules like `@container`, `@layer`, and `@supports`.
|
|
38
|
-
|
|
39
|
-
### Basic Example
|
|
40
|
-
|
|
41
|
-
```typescript
|
|
42
|
-
const buttonStyles = css({
|
|
43
|
-
backgroundColor: 'blue',
|
|
44
|
-
color: 'white',
|
|
45
|
-
padding: '10px 20px',
|
|
46
|
-
borderRadius: '5px',
|
|
47
|
-
'&:hover': {
|
|
48
|
-
backgroundColor: 'darkblue',
|
|
49
|
-
},
|
|
50
|
-
'@media (min-width: 768px)': {
|
|
51
|
-
padding: '15px 30px',
|
|
52
|
-
},
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
console.log(buttonStyles);
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
---
|
|
59
|
-
|
|
60
|
-
## Configuration Options
|
|
61
|
-
|
|
62
|
-
The `css` function can be customized through an options object:
|
|
63
|
-
|
|
64
|
-
### Available Properties
|
|
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. 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
|
-
|
|
76
|
-
### Example with Options
|
|
77
|
-
|
|
78
|
-
```typescript
|
|
79
|
-
const styles = css({
|
|
80
|
-
fontSize: 16,
|
|
81
|
-
padding: 10,
|
|
82
|
-
}, {
|
|
83
|
-
classPrefix: 'myprefix',
|
|
84
|
-
breakpoints: {
|
|
85
|
-
sm: 480,
|
|
86
|
-
md: 768,
|
|
87
|
-
lg: 1024,
|
|
88
|
-
},
|
|
89
|
-
});
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
### Using Breakpoints
|
|
93
|
-
|
|
94
|
-
You can use the defined breakpoints in your styles to create responsive designs:
|
|
95
|
-
|
|
96
|
-
```typescript
|
|
97
|
-
const responsiveStyles = css({
|
|
98
|
-
fontSize: 14,
|
|
99
|
-
padding: {
|
|
100
|
-
sm: 12,
|
|
101
|
-
lg: 24
|
|
102
|
-
},
|
|
103
|
-
|
|
104
|
-
}, {
|
|
105
|
-
breakpoints: {
|
|
106
|
-
sm: 480,
|
|
107
|
-
md: 768,
|
|
108
|
-
lg: 1024,
|
|
109
|
-
},
|
|
110
|
-
});
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
---
|
|
114
|
-
|
|
115
|
-
## React Integration
|
|
116
|
-
|
|
117
|
-
oncss integrates seamlessly with React. Simply pass the generated class name to your component.
|
|
118
|
-
|
|
119
|
-
### React Example
|
|
120
|
-
|
|
121
|
-
```typescript
|
|
122
|
-
import React from 'react';
|
|
123
|
-
import css from 'oncss';
|
|
124
|
-
|
|
125
|
-
const buttonStyle = css({
|
|
126
|
-
backgroundColor: 'green',
|
|
127
|
-
color: 'white',
|
|
128
|
-
padding: '10px 20px',
|
|
129
|
-
borderRadius: '8px',
|
|
130
|
-
'&:hover': {
|
|
131
|
-
backgroundColor: 'darkgreen',
|
|
132
|
-
},
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
function Button() {
|
|
136
|
-
return <button className={buttonStyle.toString()}>Click Me</button>;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
export default Button;
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## Advanced Features
|
|
145
|
-
|
|
146
|
-
### Nested Selectors
|
|
147
|
-
|
|
148
|
-
Apply styles to child elements or pseudo-classes:
|
|
149
|
-
|
|
150
|
-
```typescript
|
|
151
|
-
const cardStyles = css({
|
|
152
|
-
padding: '20px',
|
|
153
|
-
border: '1px solid #ccc',
|
|
154
|
-
'& h1': {
|
|
155
|
-
fontSize: '24px',
|
|
156
|
-
margin: 0,
|
|
157
|
-
},
|
|
158
|
-
'&:hover': {
|
|
159
|
-
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
|
|
160
|
-
},
|
|
161
|
-
});
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Media Queries
|
|
165
|
-
|
|
166
|
-
Easily add responsive styles:
|
|
167
|
-
|
|
168
|
-
```typescript
|
|
169
|
-
const responsiveStyles = css({
|
|
170
|
-
fontSize: '14px',
|
|
171
|
-
'@media (min-width: 768px)': {
|
|
172
|
-
fontSize: '18px',
|
|
173
|
-
},
|
|
174
|
-
});
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### Keyframes
|
|
178
|
-
|
|
179
|
-
Define and use animations:
|
|
180
|
-
|
|
181
|
-
```typescript
|
|
182
|
-
const animationStyles = css({
|
|
183
|
-
'@keyframes fadeIn': {
|
|
184
|
-
from: { opacity: 0 },
|
|
185
|
-
to: { opacity: 1 },
|
|
186
|
-
},
|
|
187
|
-
animation: 'fadeIn 2s ease-in-out',
|
|
188
|
-
});
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
### Global Styles
|
|
192
|
-
|
|
193
|
-
Apply global styles effortlessly:
|
|
194
|
-
|
|
195
|
-
```typescript
|
|
196
|
-
const globalStyles = css({
|
|
197
|
-
'@global': {
|
|
198
|
-
body: {
|
|
199
|
-
margin: 0,
|
|
200
|
-
fontFamily: 'Arial, sans-serif',
|
|
201
|
-
},
|
|
202
|
-
a: {
|
|
203
|
-
color: 'blue',
|
|
204
|
-
textDecoration: 'none',
|
|
205
|
-
},
|
|
206
|
-
},
|
|
207
|
-
});
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
---
|
|
211
|
-
|
|
212
|
-
## Supported At-Rules
|
|
213
|
-
|
|
214
|
-
`oncss` supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:
|
|
215
|
-
|
|
216
|
-
| At-Rule | Description |
|
|
217
|
-
| ------------ | ---------------------------------------------------------------------------- |
|
|
218
|
-
| `@media` | Used for applying styles based on media queries for responsive design. |
|
|
219
|
-
| `@keyframes` | Defines animations that can be applied to elements. |
|
|
220
|
-
| `@global` | Applies styles globally across the entire application. |
|
|
221
|
-
| `@container` | Used for container queries to apply styles based on container size. |
|
|
222
|
-
| `@layer` | Defines style layers to control the order of style application. |
|
|
223
|
-
| `@supports` | Applies styles based on the support of specific CSS features in the browser. |
|
|
224
|
-
|
|
225
|
-
---
|
|
226
|
-
|
|
227
|
-
## Server-Side Styling
|
|
228
|
-
|
|
229
|
-
`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.
|
|
230
|
-
|
|
231
|
-
### Example with React
|
|
232
|
-
|
|
233
|
-
Here's an example of how to use `oncss` for server-side rendering with React:
|
|
234
|
-
|
|
235
|
-
```tsx
|
|
236
|
-
import React from 'react';
|
|
237
|
-
import ReactDOMServer from 'react-dom/server';
|
|
238
|
-
import css, { CSSFactory } from 'oncss';
|
|
239
|
-
|
|
240
|
-
const buttonStyle = css({
|
|
241
|
-
backgroundColor: 'blue',
|
|
242
|
-
color: 'white',
|
|
243
|
-
padding: '10px 20px',
|
|
244
|
-
borderRadius: '5px',
|
|
245
|
-
'&:hover': {
|
|
246
|
-
backgroundColor: 'darkblue',
|
|
247
|
-
},
|
|
248
|
-
});
|
|
249
|
-
|
|
250
|
-
function Button() {
|
|
251
|
-
return <button className={buttonStyle}>Click Me</button>;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
const App = () => (
|
|
255
|
-
<div>
|
|
256
|
-
<Button />
|
|
257
|
-
</div>
|
|
258
|
-
);
|
|
259
|
-
|
|
260
|
-
// Render the component to a string
|
|
261
|
-
const html = ReactDOMServer.renderToString(<App />);
|
|
262
|
-
|
|
263
|
-
let styles: any = Array.from(CSSFactory.values()).map((style) => {
|
|
264
|
-
return `<style data-href="${style.classname}">${style.css}</style>`
|
|
265
|
-
});
|
|
266
|
-
|
|
267
|
-
// Inject the styles into the HTML
|
|
268
|
-
const fullHtml = `
|
|
269
|
-
<!DOCTYPE html>
|
|
270
|
-
<html lang="en">
|
|
271
|
-
<head>
|
|
272
|
-
<meta charset="UTF-8">
|
|
273
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
274
|
-
<title>SSR with oncss</title>
|
|
275
|
-
${styles}
|
|
276
|
-
</head>
|
|
277
|
-
<body>
|
|
278
|
-
<div id="root">${html}</div>
|
|
279
|
-
</body>
|
|
280
|
-
</html>
|
|
281
|
-
`;
|
|
282
|
-
|
|
283
|
-
console.log(fullHtml);
|
|
284
|
-
```
|
|
285
|
-
|
|
286
|
-
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.
|
|
287
|
-
|
|
288
|
-
---
|
|
289
|
-
|
|
290
|
-
## Utility Functions
|
|
291
|
-
|
|
292
|
-
### CSSFactory
|
|
293
|
-
|
|
294
|
-
`CSSFactory` is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.
|
|
295
|
-
|
|
296
|
-
### formatCSSProp
|
|
297
|
-
|
|
298
|
-
`formatCSSProp` is a utility function that converts camelCase CSS property names to kebab-case.
|
|
299
|
-
|
|
300
|
-
```typescript
|
|
301
|
-
import { formatCSSProp } from 'oncss';
|
|
302
|
-
|
|
303
|
-
const formattedProp = formatCSSProp('backgroundColor');
|
|
304
|
-
console.log(formattedProp); // 'background-color'
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
### formatCSSValue
|
|
308
|
-
|
|
309
|
-
`formatCSSValue` is a utility function that formats CSS values, adding units like `px` where necessary.
|
|
310
|
-
|
|
311
|
-
```typescript
|
|
312
|
-
import { formatCSSValue } from 'oncss';
|
|
313
|
-
|
|
314
|
-
const formattedValue = formatCSSValue('width', 100);
|
|
315
|
-
console.log(formattedValue); // '100px'
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
---
|
|
319
|
-
|
|
320
|
-
## TypeScript Integration
|
|
321
|
-
|
|
322
|
-
`oncss` provides full TypeScript support, allowing you to define types for your CSS properties and options.
|
|
323
|
-
|
|
324
|
-
### Defining CSS Properties
|
|
325
|
-
|
|
326
|
-
You can define the types for your CSS properties using the `CSSProps` type:
|
|
327
|
-
|
|
328
|
-
```typescript
|
|
329
|
-
import { CSSProps } from 'oncss';
|
|
330
|
-
|
|
331
|
-
interface MyAliases {
|
|
332
|
-
customColor?: string;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
const styles: CSSProps<MyAliases, 'sm' | 'md' | 'lg'> = {
|
|
336
|
-
backgroundColor: 'blue',
|
|
337
|
-
customColor: 'red',
|
|
338
|
-
'@media (min-width: 768px)': {
|
|
339
|
-
backgroundColor: 'green',
|
|
340
|
-
},
|
|
341
|
-
};
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
### Using Options with Types
|
|
345
|
-
|
|
346
|
-
You can also define types for the options object:
|
|
347
|
-
|
|
348
|
-
```typescript
|
|
349
|
-
import { CSSOptionProps } from 'oncss';
|
|
350
|
-
|
|
351
|
-
const options: CSSOptionProps<MyAliases, 'sm' | 'md' | 'lg'> = {
|
|
352
|
-
classPrefix: 'myprefix',
|
|
353
|
-
breakpoints: {
|
|
354
|
-
sm: 480,
|
|
355
|
-
md: 768,
|
|
356
|
-
lg: 1024,
|
|
357
|
-
},
|
|
358
|
-
aliases: {
|
|
359
|
-
customColor: (value) => ({ color: value }),
|
|
360
|
-
},
|
|
361
|
-
};
|
|
362
|
-
|
|
363
|
-
const styles = css({
|
|
364
|
-
fontSize: 16,
|
|
365
|
-
padding: 10,
|
|
366
|
-
}, options);
|
|
367
|
-
```
|
|
368
|
-
|
|
369
|
-
---
|
|
370
|
-
|
|
371
|
-
## Conclusion
|
|
372
|
-
|
|
373
|
-
`oncss` simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.
|
|
374
|
-
|
|
375
|
-
## Author
|
|
376
|
-
|
|
377
|
-
<table>
|
|
378
|
-
<tr>
|
|
379
|
-
<td>
|
|
380
|
-
<img src="https://raw.githubusercontent.com/devnax/devnax/main/me-circle-200.png" alt="devnax" width="100" height="100">
|
|
381
|
-
</td>
|
|
382
|
-
<td>
|
|
383
|
-
<strong>Naxrul Ahmed</strong><br>
|
|
384
|
-
<a href="https://github.com/devnax">GitHub Profile</a><br>
|
|
385
|
-
<a href="https://www.npmjs.com/~devnax">npm Profile</a><br>
|
|
386
|
-
<a href="https://github.com/devnax/open-source">Open Source Projects</a>
|
|
387
|
-
</td>
|
|
388
|
-
</tr>
|
|
389
|
-
</table>
|
|
390
|
-
|
|
391
|
-
<h2>⚡️ Where to find me</h2>
|
|
392
|
-
|
|
393
|
-
<p><a target="_blank" href="mailto:devnaxrul@gmail.com" style="display: inline-block;"><img src="https://img.shields.io/badge/-Email-05122A?style=for-the-badge&logo=gmail&logoColor=white&color=orange" alt="gmail" /></a>
|
|
394
|
-
<a target="_blank" href="https://twitter.com/devnaxx" style="display: inline-block;"><img src="https://img.shields.io/badge/twitter-x?style=for-the-badge&logo=x&logoColor=white&color=%230f1419" alt="twitter" /></a>
|
|
395
|
-
<a target="_blank" href="https://www.linkedin.com/in/devnax" style="display: inline-block;"><img src="https://img.shields.io/badge/linkedin-logo?style=for-the-badge&logo=linkedin&logoColor=white&color=%230a77b6" alt="linkedin" /></a>
|
|
396
|
-
<a target="_blank" href="https://www.facebook.com/devnax" style="display: inline-block;"><img src="https://img.shields.io/badge/facebook-logo?style=for-the-badge&logo=facebook&logoColor=white&color=%230866ff" alt="facebook" /></a>
|
|
397
|
-
<a target="_blank" href="https://www.instagram.com/devnaxx" style="display: inline-block;"><img src="https://img.shields.io/badge/instagram-logo?style=for-the-badge&logo=instagram&logoColor=white&color=%23F35369" alt="instagram" /></a></p>
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img width="120" src="https://raw.githubusercontent.com/devnax/oncss/main/logo.png" alt="ONCSS Logo">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">ONCSS</h1>
|
|
6
|
+
|
|
7
|
+
`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.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
Install the `oncss` package via npm:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install oncss
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Import the `css` function in your project:
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
import css from 'oncss';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Core Concept: The `css` Function
|
|
28
|
+
|
|
29
|
+
The `css` function is the heart of `oncss`, designed to dynamically generate and inject CSS into your application. It supports:
|
|
30
|
+
|
|
31
|
+
- **CSS Properties**: Use standard CSS properties and values.
|
|
32
|
+
- **Nested Selectors**: Apply styles to child elements or states using `&`.
|
|
33
|
+
- **Media Queries**: Implement responsive designs with `@media` rules.
|
|
34
|
+
- **Keyframes**: Create animations with `@keyframes`.
|
|
35
|
+
- **Global Styles**: Apply styles globally with `@global`.
|
|
36
|
+
- **Custom Breakpoints**: Define reusable breakpoints for responsiveness.
|
|
37
|
+
- **Other At-Rules**: Utilize additional at-rules like `@container`, `@layer`, and `@supports`.
|
|
38
|
+
|
|
39
|
+
### Basic Example
|
|
40
|
+
|
|
41
|
+
```typescript
|
|
42
|
+
const buttonStyles = css({
|
|
43
|
+
backgroundColor: 'blue',
|
|
44
|
+
color: 'white',
|
|
45
|
+
padding: '10px 20px',
|
|
46
|
+
borderRadius: '5px',
|
|
47
|
+
'&:hover': {
|
|
48
|
+
backgroundColor: 'darkblue',
|
|
49
|
+
},
|
|
50
|
+
'@media (min-width: 768px)': {
|
|
51
|
+
padding: '15px 30px',
|
|
52
|
+
},
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
console.log(buttonStyles);
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Configuration Options
|
|
61
|
+
|
|
62
|
+
The `css` function can be customized through an options object:
|
|
63
|
+
|
|
64
|
+
### Available Properties
|
|
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. 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
|
+
|
|
76
|
+
### Example with Options
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
const styles = css({
|
|
80
|
+
fontSize: 16,
|
|
81
|
+
padding: 10,
|
|
82
|
+
}, {
|
|
83
|
+
classPrefix: 'myprefix',
|
|
84
|
+
breakpoints: {
|
|
85
|
+
sm: 480,
|
|
86
|
+
md: 768,
|
|
87
|
+
lg: 1024,
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Using Breakpoints
|
|
93
|
+
|
|
94
|
+
You can use the defined breakpoints in your styles to create responsive designs:
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
const responsiveStyles = css({
|
|
98
|
+
fontSize: 14,
|
|
99
|
+
padding: {
|
|
100
|
+
sm: 12,
|
|
101
|
+
lg: 24
|
|
102
|
+
},
|
|
103
|
+
|
|
104
|
+
}, {
|
|
105
|
+
breakpoints: {
|
|
106
|
+
sm: 480,
|
|
107
|
+
md: 768,
|
|
108
|
+
lg: 1024,
|
|
109
|
+
},
|
|
110
|
+
});
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
## React Integration
|
|
116
|
+
|
|
117
|
+
oncss integrates seamlessly with React. Simply pass the generated class name to your component.
|
|
118
|
+
|
|
119
|
+
### React Example
|
|
120
|
+
|
|
121
|
+
```typescript
|
|
122
|
+
import React from 'react';
|
|
123
|
+
import css from 'oncss';
|
|
124
|
+
|
|
125
|
+
const buttonStyle = css({
|
|
126
|
+
backgroundColor: 'green',
|
|
127
|
+
color: 'white',
|
|
128
|
+
padding: '10px 20px',
|
|
129
|
+
borderRadius: '8px',
|
|
130
|
+
'&:hover': {
|
|
131
|
+
backgroundColor: 'darkgreen',
|
|
132
|
+
},
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
function Button() {
|
|
136
|
+
return <button className={buttonStyle.toString()}>Click Me</button>;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export default Button;
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Advanced Features
|
|
145
|
+
|
|
146
|
+
### Nested Selectors
|
|
147
|
+
|
|
148
|
+
Apply styles to child elements or pseudo-classes:
|
|
149
|
+
|
|
150
|
+
```typescript
|
|
151
|
+
const cardStyles = css({
|
|
152
|
+
padding: '20px',
|
|
153
|
+
border: '1px solid #ccc',
|
|
154
|
+
'& h1': {
|
|
155
|
+
fontSize: '24px',
|
|
156
|
+
margin: 0,
|
|
157
|
+
},
|
|
158
|
+
'&:hover': {
|
|
159
|
+
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
|
|
160
|
+
},
|
|
161
|
+
});
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Media Queries
|
|
165
|
+
|
|
166
|
+
Easily add responsive styles:
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
const responsiveStyles = css({
|
|
170
|
+
fontSize: '14px',
|
|
171
|
+
'@media (min-width: 768px)': {
|
|
172
|
+
fontSize: '18px',
|
|
173
|
+
},
|
|
174
|
+
});
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Keyframes
|
|
178
|
+
|
|
179
|
+
Define and use animations:
|
|
180
|
+
|
|
181
|
+
```typescript
|
|
182
|
+
const animationStyles = css({
|
|
183
|
+
'@keyframes fadeIn': {
|
|
184
|
+
from: { opacity: 0 },
|
|
185
|
+
to: { opacity: 1 },
|
|
186
|
+
},
|
|
187
|
+
animation: 'fadeIn 2s ease-in-out',
|
|
188
|
+
});
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Global Styles
|
|
192
|
+
|
|
193
|
+
Apply global styles effortlessly:
|
|
194
|
+
|
|
195
|
+
```typescript
|
|
196
|
+
const globalStyles = css({
|
|
197
|
+
'@global': {
|
|
198
|
+
body: {
|
|
199
|
+
margin: 0,
|
|
200
|
+
fontFamily: 'Arial, sans-serif',
|
|
201
|
+
},
|
|
202
|
+
a: {
|
|
203
|
+
color: 'blue',
|
|
204
|
+
textDecoration: 'none',
|
|
205
|
+
},
|
|
206
|
+
},
|
|
207
|
+
});
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## Supported At-Rules
|
|
213
|
+
|
|
214
|
+
`oncss` supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:
|
|
215
|
+
|
|
216
|
+
| At-Rule | Description |
|
|
217
|
+
| ------------ | ---------------------------------------------------------------------------- |
|
|
218
|
+
| `@media` | Used for applying styles based on media queries for responsive design. |
|
|
219
|
+
| `@keyframes` | Defines animations that can be applied to elements. |
|
|
220
|
+
| `@global` | Applies styles globally across the entire application. |
|
|
221
|
+
| `@container` | Used for container queries to apply styles based on container size. |
|
|
222
|
+
| `@layer` | Defines style layers to control the order of style application. |
|
|
223
|
+
| `@supports` | Applies styles based on the support of specific CSS features in the browser. |
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## Server-Side Styling
|
|
228
|
+
|
|
229
|
+
`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.
|
|
230
|
+
|
|
231
|
+
### Example with React
|
|
232
|
+
|
|
233
|
+
Here's an example of how to use `oncss` for server-side rendering with React:
|
|
234
|
+
|
|
235
|
+
```tsx
|
|
236
|
+
import React from 'react';
|
|
237
|
+
import ReactDOMServer from 'react-dom/server';
|
|
238
|
+
import css, { CSSFactory } from 'oncss';
|
|
239
|
+
|
|
240
|
+
const buttonStyle = css({
|
|
241
|
+
backgroundColor: 'blue',
|
|
242
|
+
color: 'white',
|
|
243
|
+
padding: '10px 20px',
|
|
244
|
+
borderRadius: '5px',
|
|
245
|
+
'&:hover': {
|
|
246
|
+
backgroundColor: 'darkblue',
|
|
247
|
+
},
|
|
248
|
+
});
|
|
249
|
+
|
|
250
|
+
function Button() {
|
|
251
|
+
return <button className={buttonStyle}>Click Me</button>;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
const App = () => (
|
|
255
|
+
<div>
|
|
256
|
+
<Button />
|
|
257
|
+
</div>
|
|
258
|
+
);
|
|
259
|
+
|
|
260
|
+
// Render the component to a string
|
|
261
|
+
const html = ReactDOMServer.renderToString(<App />);
|
|
262
|
+
|
|
263
|
+
let styles: any = Array.from(CSSFactory.values()).map((style) => {
|
|
264
|
+
return `<style data-href="${style.classname}">${style.css}</style>`
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
// Inject the styles into the HTML
|
|
268
|
+
const fullHtml = `
|
|
269
|
+
<!DOCTYPE html>
|
|
270
|
+
<html lang="en">
|
|
271
|
+
<head>
|
|
272
|
+
<meta charset="UTF-8">
|
|
273
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
274
|
+
<title>SSR with oncss</title>
|
|
275
|
+
${styles}
|
|
276
|
+
</head>
|
|
277
|
+
<body>
|
|
278
|
+
<div id="root">${html}</div>
|
|
279
|
+
</body>
|
|
280
|
+
</html>
|
|
281
|
+
`;
|
|
282
|
+
|
|
283
|
+
console.log(fullHtml);
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
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.
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
## Utility Functions
|
|
291
|
+
|
|
292
|
+
### CSSFactory
|
|
293
|
+
|
|
294
|
+
`CSSFactory` is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.
|
|
295
|
+
|
|
296
|
+
### formatCSSProp
|
|
297
|
+
|
|
298
|
+
`formatCSSProp` is a utility function that converts camelCase CSS property names to kebab-case.
|
|
299
|
+
|
|
300
|
+
```typescript
|
|
301
|
+
import { formatCSSProp } from 'oncss';
|
|
302
|
+
|
|
303
|
+
const formattedProp = formatCSSProp('backgroundColor');
|
|
304
|
+
console.log(formattedProp); // 'background-color'
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
### formatCSSValue
|
|
308
|
+
|
|
309
|
+
`formatCSSValue` is a utility function that formats CSS values, adding units like `px` where necessary.
|
|
310
|
+
|
|
311
|
+
```typescript
|
|
312
|
+
import { formatCSSValue } from 'oncss';
|
|
313
|
+
|
|
314
|
+
const formattedValue = formatCSSValue('width', 100);
|
|
315
|
+
console.log(formattedValue); // '100px'
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
---
|
|
319
|
+
|
|
320
|
+
## TypeScript Integration
|
|
321
|
+
|
|
322
|
+
`oncss` provides full TypeScript support, allowing you to define types for your CSS properties and options.
|
|
323
|
+
|
|
324
|
+
### Defining CSS Properties
|
|
325
|
+
|
|
326
|
+
You can define the types for your CSS properties using the `CSSProps` type:
|
|
327
|
+
|
|
328
|
+
```typescript
|
|
329
|
+
import { CSSProps } from 'oncss';
|
|
330
|
+
|
|
331
|
+
interface MyAliases {
|
|
332
|
+
customColor?: string;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
const styles: CSSProps<MyAliases, 'sm' | 'md' | 'lg'> = {
|
|
336
|
+
backgroundColor: 'blue',
|
|
337
|
+
customColor: 'red',
|
|
338
|
+
'@media (min-width: 768px)': {
|
|
339
|
+
backgroundColor: 'green',
|
|
340
|
+
},
|
|
341
|
+
};
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
### Using Options with Types
|
|
345
|
+
|
|
346
|
+
You can also define types for the options object:
|
|
347
|
+
|
|
348
|
+
```typescript
|
|
349
|
+
import { CSSOptionProps } from 'oncss';
|
|
350
|
+
|
|
351
|
+
const options: CSSOptionProps<MyAliases, 'sm' | 'md' | 'lg'> = {
|
|
352
|
+
classPrefix: 'myprefix',
|
|
353
|
+
breakpoints: {
|
|
354
|
+
sm: 480,
|
|
355
|
+
md: 768,
|
|
356
|
+
lg: 1024,
|
|
357
|
+
},
|
|
358
|
+
aliases: {
|
|
359
|
+
customColor: (value) => ({ color: value }),
|
|
360
|
+
},
|
|
361
|
+
};
|
|
362
|
+
|
|
363
|
+
const styles = css({
|
|
364
|
+
fontSize: 16,
|
|
365
|
+
padding: 10,
|
|
366
|
+
}, options);
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
---
|
|
370
|
+
|
|
371
|
+
## Conclusion
|
|
372
|
+
|
|
373
|
+
`oncss` simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.
|
|
374
|
+
|
|
375
|
+
## Author
|
|
376
|
+
|
|
377
|
+
<table>
|
|
378
|
+
<tr>
|
|
379
|
+
<td>
|
|
380
|
+
<img src="https://raw.githubusercontent.com/devnax/devnax/main/me-circle-200.png" alt="devnax" width="100" height="100">
|
|
381
|
+
</td>
|
|
382
|
+
<td>
|
|
383
|
+
<strong>Naxrul Ahmed</strong><br>
|
|
384
|
+
<a href="https://github.com/devnax">GitHub Profile</a><br>
|
|
385
|
+
<a href="https://www.npmjs.com/~devnax">npm Profile</a><br>
|
|
386
|
+
<a href="https://github.com/devnax/open-source">Open Source Projects</a>
|
|
387
|
+
</td>
|
|
388
|
+
</tr>
|
|
389
|
+
</table>
|
|
390
|
+
|
|
391
|
+
<h2>⚡️ Where to find me</h2>
|
|
392
|
+
|
|
393
|
+
<p><a target="_blank" href="mailto:devnaxrul@gmail.com" style="display: inline-block;"><img src="https://img.shields.io/badge/-Email-05122A?style=for-the-badge&logo=gmail&logoColor=white&color=orange" alt="gmail" /></a>
|
|
394
|
+
<a target="_blank" href="https://twitter.com/devnaxx" style="display: inline-block;"><img src="https://img.shields.io/badge/twitter-x?style=for-the-badge&logo=x&logoColor=white&color=%230f1419" alt="twitter" /></a>
|
|
395
|
+
<a target="_blank" href="https://www.linkedin.com/in/devnax" style="display: inline-block;"><img src="https://img.shields.io/badge/linkedin-logo?style=for-the-badge&logo=linkedin&logoColor=white&color=%230a77b6" alt="linkedin" /></a>
|
|
396
|
+
<a target="_blank" href="https://www.facebook.com/devnax" style="display: inline-block;"><img src="https://img.shields.io/badge/facebook-logo?style=for-the-badge&logo=facebook&logoColor=white&color=%230866ff" alt="facebook" /></a>
|
|
397
|
+
<a target="_blank" href="https://www.instagram.com/devnaxx" style="display: inline-block;"><img src="https://img.shields.io/badge/instagram-logo?style=for-the-badge&logo=instagram&logoColor=white&color=%23F35369" alt="instagram" /></a></p>
|
package/types.d.ts
CHANGED
|
@@ -44,6 +44,8 @@ interface CSSOptionProps<Aliases, BreakpointKeys extends string> {
|
|
|
44
44
|
};
|
|
45
45
|
aliases?: OptionAliases<Aliases>;
|
|
46
46
|
injectStyle?: boolean;
|
|
47
|
+
container?: Document | HTMLElement;
|
|
48
|
+
selector?: string;
|
|
47
49
|
skipProps?: (prop: string, value: string | number, dept: number) => boolean | void;
|
|
48
50
|
getValue?: (value: string | number, prop: string, css: CSSProps<Aliases, BreakpointKeys>, dept: number) => (string | number);
|
|
49
51
|
getProps?: (prop: string, value: string | number, css: CSSProps<Aliases, BreakpointKeys>, dept: number) => CSSProps<Aliases, BreakpointKeys> | void;
|
package/core.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"core.mjs","sources":["../src/core.ts"],"sourcesContent":["import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';\nimport youid from 'youid';\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\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 = 1) => {\n let cachekey\n let classname = cls\n if (!cls) {\n cachekey = JSON.stringify(_css, (_key, value) => typeof value === \"function\" ? value.toString() : value);\n const has = CSSFactory.get(cachekey)\n if (has) {\n has.cache = true\n return has\n }\n classname = `${opt?.classPrefix || \"\"}x${youid(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 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 + 1)\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 + 1)\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 + 1)\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 === 'function' || Array.isArray(val)) {\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-href=\"${classname}\"]`) as HTMLStyleElement | null,\n deleteStyle: () => {\n const tag = document?.querySelector(`[data-href=\"${classname}\"]`)\n tag && tag.remove()\n },\n toString: () => classname as string\n }\n CSSFactory.set(cachekey, r)\n let inject = opt?.injectStyle ?? true\n if (inject && typeof window !== 'undefined') {\n if (!document.querySelector(`[data-href=\"${classname}\"]`)) {\n const tag = document.createElement(\"style\");\n tag.innerHTML = r.css\n tag.setAttribute(`data-href`, classname as string)\n document.head.append(tag)\n }\n }\n return r\n }\n return { stack, skiped }\n}"],"names":[],"mappings":"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"}
|
package/index.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import {style}from'./core.mjs';export{CSSFactory,formatCSSProp,formatCSSValue}from'./core.mjs';const css = (_css, options) => style(_css, undefined, options);export{css,css as default};//# sourceMappingURL=index.mjs.map
|
package/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { style } from \"./core\";\nimport { CSSProps, CSSOptionProps, CSSFactoryType } from \"./types\";\nexport { CSSFactory, formatCSSProp, formatCSSValue } from './core'\nexport * from './types'\n\nexport const css = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>): CSSFactoryType => style<Aliases, BreakpointKeys>(_css, undefined, options) as any\nexport default css"],"names":[],"mappings":"+FAKO,MAAM,GAAG,GAAG,CAAyC,IAAuC,EAAE,OAAiD,KAAqB,KAAK,CAA0B,IAAI,EAAE,SAAS,EAAE,OAAO"}
|