oncss 1.0.0

package/core.d.ts

@@ -0,0 +1,23 @@
+import { CSSOptionProps, CSSFactoryType, CSSProps } from './types';
+export declare const CSSFactory: Map<string, CSSFactoryType>;
+export declare const uid: (str: string) => any;
+export declare const formatCSSProp: (prop: string) => string;
+export declare const formatCSSValue: (prop: string, val: any) => any;
+export declare const cssPrefix: (prop: string, value: string) => {
+    prop: string;
+    value: string;
+};
+export declare const style: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, cls?: string, opt?: CSSOptionProps<Aliases, BreakpointKeys>) => CSSFactoryType | {
+    cache: boolean;
+    cachekey: string;
+    classname: string;
+    css: any;
+    cssraw: CSSProps<Aliases, BreakpointKeys>;
+    skiped: any;
+    toString: () => string;
+    getStyleTag: () => HTMLStyleElement | null;
+    deleteStyle: () => void;
+} | {
+    stack: any;
+    skiped: any;
+} | undefined;

package/core.js

@@ -0,0 +1,2 @@
+const k=typeof window<"u"?window:global;k.Factory=k.Factory||new Map;const h=k.Factory,w=n=>{for(var i=0,e=n.length,f=0;f<e;f++)i=(i<<5)-i+n.charCodeAt(f),i|=0;let t=i.toString(32).slice(-10).replaceAll("-","");return/^\d/.test(t.charAt(0))&&(t="c"+t),t},b=["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"],C=n=>n.split(/(?=[A-Z])/).join("-").toLowerCase(),A=(n,i)=>typeof i=="number"&&!b.includes(n)?`${i}px`:i,$=["webkit","moz","ms","o"];let P;const x=new Map,E=(n,i)=>{if(i=A(n,i),n=C(n),typeof window>"u")return{prop:n,value:i};const e=P||(P=document.createElement("div").style);if(i=i?.toString(),e.setProperty(n,i),e.getPropertyValue(n)===i)return{prop:n,value:i};const f=x.get(n);if(f)return{prop:f._prop,value:`${f._vprefix}${i}`};let t=n,o=i,y="";const c=n.includes("-")?n.replace(/-([a-z])/g,(s,a)=>a.toUpperCase()):n;for(const s of $)if(e[`${s}${c}`]!==void 0){t=`-${s}-${n}`;break}if(e.setProperty(t,i),!e.getPropertyValue(t))for(const s of $){const a=`-${s}-${i}`;if(e.setProperty(t,a),e.getPropertyValue(t)===a){o=a,y=`-${s}-`;break}}return x.set(n,{_prop:t,_vprefix:y}),{prop:t,value:o}},g=(n,i,e)=>{let f,t=i;if(i){if(typeof i!="string")throw new Error(`Invalid class name: ${i}`)}else{f=JSON.stringify(n);const s=h.get(f);if(s)return s.cache=!0,s;t=w(f)}let o=[`${t}{`],y={},c={};for(let s in n){let a=n[s];if(s.startsWith("&")){let r=s.replaceAll("&",t);const l=g(a,r,e);e?.skipProps&&(c={...c,...l.skiped}),o.push(l.stack)}else if(s.startsWith("@media")){let r=g(a,t,e);const l=s+"{"+r.stack+"}";o.push(l),e?.skipProps&&(c={...c,...r.skiped})}else if(s.startsWith("@keyframes")){let r="";for(let l in a){const p=g(a[l],l,e);r+=p.stack,e?.skipProps&&(c={...c,...p.skiped})}o.push(`${s}{${r}}`)}else if(s.startsWith("@global")){let r="";for(let l in a){let p=g(a[l],l,e);r+=p.stack,e?.skipProps&&(c={...c,...p.skiped})}o.push(r)}else if(typeof a=="object")for(let r in a){if(typeof a[r]=="object"||typeof a[r]=="function"||Array.isArray(a[r]))throw new Error(`Invalid css value: ${a[r]}`);let l=r;if(!!isNaN(parseInt(l)))if(e?.breakpoints&&!isNaN(parseInt(e.breakpoints[r])))l=e.breakpoints[r].toString();else throw new Error(`Invalid breakpoint prop: ${r}`);let d={[s]:a[r]},m=g(d,t,e),S=m.stack,u=`@media (min-width: ${l}px)`;y[u]=y[u]?y[u]+S:S,e?.skipProps&&(c={...c,...m.skiped})}else{if(e?.skipProps&&e.skipProps(s,a)){c[t]||(c[t]=[]),c[t].push(s);continue}if(e?.getProps){let l=e.getProps(s,a,n);if(l){let p=g(l,t,{...e,getProps:void 0});o.push(p);continue}}if(e?.getValue)a=e.getValue(s,a,n);else if(e?.aliases&&e.aliases[s]){let l=e.aliases[s](s,a);if(l){let p=g(l,t,{...e,getProps:void 0}),d=p.stack;d=d.replace(`${t}{`,"").replace("}",""),d=d.replace("}",""),o[0]+=d,c[t]=p.skiped;continue}}const r=E(s,a);o[0]+=`${r.prop}:${r.value};`}}o[0]+="}",o[0]===`${t}{}`&&(o[0]=""),o=o.join("");for(let s in y)o+=`${s}{${y[s].replaceAll(`}${t}{`,"")}}`;if(f){o=o.replaceAll(t,"."+t);const s={cache:!1,cachekey:f,classname:t,css:o,cssraw:n,skiped:c,toString:()=>t,getStyleTag:()=>document?.querySelector(`[data-oncss="${t}"]`),deleteStyle:()=>{const r=document?.querySelector(`[data-oncss="${t}"]`);r&&r.remove()}};if(h.set(f,s),(e?.injectStyle||!0)&&typeof window<"u"){if(document.querySelector(`[data-oncss="${t}"]`))return;const r=document.createElement("style");r.innerHTML=s.css,r.setAttribute("data-oncss",t),document.head.append(r)}return s}return{stack:o,skiped:c}};export{h as CSSFactory,E as cssPrefix,C as formatCSSProp,A as formatCSSValue,g as style,w as uid};
+//# sourceMappingURL=core.js.map

