{"id":22535906,"url":"https://github.com/chrisfrank/nanostyled","last_synced_at":"2025-04-09T19:08:16.345Z","repository":{"id":57308024,"uuid":"148695247","full_name":"chrisfrank/nanostyled","owner":"chrisfrank","description":"A \u003c1kB library for styling React components as if with CSS-in-JS, without CSS-in-JS","archived":false,"fork":false,"pushed_at":"2019-04-21T18:42:39.000Z","size":309,"stargazers_count":104,"open_issues_count":0,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T19:07:51.382Z","etag":null,"topics":["atomic-css","css","css-in-js","functional-css","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisfrank.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-13T20:39:21.000Z","updated_at":"2024-01-03T14:15:59.000Z","dependencies_parsed_at":"2022-08-31T05:04:36.647Z","dependency_job_id":null,"html_url":"https://github.com/chrisfrank/nanostyled","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fnanostyled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fnanostyled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fnanostyled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisfrank%2Fnanostyled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisfrank","download_url":"https://codeload.github.com/chrisfrank/nanostyled/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248094994,"owners_count":21046770,"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":["atomic-css","css","css-in-js","functional-css","react","styled-components"],"created_at":"2024-12-07T10:09:01.343Z","updated_at":"2025-04-09T19:08:16.306Z","avatar_url":"https://github.com/chrisfrank.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Nanostyled\n\nNanostyled is a tiny library (\u003c 1 Kb) for building styled UI elements in React\nand Preact.\n\nLike a CSS-in-JS library, nanostyled encapsulates complex styles into simple,\ntweakable components:\n\n```jsx\n\u003cButton\u003eA nice-looking button\u003c/Button\u003e\n\u003cButton color=\"blue\"\u003eA nice-looking button that is blue\u003c/Button\u003e\n```\n\nUnlike a CSS-in-JS library, nanostyled doesn't parse CSS in JS, which makes your\nbundle smaller, your components faster, and your server-side-rendering a breeze.\n\n|            | Low overhead | Props-controlled, component-based API | Zero-config SSR |\n| ---------- | ------------ | ------------------------------------- | --------------- |\n| nanostyled | ✅           | ✅                                    | ✅              |\n| CSS-in-JS  | ❌           | ✅                                    | ❌              |\n| Plain CSS  | ✅           | ❌                                    | ✅              |\n\n---\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n* [Install](#install)\n* [Use](#use)\n  * [A nanostyled Button](#a-nanostyled-button)\n  * [A more flexible Button](#a-more-flexible-button)\n  * [A full starter UI Kit](#a-full-starter-ui-kit)\n* [Use in Preact and other React-like libraries](#use-in-preact-and-other-react-like-libraries)\n* [API Reference](#api-reference)\n* [Performance](#performance)\n* [Server-Side Rendering](#server-side-rendering)\n* [Related Projects](#related-projects)\n* [Browser Support](#browser-support)\n* [Contributing](#contributing)\n  * [Bugs](#bugs)\n  * [Pull requests](#pull-requests)\n* [License](#license)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n---\n\n## Install\n\n```\nnpm install nanostyled\n```\n\n## Use\n\nNanostyled works by mapping **style props** onto class names from your\n[atomic CSS framework][adam-wathan] of choice, like [Tachyons][tachyons] or\n[Tailwind][tailwind].\n\n### A nanostyled Button\n\n```jsx\nimport nanostyled from 'nanostyled';\n// This example uses CSS classes from Tachyons\nimport 'tachyons/css/tachyons.css';\n\n// A Button via three style props:\nconst Button = nanostyled('button', {\n  color: 'white',\n  bg: 'bg-blue',\n  base: 'fw7 br3 pa2 sans-serif f4 bn input-reset',\n});\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cButton\u003eBase Button\u003c/Button\u003e\n    \u003cButton bg=\"bg-yellow\"\u003eYellow Button\u003c/Button\u003e\n  \u003c/div\u003e\n);\n```\n\nRendering `\u003cApp /\u003e` produces this markup:\n\n```html\n\u003cdiv\u003e\n  \u003cbutton class=\"white bg-blue fw7 br3 pa2 sans-serif f4 bn input-reset\"\u003eBase Button\u003c/button\u003e\n  \u003cbutton class=\"white bg-yellow fw7 br3 pa2 sans-serif f4 bn input-reset\"\u003eYellow Button\u003c/button\u003e\n\u003c/div\u003e\n```\n\nWhen a nanostyled component renders, it consumes its style props and merges them\ninto an HTML class string, as per above.\n\nWhich style props to use is up to you. In the `\u003cButton\u003e` above, it would be\n\n- Easy to change text color via the `color` prop\n- Easy to change background color via the `bg` prop\n- Hard to change other styles without totally rewriting the `base` prop\n\n### A more flexible Button\n\nBy using more style props, we can make a more flexible button:\n\n```jsx\nimport nanostyled from 'nanostyled';\nimport 'tachyons/css/tachyons.css';\n\nconst FlexibleButton = nanostyled('button', {\n  color: 'white', // white text\n  bg: 'bg-blue', // blue background\n  weight: 'fw7', // bold font\n  radius: 'br3', // round corners\n  padding: 'pa2', // some padding\n  typeface: 'sans-serif', // sans-serif font\n  fontSize: 'f4', // font size #4 in the Tachyons font scale\n  base: 'bn input-reset', // remove border and appearance artifacts\n});\n```\n\nRendering a stock `\u003cFlexibleButton /\u003e` will produce the same markup as its\nsimpler relative. But it's much easier to render alternate styles:\n\n```jsx\n\u003cFlexibleButton bg=\"bg-light-green\" color=\"black\" weight=\"fw9\" radius=\"br4\"\u003e\n  Button with a green background, black text, heavier font, and rounder corners\n\u003c/FlexibleButton\u003e\n```\n\nWhen you need a variation that you didn't plan for in your style props, you can\nstill use the `className` prop:\n\n```jsx\n\u003cFlexibleButton className=\"dim pointer\"\u003e\n  A button that dims on hover and sets the cursor to 'pointer'\n\u003c/FlexibleButton\u003e\n```\n\n### A full starter UI Kit\n\nHere's a [proof-of-concept UI kit on CodeSandbox][codesandbox].\n\n## Use in Preact and other React-like libraries\n\nUnder the hood, nanostyled is built as a library-agnostic factory function.\nTo use it in Preact without a compatibility layer, import the factory directly:\n\n```javascript\nimport { h } from 'preact';\nimport nanoFactory from 'nanostyled/factory';\nconst nanostyled = nanoFactory(h);\n\nconst Button = nanostyled('button', {\n  bg: 'bg-blue',\n  color: 'white',\n});\n```\n\n## API Reference\n\n`nanostyled(tag, styleProps)`\n\nThe `nanostyled` function takes two arguments:\n\n1. tag (String) - the name of an HTML element\n2. styleProps (Object) - an object that maps component props to CSS class names\n\n```jsx\nconst Paragraph = nanostyled('p', {\n  font: 'serif',\n  size: 'f4',\n});\n```\n\n`nanostyled` returns a component, which will render styleProps into the\nHTML `class` attribute, and pass all other props directly to the rendered\nelement, _with one exception_:\n\nYou can use the special `as` prop to change the HTML element rendered by a\nnanostyled component. If, say, you've made a nanostyled `button`, but you want\nit to render as an `a` tag sometimes, do this:\n\n```jsx\nconst Button = nanostyled('button', { color: 'white', bg: 'black' });\n\n\u003cButton\u003eA button\u003c/Button\u003e\n\u003cButton as=\"a\"\u003eLooks like a button, is a link\u003c/Button\u003e\n```\n\n## Performance\n\nIn a rudimentary benchmark (`test/benchmark.js`), a nanostyled Button renders ~\n2x more quickly than a similar Button built with styled-components.\n\nIn addition to rendering components more quickly, nanostyled is also almost two\norders of magnitude smaller than styled-components over the wire:\n\n|                   | nanostyled | styled-components |\n| ----------------- | ---------- | ----------------- |\n| size (min + gzip) | 0.4 kB     | 15.3 kB           |\n| 3G download time  | 12ms       | 305ms             |\n\n## Server-Side Rendering\n\nWhen rendering on a server, just use nanostyled normally.\n\n## Related Projects\n\n- [Tachyons][tachyons]\n- [Tailwind][tailwind]\n- [Styled Components][styled-components]\n- [Tachyons Components](https://github.com/jxnblk/tachyons-components)\n\n## Browser Support\nNanostyled aims to run in any browser that implements ES5, including IE 9+.\nif you discover otherwise, please file an issue.\n\n## Contributing\n\n### Bugs\n\nPlease open [an issue](https://github.com/chrisfrank/nanostyled/issues) on\nGithub.\n\n### Pull requests\n\nPRs are welcome. Please include tests! See `test/nanostyled.test.js` for the\nformat to follow.\n\n## License\n\nMIT\n\n[styled-components]: https://www.styled-components.com/\n[adam-wathan]:\n  https://adamwathan.me/css-utility-classes-and-separation-of-concerns/\n[tachyons]: http://tachyons.io/\n[tailwind]: https://tailwindcss.com/\n[unpkg]: https://unpkg.com/\n[codesandbox]: https://codesandbox.io/s/3r8l4rr8p1\n[intro]: https://dev.to/chrisfrank/introducing-nanostyled-2p6k\n[basscss]: http://basscss.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisfrank%2Fnanostyled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisfrank%2Fnanostyled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisfrank%2Fnanostyled/lists"}