{"id":13850414,"url":"https://github.com/nyancss/nyancss","last_synced_at":"2025-04-05T16:06:57.091Z","repository":{"id":22030093,"uuid":"95018070","full_name":"nyancss/nyancss","owner":"nyancss","description":"🌈 Write plain CSS while reaping benefits of CSS-in-JS","archived":false,"fork":false,"pushed_at":"2023-01-04T06:37:12.000Z","size":1116,"stargazers_count":554,"open_issues_count":19,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T15:05:27.662Z","etag":null,"topics":["css","css-modules","preact","react","styled-components","webpack"],"latest_commit_sha":null,"homepage":"https://nyancss.com","language":"TypeScript","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/nyancss.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2017-06-21T15:20:57.000Z","updated_at":"2025-01-30T15:46:13.000Z","dependencies_parsed_at":"2023-01-11T21:27:11.523Z","dependency_job_id":null,"html_url":"https://github.com/nyancss/nyancss","commit_stats":null,"previous_names":["kossnocorp/decss"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nyancss%2Fnyancss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nyancss%2Fnyancss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nyancss%2Fnyancss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nyancss%2Fnyancss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nyancss","download_url":"https://codeload.github.com/nyancss/nyancss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361687,"owners_count":20926643,"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-modules","preact","react","styled-components","webpack"],"created_at":"2024-08-04T20:01:11.410Z","updated_at":"2025-04-05T16:06:57.059Z","avatar_url":"https://github.com/nyancss.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🌈 Nyan CSS\n\n**Best of both worlds**. Nyan CSS lets you write plain CSS\nwhile reaping benefits of CSS-in-JS.\n\n**Write a universal design system**. You can reuse the same code anywhere\nstarting from static HTML+CSS and ending with React and Vue.js without\nactually changing the CSS.\n\n**Minimalistic**. BEM-inspired [Nyan CSS convention](#convention) consists\njust of 3 rules but it as bulletproof as BEM.\n\n**Use modern CSS**. CoffeeScript long gone from the radars, yet we all loved it ;-)\nStick to the platform to ensure the longevity of your code.\n\n**[Skip to the convention](#convention)** | **[Join the community](https://spectrum.chat/nyancss)**\n\n## Installation\n\nSee [installation instructions for webpack](https://github.com/nyancss/nyancss-css-modules-loader#installation).\n\n## Demo\n\n### CSS\n\n```css\n.Header,\n.Text {\n  font-family: monospace;\n}\n\n.Header {\n  font-size: 2rem;\n}\n\n.Header-size-large {\n  font-size: 2.2rem;\n}\n\n.Text-italic {\n  font-style: italic;\n}\n```\n\n### React code\n\nSee other options:\n\n- [Plain HTML](#plain-html)\n- [Vue.js](#vuejs)\n- [Preact](#preact)\n- [Class names](#class-names)\n\n```jsx\nimport React from 'react'\nimport { Header, Text } from './style.css'\n\nfunction Announcement() {\n  return (\n    \u003c\u003e\n      \u003cHeader tag=\"h1\" size=\"large\"\u003e\n        Welcome Nyan CSS!\n      \u003c/Header\u003e\n      \u003cText tag=\"marquee\" italic\u003e\n        Please, welcome Nyan CSS!\n      \u003c/Text\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Result\n\n![A page in a browser with large \"Welcome Nyan CSS\" and moving italic \"Please, welcome Nyan CSS!\"](./docs/demo.gif)\n\n### Other options\n\n\u003cdetails open\u003e\u003csummary\u003eShow all options\u003c/summary\u003e\n\u003cp\u003e\n\n#### Plain HTML\n\n```html\n\u003ch1 class=\"Header Header-size-large\"\u003e\n  Welcome Nyan CSS!\n\u003c/h1\u003e\n\n\u003cmarquee class=\"Text Text-italic\"\u003e\n  Please, welcome Nyan CSS!\n\u003c/marquee\u003e\n```\n\n#### Vue.js\n\n```js\nimport Vue from 'vue'\nimport { Header, Text } from './style.css'\n\nconst Announcement = {\n  components: {\n    'custom-header': Header,\n    'custom-text': Text\n  },\n\n  template: `\n    \u003cmain\u003e\n      \u003ccustom-header tag='h1' size='large'\u003eWelcome Nyan CSS!!\u003c/custom-header\u003e\n      \u003ccustom-text tag='marquee' italic='true'\u003ePlease, welcome Nyan CSS!\u003c/custom-text\u003e\n    \u003c/main\u003e\n  `\n}\n```\n\n#### Preact\n\n```jsx\nimport { h } from 'preact'\nimport { Header, Text } from './style.css'\n\nfunction Announcement() {\n  return (\n    \u003c\u003e\n      \u003cHeader tag=\"h1\" size=\"large\"\u003e\n        Welcome Nyan CSS!\n      \u003c/Header\u003e\n      \u003cText tag=\"marquee\" italic\u003e\n        Please, welcome Nyan CSS!\n      \u003c/Text\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n#### Class names\n\n```js\nimport { Header, Text } from './style.css'\n\nfunction Announcement() {\n  return `\n\u003ch1 class='${Header({ size: 'large' })}'\u003eWelcome Nyan CSS!\u003c/h1\u003e\n\u003cmarquee class='${Text({\n    italic: true\n  })}'\u003ePlease, welcome Nyan CSS!\u003c/marquee\u003e\n`\n}\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Convention\n\n### Component\n\n`.Component` is a component class.\n\n_The name must be in ClassCase, e.g. `.FormInput` or `.UI`._\n\nIn this example, `.Button` represents `\u003cButton /\u003e`.\n\n```css\n.Button {\n  color: white;\n}\n```\n\n### Boolean prop\n\n`.Component-disabled` is a boolean prop class.\n\n_The name extension must be in camelCase, e.g. `.FormInput-autoFocus` or `.UI-dev`._\n\n```css\n.Button-disabled {\n  opacity: 0.5;\n}\n```\n\nIn the example, `.Button-disabled` is applied to the component when its `disabled` prop is truthy:\n\n```jsx\n\u003cButton tag=\"button\" disabled\u003e\n  Whatever\n\u003c/Button\u003e\n```\n\n### Enum prop\n\n`.ComponentName-color-gray` is an enum prop class.\n\n_The name extensions must be in camelCase, e.g. `.FormInput-borderColor-lightGray` or `.UI-env-dev`._\n\n```css\n.Button-color-red {\n  background: red;\n}\n\n.Button-color-green {\n  background: green;\n}\n```\n\n`.Button-color-red` is applied to the component when its `color` prop equals `\"red\"`:\n\n```jsx\n\u003cButton tag=\"button\" color=\"red\"\u003e\n  Click Me\n\u003c/Button\u003e\n```\n\n## Related packages\n\n- [@nyancss/css-modules-loader](https://github.com/nyancss/nyancss-css-modules-loader) - the webpack loader for CSS Modules.\n- [@nyancss/css-modules](https://github.com/nyancss/nyancss-css-modules) - the package used to convert CSS Modules to Nyan CSS.\n- [@nyancss/react](https://github.com/nyancss/nyancss-react) - the package used to convert Nyan CSS to React/Preact components.\n- [@nyancss/vue](https://github.com/nyancss/nyancss-vue) - the package used to convert Nyan CSS to Vue.js components.\n- [@nyancss/class-names](https://github.com/nyancss/nyancss-class-names) - the package used to convert Nyan CSS to class names functions.\n\n## Changelog\n\nSee [the changelog](./CHANGELOG.md).\n\n## License\n\n[MIT © Sasha Koss](https://kossnocorp.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnyancss%2Fnyancss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnyancss%2Fnyancss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnyancss%2Fnyancss/lists"}