package/core.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/core.ts"],
+  "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}"],
+  "mappings": "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",
+  "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", "ncls", "r", "mediacss", "frams", "frame", "selector", "media", "breakpoint", "_style", "mediakey", "_props", "s", "format", "tag"]
+}

package/index.d.ts

@@ -0,0 +1,5 @@
+import { CSSProps, CSSOptionProps } from "./types";
+export { CSSFactory, formatCSSProp, formatCSSValue } from './core';
+export * from './types';
+declare const css: <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>) => any;
+export default css;

package/index.js

@@ -0,0 +1,2 @@
+import{style as r}from"./core";import{CSSFactory as m,formatCSSProp as l,formatCSSValue as y}from"./core";export*from"./types";const s=(o,e)=>r(o,void 0,e);var S=s;export{m as CSSFactory,S as default,l as formatCSSProp,y as formatCSSValue};
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "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\nconst css = <Aliases, BreakpointKeys extends string>(_css: CSSProps<Aliases, BreakpointKeys>, options?: CSSOptionProps<Aliases, BreakpointKeys>): any => style<Aliases, BreakpointKeys>(_css, undefined, options)\r\nexport default css"],
+  "mappings": "AAAA,OAAS,SAAAA,MAAa,SAEtB,OAAS,cAAAC,EAAY,iBAAAC,EAAe,kBAAAC,MAAsB,SAC1D,WAAc,UAEd,MAAMC,EAAM,CAAyCC,EAAyCC,IAA2DN,EAA+BK,EAAM,OAAWC,CAAO,EAChN,IAAOC,EAAQH",
+  "names": ["style", "CSSFactory", "formatCSSProp", "formatCSSValue", "css", "_css", "options", "index_default"]
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+   "name": "oncss",
+   "version": "1.0.0",
+   "description": "",
+   "main": "./index.js",
+   "scripts": {
+      "start": "makepack serve",
+      "pack": "makepack pack",
+      "publish:pack": "makepack pack -p"
+   },
+   "devDependencies": {
+      "@types/react": "^19.0.2",
+      "@types/react-dom": "^19.0.2",
+      "makepack": "latest",
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "typescript": "^4.4.2"
+   },
+   "keywords": [
+      "css",
+      "oncss",
+      "styles",
+      "web development",
+      "frontend"
+   ],
+   "author": "Your Name",
+   "license": "MIT",
+   "repository": {
+      "type": "git",
+      "url": "https://github.com/yourusername/oncss.git"
+   },
+   "bugs": {
+      "url": "https://github.com/yourusername/oncss/issues"
+   }
+}

package/readme.md

