{"id":24961753,"url":"https://github.com/yukukotani/just-styled","last_synced_at":"2025-04-09T09:07:16.553Z","repository":{"id":274559316,"uuid":"872264539","full_name":"yukukotani/just-styled","owner":"yukukotani","description":"A dead simple CSS-in-JS for React 19","archived":false,"fork":false,"pushed_at":"2025-01-28T02:02:56.000Z","size":130,"stargazers_count":93,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-02T06:09:51.826Z","etag":null,"topics":["css-in-js","design-system","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yukukotani.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}},"created_at":"2024-10-14T06:18:59.000Z","updated_at":"2025-01-30T14:17:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"3fe573d3-c31a-4046-b9c9-917d05de51c7","html_url":"https://github.com/yukukotani/just-styled","commit_stats":null,"previous_names":["yukukotani/just-styled"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Fjust-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Fjust-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Fjust-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukukotani%2Fjust-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yukukotani","download_url":"https://codeload.github.com/yukukotani/just-styled/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008631,"owners_count":21032556,"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-in-js","design-system","react","typescript"],"created_at":"2025-02-03T08:56:26.329Z","updated_at":"2025-04-09T09:07:16.533Z","avatar_url":"https://github.com/yukukotani.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# just-styled\n\nA dead simple CSS-in-JS library for React 19 or higher.\n\n## Features\n\n- **Familiar API**: Both styled-components-like Styled Function and Style Prop are supported\n- **Typed Theme**: Auto-completes your design token\n- **RSC Support**: It just works. Nothing bothers you\n- **No Build Step**: No need to set up build configuration\n- **Small Runtime:** It's 1.8 kb minified \u0026 gzipped\n- **Atomic CSS**: Generates optimized stylesheet to keep your distribution small\n\n## Installation\n\n\u003e [!IMPORTANT]\n\u003e just-styled requires React 19 since it's based on [React 19's stylesheet support](https://react.dev/blog/2024/04/25/react-19#support-for-stylesheets). You can try it on [Next.js 15 RC](https://nextjs.org/blog/next-15-rc2) for now.\n\n```bash\nnpm install just-styled\n```\n\n## Usage\n\n### Styled Function\n\nCreates your component with `styled` function.\n\n```tsx\nimport { styled } from \"just-styled\";\n\nconst StyledBox = styled(\"div\", {\n  fontSize: \"20px\",\n  backgroundColor: \"gray\",\n});\n\n\u003cStyledBox\u003eThe background is gray\u003c/StyledBox\u003e;\n```\n\n### Style Prop\n\nDeclares inline style with `style` prop.\n\n```tsx\n\u003cStyledBox style={{ color: \"green\" }}\u003eThe text color is green\u003c/StyledBox\u003e\n```\n\n### Box Component\n\nWe also have the built-in Box component as an equivalent of div.\n\n```tsx\nimport { Box } from \"just-styled\";\n\n\u003cBox style={{ fontSize = \"100px\" }}\u003eBig text\u003c/Box\u003e;\n```\n\nThis is just a syntax sugar for the code below.\n\n```tsx\nconst Box = styled(\"div\", {});\n```\n\n### Nested Styles\n\nYou can nest styles with selectors such as pseudo classes.\n\n```tsx\nconst StyledBox = styled(\"div\", {\n  backgroundColor: \"gray\",\n  \":hover\": {\n    backgroundColor: \"black\",\n  },\n});\n```\n\nAlso supports media queries and other at rules.\n\n```tsx\nconst StyledBox = styled(\"div\", {\n  backgroundColor: \"gray\",\n  \"@media (min-width: 768px)\": {\n    backgroundColor: \"black\",\n  },\n});\n```\n\n### Theme\n\nCreate a config file anywhere you want. Currently `colors`, `spaces`, `sizes`, `fontSizes`, and `radii` tokens are supported.\n\n```tsx\nimport { defineConfig } from \"just-styled\";\n\nexport const config = defineConfig({\n  tokens: {\n    colors: {\n      \"gray.200\": \"#eeeeee\",\n      \"gray.600\": \"#555555\",\n      \"red.200\": \"#EB7076\",\n      \"red.600\": \"#E02932\",\n      primary: \"$colors.red.600\",\n      bg: \"$colors.gray.200\",\n    },\n    spaces: {\n      sm: \"8px\",\n      md: \"16px\",\n    },\n  },\n});\n\n// This is required for auto-completion\ntype UserConfig = typeof config;\ndeclare module \"just-styled\" {\n  export interface JustStyledConfig extends UserConfig {}\n}\n```\n\nThen, put ThemeProvider at the top of your component tree (e.g., `layout.tsx` on Next.js).\n\n```tsx\n// import the config you defined\nimport { config } from \"./theme-config.ts\";\nimport { ThemeProvider } from \"just-styled\";\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003c{ children: React.ReactNode }\u003e) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cThemeProvider config={config}\u003e\n        \u003cbody\u003e{children}\u003c/body\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nNow, you can use your tokens with auto-completion.\n\n```tsx\nconst StyledBox = styled(\"div\", {\n  backgroundColor: \"$colors.bg\",\n  padding: \"$spaces.md\",\n});\n\n\u003cStyledBox style={{ color: \"$colors.red.600\" }}\u003eStyled!\u003c/StyledBox\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukukotani%2Fjust-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyukukotani%2Fjust-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukukotani%2Fjust-styled/lists"}