{"id":24511708,"url":"https://github.com/devnax/oncss","last_synced_at":"2025-05-12T22:16:16.049Z","repository":{"id":270574872,"uuid":"910795916","full_name":"devnax/oncss","owner":"devnax","description":"A CSS framework for modern web development.","archived":false,"fork":false,"pushed_at":"2025-05-06T09:52:40.000Z","size":195,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-12T22:16:09.476Z","etag":null,"topics":["css","css-in-js","frontend","oncss","styles"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/oncss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devnax.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-01T13:04:10.000Z","updated_at":"2025-05-06T11:49:22.000Z","dependencies_parsed_at":"2025-05-06T10:41:27.335Z","dependency_job_id":null,"html_url":"https://github.com/devnax/oncss","commit_stats":null,"previous_names":["devnax/oncss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Foncss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Foncss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Foncss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devnax%2Foncss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devnax","download_url":"https://codeload.github.com/devnax/oncss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253831010,"owners_count":21971008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","frontend","oncss","styles"],"created_at":"2025-01-22T00:40:41.029Z","updated_at":"2025-05-12T22:16:16.019Z","avatar_url":"https://github.com/devnax.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"120\" src=\"https://raw.githubusercontent.com/devnax/oncss/main/logo.png\" alt=\"ONCSS Logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eONCSS\u003c/h1\u003e\n\n`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.\n\n---\n\n## Installation\n\nInstall the `oncss` package via npm:\n\n```bash\nnpm install oncss\n```\n\nImport the `css` function in your project:\n\n```javascript\nimport css from 'oncss';\n```\n\n---\n\n## Core Concept: The `css` Function\n\nThe `css` function is the heart of `oncss`, designed to dynamically generate and inject CSS into your application. It supports:\n\n- **CSS Properties**: Use standard CSS properties and values.\n- **Nested Selectors**: Apply styles to child elements or states using `\u0026`.\n- **Media Queries**: Implement responsive designs with `@media` rules.\n- **Keyframes**: Create animations with `@keyframes`.\n- **Global Styles**: Apply styles globally with `@global`.\n- **Custom Breakpoints**: Define reusable breakpoints for responsiveness.\n- **Other At-Rules**: Utilize additional at-rules like `@container`, `@layer`, and `@supports`.\n\n### Basic Example\n\n```typescript\nconst buttonStyles = css({\n  backgroundColor: 'blue',\n  color: 'white',\n  padding: '10px 20px',\n  borderRadius: '5px',\n  '\u0026:hover': {\n    backgroundColor: 'darkblue',\n  },\n  '@media (min-width: 768px)': {\n    padding: '15px 30px',\n  },\n});\n\nconsole.log(buttonStyles);\n```\n\n---\n\n## Configuration Options\n\nThe `css` function can be customized through an options object:\n\n### Available Properties\n\n| Property      | Type       | Description                                                                                       |\n| ------------- | ---------- | ------------------------------------------------------------------------------------------------- |\n| `classPrefix` | `string`   | Adds a prefix to generated class names.                                                           |\n| `breakpoints` | `object`   | Custom breakpoints for responsive designs.                                                        |\n| `aliases`     | `object`   | Custom shorthand properties for CSS rules.                                                        |\n| `injectStyle` | `boolean`  | Controls whether styles are auto-injected.                                                        |\n| `skipProps`   | `function` | Filters out unwanted properties. Receives `prop`, `value`, and `dept` as arguments.               |\n| `getValue`    | `function` | Transforms property values dynamically. Receives `value`, `prop`, `css`, and `dept` as arguments. |\n| `getProps`    | `function` | Customizes specific property handling. Receives `prop`, `value`, `css`, and `dept` as arguments.  |\n\n### Example with Options\n\n```typescript\nconst styles = css({\n  fontSize: 16,\n  padding: 10,\n}, {\n  classPrefix: 'myprefix',\n  breakpoints: {\n    sm: 480,\n    md: 768,\n    lg: 1024,\n  },\n});\n```\n\n### Using Breakpoints\n\nYou can use the defined breakpoints in your styles to create responsive designs:\n\n```typescript\nconst responsiveStyles = css({\n  fontSize: 14,\n  padding: {\n    sm: 12,\n    lg: 24\n  },\n  \n}, {\n  breakpoints: {\n    sm: 480,\n    md: 768,\n    lg: 1024,\n  },\n});\n```\n\n---\n\n## React Integration\n\noncss integrates seamlessly with React. Simply pass the generated class name to your component.\n\n### React Example\n\n```typescript\nimport React from 'react';\nimport css from 'oncss';\n\nconst buttonStyle = css({\n  backgroundColor: 'green',\n  color: 'white',\n  padding: '10px 20px',\n  borderRadius: '8px',\n  '\u0026:hover': {\n    backgroundColor: 'darkgreen',\n  },\n});\n\nfunction Button() {\n  return \u003cbutton className={buttonStyle.toString()}\u003eClick Me\u003c/button\u003e;\n}\n\nexport default Button;\n```\n\n---\n\n## Advanced Features\n\n### Nested Selectors\n\nApply styles to child elements or pseudo-classes:\n\n```typescript\nconst cardStyles = css({\n  padding: '20px',\n  border: '1px solid #ccc',\n  '\u0026 h1': {\n    fontSize: '24px',\n    margin: 0,\n  },\n  '\u0026:hover': {\n    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',\n  },\n});\n```\n\n### Media Queries\n\nEasily add responsive styles:\n\n```typescript\nconst responsiveStyles = css({\n  fontSize: '14px',\n  '@media (min-width: 768px)': {\n    fontSize: '18px',\n  },\n});\n```\n\n### Keyframes\n\nDefine and use animations:\n\n```typescript\nconst animationStyles = css({\n  '@keyframes fadeIn': {\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n  },\n  animation: 'fadeIn 2s ease-in-out',\n});\n```\n\n### Global Styles\n\nApply global styles effortlessly:\n\n```typescript\nconst globalStyles = css({\n  '@global': {\n    body: {\n      margin: 0,\n      fontFamily: 'Arial, sans-serif',\n    },\n    a: {\n      color: 'blue',\n      textDecoration: 'none',\n    },\n  },\n});\n```\n\n---\n\n## Supported At-Rules\n\n`oncss` supports various CSS at-rules to enhance your styling capabilities. Here is a list of supported at-rules with descriptions:\n\n| At-Rule      | Description                                                                  |\n| ------------ | ---------------------------------------------------------------------------- |\n| `@media`     | Used for applying styles based on media queries for responsive design.       |\n| `@keyframes` | Defines animations that can be applied to elements.                          |\n| `@global`    | Applies styles globally across the entire application.                       |\n| `@container` | Used for container queries to apply styles based on container size.          |\n| `@layer`     | Defines style layers to control the order of style application.              |\n| `@supports`  | Applies styles based on the support of specific CSS features in the browser. |\n\n---\n\n## Server-Side Styling\n\n`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.\n\n### Example with React\n\nHere's an example of how to use `oncss` for server-side rendering with React:\n\n```tsx\nimport React from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport css, { CSSFactory } from 'oncss';\n\nconst buttonStyle = css({\n  backgroundColor: 'blue',\n  color: 'white',\n  padding: '10px 20px',\n  borderRadius: '5px',\n  '\u0026:hover': {\n    backgroundColor: 'darkblue',\n  },\n});\n\nfunction Button() {\n  return \u003cbutton className={buttonStyle}\u003eClick Me\u003c/button\u003e;\n}\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cButton /\u003e\n  \u003c/div\u003e\n);\n\n// Render the component to a string\nconst html = ReactDOMServer.renderToString(\u003cApp /\u003e);\n\nlet styles: any = Array.from(CSSFactory.values()).map((style) =\u003e {\n  return `\u003cstyle data-oncss=\"${style.classname}\"\u003e${style.css}\u003c/style\u003e`\n});\n\n// Inject the styles into the HTML\nconst fullHtml = `\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eSSR with oncss\u003c/title\u003e\n  ${styles}\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"root\"\u003e${html}\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n`;\n\nconsole.log(fullHtml);\n```\n\nIn 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.\n\n---\n\n## Utility Functions\n\n### CSSFactory\n\n`CSSFactory` is a global cache for storing generated CSS styles. It helps in reusing styles and avoiding redundant style generation.\n\n### formatCSSProp\n\n`formatCSSProp` is a utility function that converts camelCase CSS property names to kebab-case.\n\n```typescript\nimport { formatCSSProp } from 'oncss';\n\nconst formattedProp = formatCSSProp('backgroundColor');\nconsole.log(formattedProp); // 'background-color'\n```\n\n### formatCSSValue\n\n`formatCSSValue` is a utility function that formats CSS values, adding units like `px` where necessary.\n\n```typescript\nimport { formatCSSValue } from 'oncss';\n\nconst formattedValue = formatCSSValue('width', 100);\nconsole.log(formattedValue); // '100px'\n```\n\n---\n\n## TypeScript Integration\n\n`oncss` provides full TypeScript support, allowing you to define types for your CSS properties and options.\n\n### Defining CSS Properties\n\nYou can define the types for your CSS properties using the `CSSProps` type:\n\n```typescript\nimport { CSSProps } from 'oncss';\n\ninterface MyAliases {\n  customColor?: string;\n}\n\nconst styles: CSSProps\u003cMyAliases, 'sm' | 'md' | 'lg'\u003e = {\n  backgroundColor: 'blue',\n  customColor: 'red',\n  '@media (min-width: 768px)': {\n    backgroundColor: 'green',\n  },\n};\n```\n\n### Using Options with Types\n\nYou can also define types for the options object:\n\n```typescript\nimport { CSSOptionProps } from 'oncss';\n\nconst options: CSSOptionProps\u003cMyAliases, 'sm' | 'md' | 'lg'\u003e = {\n  classPrefix: 'myprefix',\n  breakpoints: {\n    sm: 480,\n    md: 768,\n    lg: 1024,\n  },\n  aliases: {\n    customColor: (value) =\u003e ({ color: value }),\n  },\n};\n\nconst styles = css({\n  fontSize: 16,\n  padding: 10,\n}, options);\n```\n\n---\n\n## Conclusion\n\n`oncss` simplifies styling for modern web applications. Its robust feature set, from responsive design to keyframe animations, makes it an invaluable tool for developers.\n\n## Author\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/devnax/devnax/main/me-circle-200.png\" alt=\"devnax\" width=\"100\" height=\"100\"\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cstrong\u003eNaxrul Ahmed\u003c/strong\u003e\u003cbr\u003e\n      \u003ca href=\"https://github.com/devnax\"\u003eGitHub Profile\u003c/a\u003e\u003cbr\u003e\n      \u003ca href=\"https://www.npmjs.com/~devnax\"\u003enpm Profile\u003c/a\u003e\u003cbr\u003e\n      \u003ca href=\"https://github.com/devnax/open-source\"\u003eOpen Source Projects\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ch2\u003e⚡️ Where to find me\u003c/h2\u003e\n\n\u003cp\u003e\u003ca target=\"_blank\" href=\"mailto:devnaxrul@gmail.com\" style=\"display: inline-block;\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Email-05122A?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\u0026color=orange\" alt=\"gmail\" /\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://twitter.com/devnaxx\" style=\"display: inline-block;\"\u003e\u003cimg src=\"https://img.shields.io/badge/twitter-x?style=for-the-badge\u0026logo=x\u0026logoColor=white\u0026color=%230f1419\" alt=\"twitter\" /\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://www.linkedin.com/in/devnax\" style=\"display: inline-block;\"\u003e\u003cimg src=\"https://img.shields.io/badge/linkedin-logo?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\u0026color=%230a77b6\" alt=\"linkedin\" /\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://www.facebook.com/devnax\" style=\"display: inline-block;\"\u003e\u003cimg src=\"https://img.shields.io/badge/facebook-logo?style=for-the-badge\u0026logo=facebook\u0026logoColor=white\u0026color=%230866ff\" alt=\"facebook\" /\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://www.instagram.com/devnaxx\" style=\"display: inline-block;\"\u003e\u003cimg src=\"https://img.shields.io/badge/instagram-logo?style=for-the-badge\u0026logo=instagram\u0026logoColor=white\u0026color=%23F35369\" alt=\"instagram\" /\u003e\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Foncss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevnax%2Foncss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevnax%2Foncss/lists"}