@@ -0,0 +1,284 @@
+# oncss Documentation
+
+`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.
+
+---
+
+## Installation
+
+Install the `oncss` package via npm:
+
+```bash
+npm install oncss
+```
+
+Import the `css` function in your project:
+
+```javascript
+import css from 'oncss';
+```
+
+---
+
+## Core Concept: The `css` Function
+
+The `css` function is the heart of `oncss`, designed to dynamically generate and inject CSS into your application. It supports:
+
+- **CSS Properties**: Use standard CSS properties and values.
+- **Nested Selectors**: Apply styles to child elements or states using `&`.
+- **Media Queries**: Implement responsive designs with `@media` rules.
+- **Keyframes**: Create animations with `@keyframes`.
+- **Global Styles**: Apply styles globally with `@global`.
+- **Custom Breakpoints**: Define reusable breakpoints for responsiveness.
+
+### Basic Example
+
+```typescript
+const buttonStyles = css({
+  backgroundColor: 'blue',
+  color: 'white',
+  padding: '10px 20px',
+  borderRadius: '5px',
+  '&:hover': {
+    backgroundColor: 'darkblue',
+  },
+  '@media (min-width: 768px)': {
+    padding: '15px 30px',
+  },
+});
+
+console.log(buttonStyles.toString());
+```
+
+---
+
+## Configuration Options
+
+The `css` function can be customized through an options object:
+
+### Available Properties
+
+| Property      | Type       | Description                                |
+| ------------- | ---------- | ------------------------------------------ |
+| `classPrefix` | `string`   | Adds a prefix to generated class names.    |
+| `breakpoints` | `object`   | Custom breakpoints for responsive designs. |
+| `aliases`     | `object`   | Custom shorthand properties for CSS rules. |
+| `injectStyle` | `boolean`  | Controls whether styles are auto-injected. |
+| `skipProps`   | `function` | Filters out unwanted properties.           |
+| `getValue`    | `function` | Transforms property values dynamically.    |
+| `getProps`    | `function` | Customizes specific property handling.     |
+
+### Example with Options
+
+```typescript
+const styles = css({
+  fontSize: 16,
+  padding: 10,
+}, {
+  classPrefix: 'myprefix',
+  breakpoints: {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+  },
+});
+```
+
+### Using Breakpoints
+
+You can use the defined breakpoints in your styles to create responsive designs:
+
+```typescript
+const responsiveStyles = css({
+  fontSize: 14,
+  padding: {
+    sm: 12,
+    lg: 24
+  },
+  
+}, {
+  breakpoints: {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+  },
+});
+```
+
+---
+
+## React Integration
+
+oncss integrates seamlessly with React. Simply pass the generated class name to your component.
+
+### React Example
+
+```typescript
+import React from 'react';
+import css from 'oncss';
+
+const buttonStyle = css({
+  backgroundColor: 'green',
+  color: 'white',
+  padding: '10px 20px',
+  borderRadius: '8px',
+  '&:hover': {
+    backgroundColor: 'darkgreen',
+  },
+});
+
+function Button() {
+  return <button className={buttonStyle.toString()}>Click Me</button>;
+}
+
+export default Button;
+```
+
+---
+
+## Advanced Features
+
+### Nested Selectors
+
+Apply styles to child elements or pseudo-classes:
+
+```typescript
+const cardStyles = css({
+  padding: '20px',
+  border: '1px solid #ccc',
+  '& h1': {
+    fontSize: '24px',
+    margin: 0,
+  },
+  '&:hover': {
+    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+  },
+});
+```
+
+### Media Queries
+
+Easily add responsive styles:
+
+```typescript
+const responsiveStyles = css({
+  fontSize: '14px',
+  '@media (min-width: 768px)': {
+    fontSize: '18px',
+  },
+});
+```
+
+### Keyframes
+
+Define and use animations:
+
+```typescript
+const animationStyles = css({
+  '@keyframes fadeIn': {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+  animation: 'fadeIn 2s ease-in-out',
+});
+```
+
+### Global Styles
+
+Apply global styles effortlessly:
+
+```typescript
+const globalStyles = css({
+  '@global': {
+    body: {
+      margin: 0,
+      fontFamily: 'Arial, sans-serif',
+    },
+    a: {
+      color: 'blue',
+      textDecoration: 'none',
+    },
+  },
+});
+```
+
+---
+
+## TypeScript Integration
+
+`oncss` provides full TypeScript support, allowing you to define types for your CSS properties and options.
+
+### Defining CSS Properties
+
+You can define the types for your CSS properties using the `CSSProps` type:
+
+```typescript
+import { CSSProps } from 'oncss';
+
+interface MyAliases {
+  customColor?: string;
+}
+
+const styles: CSSProps<MyAliases, 'sm' | 'md' | 'lg'> = {
+  backgroundColor: 'blue',
+  customColor: 'red',
+  '@media (min-width: 768px)': {
+    backgroundColor: 'green',
+  },
+};
+```
+
+### Using Options with Types
+
+You can also define types for the options object:
+
+```typescript
+import { CSSOptionProps } from 'oncss';
+
+const options: CSSOptionProps<MyAliases, 'sm' | 'md' | 'lg'> = {
+  classPrefix: 'myprefix',
+  breakpoints: {
+    sm: 480,
+    md: 768,
+    lg: 1024,
+  },
+  aliases: {
+    customColor: (prop, value) => ({ color: value }),
+  },
+};
+
+const styles = css({
+  fontSize: 16,
+  padding: 10,
+}, options);
+```
+
+---
+
+## Conclusion
+
+`oncss` simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.
+
+## Author
+
+<table>
+  <tr>
+    <td>
+      <img src="https://raw.githubusercontent.com/devnax/devnax/main/me-circle-200.png" alt="devnax" width="100" height="100">
+    </td>
+    <td>
+      <strong>Naxrul Ahmed</strong><br>
+      <a href="https://github.com/devnax">GitHub Profile</a><br>
+      <a href="https://www.npmjs.com/~devnax">npm Profile</a><br>
+      <a href="https://github.com/devnax/open-source">Open Source Projects</a>
+    </td>
+  </tr>
+</table>
+
+<h2>⚡️ Where to find me</h2>
+
+<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>
+<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>
+<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>
+<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>
+<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

@@ -0,0 +1,57 @@
+import * as CSS from 'csstype';
+type CSSProperties = CSS.Properties<number | string>;
+type CSSNestedSelectors<Aliases, BreakpointKeys extends string> = {
+    [key: `& ${string}`]: CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
+};
+type MediaCSS<Aliases, BreakpointKeys extends string> = {
+    [key: `@media ${string}`]: CSSProps<Aliases, BreakpointKeys>;
+};
+type KeyframesCSS<Aliases> = {
+    [key: `@keyframes ${string}`]: {
+        from?: CSSValueWithoutBreakpoint<Aliases>;
+        to?: CSSValueWithoutBreakpoint<Aliases>;
+        [key: `${string}%`]: CSSValueWithoutBreakpoint<Aliases>;
+    };
+};
+type GlobalCSS<Aliases, BreakpointKeys extends string> = {
+    '@global'?: {
+        [key: string]: CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
+    };
+};
+export type BreakpointTypes<BreakpointKeys extends string, ValueTypes> = {
+    [key in number | BreakpointKeys]?: ValueTypes;
+};
+export type CSSValueWithoutBreakpoint<Aliases> = {
+    [Property in keyof (CSSProperties & Aliases)]?: (CSSProperties & Aliases)[Property];
+};
+type CSSValue<Aliases, BreakpointKeys extends string> = {
+    [Property in keyof (CSSProperties & Aliases)]?: (CSSProperties & Aliases)[Property] | BreakpointTypes<BreakpointKeys, (CSSProperties & Aliases)[Property]>;
+};
+export type CSSPropsWithoutGlobal<Aliases, BreakpointKeys extends string> = CSSValue<Aliases, BreakpointKeys> | KeyframesCSS<Aliases> | MediaCSS<Aliases, BreakpointKeys> | CSSNestedSelectors<Aliases, BreakpointKeys>;
+export type CSSProps<Aliases, BreakpointKeys extends string> = GlobalCSS<Aliases, BreakpointKeys> | CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
+export type AliasFn<Aliases> = (prop: string, value: string | number) => CSSValueWithoutBreakpoint<Aliases>;
+export interface CSSOptionProps<Aliases, BreakpointKeys extends string> {
+    classPrefix?: string;
+    breakpoints?: {
+        [key in BreakpointKeys]: number;
+    };
+    aliases?: {
+        [key in keyof Aliases]: AliasFn<Aliases>;
+    };
+    injectStyle?: boolean;
+    skipProps?: (prop: string, value: string | number) => boolean;
+    getValue?: (value: string | number, prop: string, css: CSSProps<Aliases, BreakpointKeys>) => (string | number);
+    getProps?: (prop: string, value: string | number, css: CSSProps<Aliases, BreakpointKeys>) => CSSProps<Aliases, BreakpointKeys> | void;
+}
+export type CSSFactoryType = {
+    css: string;
+    cachekey: string;
+    classname: string;
+    cssraw: CSSProps<any, any>;
+    cache: boolean;
+    skiped: string[];
+    getStyleTag: () => HTMLStyleElement | null;
+    deleteStyle: () => void;
+    toString: () => string;
+};
+export {};

package/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}