{"id":28456271,"url":"https://github.com/mincho-js/mincho","last_synced_at":"2025-06-29T10:32:40.490Z","repository":{"id":205793930,"uuid":"715017063","full_name":"mincho-js/mincho","owner":"mincho-js","description":"Natural CSS in TypeScript","archived":false,"fork":false,"pushed_at":"2025-06-06T18:58:08.000Z","size":15236,"stargazers_count":51,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-06T23:07:34.449Z","etag":null,"topics":["css","css-in-js","css-in-ts","design-system","typescript","vanilla-extract"],"latest_commit_sha":null,"homepage":"","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/mincho-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["black7375"],"ko_fi":"black7375"}},"created_at":"2023-11-06T10:10:33.000Z","updated_at":"2025-06-06T18:58:09.000Z","dependencies_parsed_at":"2023-11-18T06:22:24.979Z","dependency_job_id":"dc4539d7-7510-4f21-aace-ebc35d86de1f","html_url":"https://github.com/mincho-js/mincho","commit_stats":null,"previous_names":["mincho-js/mincho"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/mincho-js/mincho","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mincho-js%2Fmincho","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mincho-js%2Fmincho/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mincho-js%2Fmincho/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mincho-js%2Fmincho/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mincho-js","download_url":"https://codeload.github.com/mincho-js/mincho/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mincho-js%2Fmincho/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262578314,"owners_count":23331603,"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","css-in-ts","design-system","typescript","vanilla-extract"],"created_at":"2025-06-06T23:07:32.002Z","updated_at":"2025-06-29T10:32:40.481Z","avatar_url":"https://github.com/mincho-js.png","language":"TypeScript","funding_links":["https://github.com/sponsors/black7375","https://ko-fi.com/black7375"],"categories":["TypeScript"],"sub_categories":[],"readme":"# mincho\nNatural CSS in TypeScript\n\n\u003e [!WARNING]\n\u003e This project is still in WIP, which means it is not ready for production.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/logo.png\" alt=\"logo\" width=\"300\" height=\"300\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://x.com/mincho_js\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/mincho_js?style=social\" alt=\"Twitter Follow\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- [Demo with StackBliz](https://stackblitz.com/~/github.com/black7375/mincho-example-stackblitz?file=src/App.css.ts)\n\n## Documentation\n\nSee [`@mincho-js/css`](./packages/css) README.\n\n## Motivation\n\n- [Rethinking CSS in JS](https://dev.to/black7375/rethinking-css-in-js-5dip)\n\nIt started with contemplation on approaches and management methods for CSS styling.\n\nMethodologies for CSS selectors can be largely divided into visual hierarchy and semantic hierarchy.\n\nThe visual hierarchy uses visual names like `.text-red { color: red; }`,  \nwhile the semantic hierarchy uses meaningful names like `.error { color: red; }`.\n\nDue to these characteristics, the methods of achieving goals also differ.  \nFor example, what if we need to create various designs with the same content, like [as CSS Zen Garden](https://csszengarden.com/pages/alldesigns/)?\n\nThe visual approach would keep the CSS fixed but change the HTML to achieve the goal,  \nwhile the semantic approach would keep the HTML the same but change the CSS to achieve the goal.\n\nAs a practical example of dealing with visual hierarchy, there's [Tailwind CSS](https://tailwindcss.com/), and for semantic hierarchy, there's [Stitches](https://stitches.dev/).  \nIf you look at Tailwind's [Text Color](https://tailwindcss.com/docs/text-color), you can see it's visually intuitive with classes like `text-black`, `text-white`.  \nStitches has invented an API called [Variants](https://stitches.dev/docs/variants), which aligns with the [original purpose](https://www.w3.org/QA/Tips/goodclassnames) of CSS classes as element identifiers[[1](https://www.w3.org/TR/html401/struct/global.html#h-7.5.2), [2](https://html.spec.whatwg.org/multipage/dom.html#classes)], and makes it very easy to apply [BEM](https://getbem.com/).\n\nI believed that these two approaches could reconcile and form a dialectical triad.\n\nJust like how the cool and refreshing taste of mint harmonizes with the sweetness of chocolate in mint chocolate!\n\n## Vision\n\n**\"Build your own design system\"** is our vision.  \nWe aim not only to integrate visual hierarchy and semantic hierarchy but also to improve the design process itself.\n\nThis is achieved under several principles:\n1. Be declarative rather than listing logic\n2. The API of each layer should be isomorphic\n3. Expression and content presuppose each other, so they should be considered\n4. If the hierarchy (perspective) is different, the law of excluded middle applies\n5. Consider both developers and designers\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/StyleStack.png\" alt=\"StyleStack\"\u003e\n\u003c/p\u003e\n\nOur CSS in JS framework will consist of 5 layers (Literal, Theme, Atomic, Variant, Styled Component).\n1. Literal: Provides various CSS-specific syntax of CSS preprocessors, considering the syntactic limitations of JavaScript\n2. Theme: Design token values and customization for Color, Typography, Spaces, etc.\n3. Atomic: Atomic styles that map to visual values\n4. Variants: Styles for reusable blocks\n5. Styled Component: Binding with JSX components\n\nThis can also be compared with State[[1](https://react-spectrum.adobe.com/architecture.html), [2](https://www.adebayosegun.com/blog/the-future-of-chakra-ui)]:\n1. JSX: Binds HTML and JS\n2. State hook: Logic independent of view platform\n3. Behavior hook: Handles events, accessibility, internationalization, etc. for platform APIs (DOM, React Native, etc.)\n4. Headless Component: Provides binding of JSX and hooks for use\n5. Component: Component blocks including design\n\nHowever, since we cannot provide all features from the beginning, we plan to achieve them step by step.\n1. Natural CSS in TypeScript: We will bind various CSS preprocessing features to be specialized for TypeScript.\n2. CSS in JS for Scalable: We will achieve the integration of visual hierarchy (AtomicCSS) and semantic hierarchy (Variants), which was the original goal.\n3. Build your own design system: It functions as a framework for creating design systems through design token management and Figma plugins, among others.\n\n## Features\n\nCurrently, most of the features are related to the CSS preprocessor.\n\n- [CSS Literals](https://github.com/mincho-js/working-group/blob/main/text/000-css-literals.md): Expressing more natural CSS in TypeScript.\n- [CSS Nesting](https://github.com/mincho-js/working-group/blob/main/text/001-css-nesting.md): Expressing better nesting and referencing.\n- [CSS Rules](https://github.com/mincho-js/working-group/blob/main/text/002-css-rules.md): Expressing static and dynamic styles for reusable blocks.\n\n## Contributing\n\nInterested in contributing?  \nWe have a [contributing guide](./CONTRIBUTING.md).\n\nIf you need support, ask in [discussions](https://github.com/mincho-js/mincho/discussions).  \nParticipation is open. Welcome! :hugs: :hugs:\n\n## Support\n\nDo you have any questions?  \nFeel free to ask questions in [discussions](https://github.com/mincho-js/mincho/discussions).\n\n## Inspired\n\nThis project was inspired by the syntax and functionality of various projects.  \nWithout them, this would not be possible!!\n\n### Special Thanks\n\n- [Vanilla Extract](https://vanilla-extract.style/): This project is based on vanilla extract. It has a very fancy API.\n- [Macaron](https://macaron.js.org/): It became the basis for co-location.\n- [Sass](https://sass-lang.com/): Inspired so many different features [variables](https://sass-lang.com/documentation/variables/), [nesting](https://sass-lang.com/documentation/style-rules/declarations/#nesting), [parent selector](https://sass-lang.com/documentation/style-rules/parent-selector/), [`@mixin`](https://sass-lang.com/documentation/at-rules/mixin/) ...etc\n\n### CSS Preprocessors or CSS Frameworks\n- [Less](https://lesscss.org/): Inspired by [merge properties](https://lesscss.org/features/#merge-feature).\n- [Stylus](https://stylus-lang.com): Inspired by  [property lookup](https://stylus-lang.com/docs/variables.html#property-lookup).\n- [Tailwind CSS](https://tailwindcss.com): Inspired by [important modifier](https://tailwindcss.com/docs/configuration#important-modifier).\n\n### CSS in JS\n- [Panda CSS](https://panda-css.com/): Inspired by the [conditional styles](https://panda-css.com/docs/concepts/conditional-styles).\n- [Griffel](https://griffel.js.org): Inspired by the [`@keyframes`(anonymous at-rules)](https://griffel.js.org/react/api/make-styles/#keyframes-animations).\n- [JSS](https://cssinjs.org): Inspired by the [reference a local rule ](https://cssinjs.org/jss-plugin-nested/?v=v10.10.0#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet).\n- [Stitches](https://stitches.dev/): Inspired by the [variants](https://stitches.dev/docs/variants).\n\n## License\n\nMIT License © 2023-Present [Minseok Youn](https://github.com/black7375)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmincho-js%2Fmincho","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmincho-js%2Fmincho","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmincho-js%2Fmincho/lists"}