{"id":13394563,"url":"https://github.com/cxs-css/cxs","last_synced_at":"2025-05-16T09:03:43.239Z","repository":{"id":38848541,"uuid":"62193491","full_name":"cxs-css/cxs","owner":"cxs-css","description":"fast af css-in-js in 0.7kb","archived":false,"fork":false,"pushed_at":"2022-12-08T17:15:43.000Z","size":1399,"stargazers_count":1196,"open_issues_count":44,"forks_count":47,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-02T12:43:27.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/cxs-css.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-29T03:44:29.000Z","updated_at":"2025-03-31T05:21:06.000Z","dependencies_parsed_at":"2023-01-25T15:00:56.140Z","dependency_job_id":null,"html_url":"https://github.com/cxs-css/cxs","commit_stats":null,"previous_names":["jxnblk/cxs"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cxs-css%2Fcxs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cxs-css%2Fcxs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cxs-css%2Fcxs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cxs-css%2Fcxs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cxs-css","download_url":"https://codeload.github.com/cxs-css/cxs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253356253,"owners_count":21895670,"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":[],"created_at":"2024-07-30T17:01:23.896Z","updated_at":"2025-05-16T09:03:43.213Z","avatar_url":"https://github.com/cxs-css.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# cxs\n\nfast af css-in-js in 0.7kb\n\n[![Build Status][b]](https://travis-ci.org/cxs-css/cxs)\n[![Coverage][cov]](https://codecov.io/github/cxs-css/cxs)\n[![js-standard-style][std]](http://standardjs.com/)\n[![0.7kb gzip][kb]](https://github.com/siddharthkp/bundlesize)\n\n[b]: https://img.shields.io/travis/jxnblk/cxs/master.svg?style=flat-square\n[std]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[kb]: https://img.shields.io/badge/gzip-0.7%20kb-brightgreen.svg?style=flat-square\n[cov]: https://img.shields.io/codecov/c/github/jxnblk/cxs.svg?style=flat-square\n\n```js\nconst className = cxs({ color: 'tomato' })\n```\n\ncxs is a minimal css-in-js solution that uses an atomic css approach to maximize performance and deduplication\n\n## Features\n\n- 0.7 KB\n- Zero dependencies\n- High performance\n- Style encapsulation\n- Deduplicates repeated styles\n- Dead-code elimination\n- Framework independent\n- Media queries\n- Pseudoclasses\n- Nesting\n- No CSS files\n- No tagged template literals\n- Optional [React component](#react-components) API\n\n\n## Install\n\n```sh\nnpm install cxs\n```\n\n## Usage\n\ncxs works with any framework, but this example uses React for demonstration purposes.\n\n```js\nimport React from 'react'\nimport cxs from 'cxs'\n\nconst Box = (props) =\u003e {\n  return (\n    \u003cdiv {...props} className={className} /\u003e\n  )\n}\n\nconst className = cxs({\n  padding: '32px',\n  backgroundColor: 'tomato'\n})\n\nexport default Box\n```\n\n### Pseudoclasses\n\n```js\nconst className = cxs({\n  color: 'tomato',\n  ':hover': {\n    color: 'black'\n  }\n})\n```\n\n### Media Queries\n\n```js\nconst className = cxs({\n  fontSize: '32px',\n  '@media screen and (min-width: 40em)': {\n    fontSize: '48px'\n  }\n})\n```\n\n### Child Selectors\n\n```js\nconst className = cxs({\n  color: 'black',\n  ' \u003e a': {\n    color: 'tomato'\n  }\n})\n```\n\n\n### Static/Server-Side Rendering\n\nFor Node.js environments, use the `css()` method to return the static CSS string *after* rendering a view.\n\n```js\nimport React from 'react'\nimport ReactDOMServer from 'react-dom/server'\nimport cxs from 'cxs'\nimport App from './App'\n\nconst html = ReactDOMServer.renderToString(\u003cApp /\u003e)\nconst css = cxs.css()\n\nconst doc = `\u003c!DOCTYPE html\u003e\n\u003cstyle\u003e${css}\u003c/style\u003e\n${html}\n`\n\n// Reset the cache for the next render\ncxs.reset()\n```\n\nNote: cxs does not currently have a mechanism for rehydrating styles on the client, so use with caution in universal JavaScript applications.\n\n\n## React Components\n\ncxs also has an alternative higher order component API for creating styled React components, similar to the [styled-components][sc] API.\n\n```js\nimport cxs from 'cxs/component'\n\nconst Heading = cxs('h1')({\n  margin: 0,\n  fontSize: '32px',\n  lineHeight: 1.25\n})\n```\n\n### Extending components\n\nTo extend a cxs component, pass it to the component creator function.\n\n```js\nconst Button = cxs('button')({\n  color: 'white',\n  backgroundColor: 'blue'\n})\n\nconst TomatoButton = cxs(Button)({\n  backgroundColor: 'tomato'\n})\n```\n\n### Other components\n\nAny component can be passed to cxs to add styles.\n\n```js\nimport { Link } from 'react-router'\n\nconst MyLink = cxs(Link)({\n  color: 'tomato'\n})\n```\n\nNote: components must accept `className` as a prop to work with cxs.\n\n\n### Functional styles\n\ncxs components can also handle dynamic styling based on props by passing a function as an argument\n\n```js\nconst Heading = cxs('h1')(props =\u003e ({\n  color: props.color\n}))\n```\n\n#### Removing style props\n\nTo remove style props from the rendered HTML element,\nuse the [`prop-types`][pt] package to define `propTypes` on a component.\ncxs/component will remove any prop that matches a key from the `propTypes` object.\n\n```js\nimport cxs from 'cxs/component'\nimport PropTypes from 'prop-types'\n\nconst Heading = cxs('h2')(props =\u003e ({\n  fontSize: props.big ? '48px' : '32px'\n}))\n\nHeading.propTypes = {\n  big: PropTypes.bool\n}\n```\n\n### styled-system\n\nStyle utility functions, like those in [styled-system][s2], can be used with cxs/component.\n\n```js\nimport cxs from 'cxs/component'\nimport {\n  space,\n  color\n} from 'styled-system'\n\nconst Heading = cxs('h2')(space, color)\n```\n\n### Theming\n\nTheming is supported with the `\u003cThemeProvider\u003e` component.\n\n```jsx\nimport React from 'react'\nimport ThemeProvider from 'cxs/ThemeProvider'\nimport theme from './theme'\n\nconst App = props =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cHeading\u003e\n      Hello\n    \u003c/Heading\u003e\n  \u003c/ThemeProvider\u003e\n)\n```\n\n```jsx\nimport cxs from 'cxs/component'\n\nconst Heading = cxs('h2')(props =\u003e ({\n  fontSize: props.theme.fontSizes[4] + 'px',\n  color: props.theme.blue\n}))\n```\n\n## API\n\n### `cxs(...styles)`\n\nAccepts styles objects or functions that return style objects and returns a className string.\n\n### `cxs.css()`\n\nReturns the rendered CSS string for static and server-side rendering.\n\n### `cxs.reset()`\n\nResets the cache for server-side rendering\n\n### `cxs.prefix(val)`\n\nUpdates the default class name prefix with the value passed to this function.\n\n### `cxs/component`\n\nA [styled-components][sc]-like API for creating React components with cxs.\n\n---\n\n### Vendor prefixes\n\ncxs **does not** handle vendor prefixing to keep the module size at a minimum.\n\n### Previous Versions\n\nFor previous versions of cxs, see the [v3 branch][v3] or [v4 branch][v4]\n\n[sc]: https://www.styled-components.com (styled-components)\n[pt]: https://www.npmjs.com/package/prop-types\n\n[s2]: https://github.com/jxnblk/styled-system\n[v3]: https://github.com/cxs-css/cxs/tree/v3\n[v4]: https://github.com/cxs-css/cxs/tree/v4\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcxs-css%2Fcxs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcxs-css%2Fcxs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcxs-css%2Fcxs/lists"}