{"id":13450625,"url":"https://github.com/danieldelcore/trousers","last_synced_at":"2025-04-05T05:02:50.975Z","repository":{"id":39614298,"uuid":"168661910","full_name":"danieldelcore/trousers","owner":"danieldelcore","description":"hooks-first CSS-in-JS library, focused on semantics and runtime performance","archived":false,"fork":false,"pushed_at":"2023-03-05T00:47:26.000Z","size":5010,"stargazers_count":302,"open_issues_count":17,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-20T01:08:50.467Z","etag":null,"topics":["css","css-in-js","hooks","react","ssr","stylesheet"],"latest_commit_sha":null,"homepage":"https://danieldelcore.github.io/trousers/","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/danieldelcore.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}},"created_at":"2019-02-01T07:53:14.000Z","updated_at":"2024-08-07T16:47:42.000Z","dependencies_parsed_at":"2024-01-07T11:10:49.034Z","dependency_job_id":"f741ac97-4c0f-4e01-90c5-4066038e5193","html_url":"https://github.com/danieldelcore/trousers","commit_stats":{"total_commits":226,"total_committers":6,"mean_commits":"37.666666666666664","dds":"0.053097345132743334","last_synced_commit":"b3e0e7707d1643424b4ab67c314e11b205edb1cb"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldelcore%2Ftrousers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldelcore%2Ftrousers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldelcore%2Ftrousers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldelcore%2Ftrousers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danieldelcore","download_url":"https://codeload.github.com/danieldelcore/trousers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289409,"owners_count":20914464,"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","hooks","react","ssr","stylesheet"],"created_at":"2024-07-31T07:00:36.787Z","updated_at":"2025-04-05T05:02:50.960Z","avatar_url":"https://github.com/danieldelcore.png","language":"TypeScript","funding_links":[],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" height=\"300\" src=\"assets/trousers-logo.png\" alt=\"Trousers, a little library for CSS-in-JS, without the mess\"\u003e\n\u003c/p\u003e\n\n# Trousers 👖\n\n[![min](https://img.shields.io/bundlephobia/min/trousers.svg)](https://www.npmjs.com/package/trousers)\n[![npm](https://img.shields.io/npm/v/trousers.svg)](https://www.npmjs.com/package/trousers)\n[![Downloads per month](https://img.shields.io/npm/dm/trousers.svg)](https://www.npmjs.com/package/trousers)\n\nReact components are more stylish with Trousers!\n\n[Try it here](https://danieldelcore.github.io/trousers/)\n\nTrousers is a CSS-in-JS library designed to help developers author React apps with performant and semantic CSS. Trousers encourages semantic organization of styles without inadvertently increasing the runtime implications often associated with CSS-in-JS libraries.\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Trousers 👖](#trousers-)\n  - [Table of Contents](#table-of-contents)\n  - [Get started](#get-started)\n  - [Features](#features)\n  - [Core concepts](#core-concepts)\n    - [Modifiers](#modifiers)\n    - [Pseudo states](#pseudo-states)\n    - [Media queries](#media-queries)\n    - [Keyframe animations](#keyframe-animations)\n    - [Theming](#theming)\n    - [Globals](#globals)\n    - [CSS prop](#css-prop)\n    - [Performance](#performance)\n    - [Multi-package architecture](#multi-package-architecture)\n  - [Motivation](#motivation)\n  - [API Reference](#api-reference)\n  - [Built with](#built-with)\n  - [Inspired by](#inspired-by)\n\n\u003c!-- tocstop --\u003e\n\n## Get started\n\nBasic usage: `yarn add trousers` or `npm install trousers`\n\nRecommended for performance: `yarn add @trousers/macro` or `npm install @trousers/macro`\n\n## Features\n\n-   Lightweight\n-   Zero-config SSR\n-   Composable\n-   Modifiers (aka variants)\n-   Globals\n-   Theming\n\n## Core concepts\n\n### Modifiers\n\n```jsx\nimport { css } from 'trousers';\n\nconst styles = css({\n    background: 'grey',\n    color: 'black',\n}).modifier('primary', {\n    background: 'red',\n    color: 'white',\n});\n```\n\n### Pseudo states\n\n```jsx\nimport { css } from 'trousers';\n\nconst styles = css({\n    backgroundColor: 'red',\n    color: 'white',\n\n    ':hover': {\n        backgroundColor: 'blue',\n    },\n    ':active': {\n        backgroundColor: 'green',\n    },\n});\n```\n\n### Media queries\n\n```jsx\nimport { css } from 'trousers';\n\nconst styles = css({\n    backgroundColor: 'red',\n    color: 'white',\n\n    '@media screen and (max-width: 992px)': {\n        '\u0026': {\n            background: 'violet',\n        },\n    },\n});\n```\n\n### Keyframe animations\n\n```jsx\nimport { css } from 'trousers';\n\nconst styles = css({\n    backgroundColor: 'red',\n    color: 'white',\n    animation: 'moveitmoveit 5s infinite',\n    '@keyframes moveitmoveit': {\n        from: { top: '0px' },\n        to: { top: '200px' },\n    },\n});\n```\n\n### Theming\n\n```jsx\nimport { css } from 'trousers';\n\nconst styles = css('MyElement', { color: 'var(--primary-color)' })\n    .modifier('Primary', { color: 'var(--secondary-color)' })\n    .theme({\n        primaryColor: 'red',\n        secondaryColor: 'blue',\n    });\n```\n\n### Globals\n\nEvery app needs _some_ form of global styling in order to import fonts or reset native styling, for example using [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) would be quite challenging to use without access to globals.\n\nThis is where the `css.global` function can help.\n\n```jsx\n/** @jsx jsx */\nimport { css, jsx } from 'trousers';\n\nconst globalStyles = css({}).global({\n    '*': {\n        boxSizing: 'border-box';\n    }\n});\n\nconst App = () =\u003e (\n    \u003cdiv css={globalStyles}\u003e\n        \u003ch1\u003eWelcome to my website!\u003c/h1\u003e\n    \u003c/div\u003e\n);\n```\n\n### CSS prop\n\nTrousers supports a css prop, similar to that of [emotion](https://emotion.sh/docs/css-prop) and [styled-components](https://styled-components.com/docs/api#css-prop)!\n\nJust remember to import `jsx` and set it as the pragma at the top of the file.\n\n```jsx\n/** @jsx jsx */\nimport { jsx, css } from 'trousers';\n\nconst Button = ({ children }) =\u003e (\n    \u003cbutton\n        css={css({\n            backgroundColor: 'red',\n            color: 'white',\n        })}\n    \u003e\n        {children}\n    \u003c/button\u003e\n);\n```\n\n### Performance\n\nTrousers in it's default state is a run-time library, even some CSS-in-JS libraries that boast near-zero runtime have hundreds of lines of code to execute before they mount a style block to the page. Trousers is no different, that's why **we provide and recommend using our [babel macro](https://github.com/kentcdodds/babel-plugin-macros): [`@trousers/macro`](packages/macro)**.\n\n[`@trousers/macro`](packages/macro) is the most performant version of Trousers! It drastically reduces the runtime implications of the library by offloading the heavy style processing logic to build-time where possible! Namespacing, prefixing and processing are all handled by the macro at build time, leaving us with simply mounting and toggling classes 🎉.\n\nFor more information see: [`@trousers/macro`](packages/macro)\n\n### Multi-package architecture\n\nTrousers is based on a monorepo architecture, meaning that the internals of the repo have been decomposed into a group of smaller stand-alone packages. Doing this will reduce your bundlesizes and tailor (lol) Trousers to suit your needs.\n\nIf you're looking to use Trousers for the first time, you'll likely want the [`trousers`](packages/trousers) package.\nIf run-time is your concern, you want the most performant version of the library, consider using [`@trousers/macro`](packages/macro).\nIf you're feeling adventurous and want to use the Trousers to create your own CSS-in-JS library or even take it in your own direction, use [`@trousers/core`](packages/core).\n\n## Motivation\n\nTrousers discourages the use of dynamic expressions in styles that implicitly increase the runtime implications of your application. Instead, it encourages the use of modifiers (aka variants) to toggle blocks of styles.\n\nYou might have seen this pattern emerging in some usages of CSS-in-JS:\n\n```js\nstyled.button`\n background: ${props =\u003e (props.primary ? 'red' : 'grey')}\n color: ${props =\u003e (props.primary ? 'white' : 'black')};\n font-size: 1em;\n margin: 1em;\n`;\n```\n\nWhat's happening here is that we're calculating the two properties individually, with runtime logic. This is ok for this small usage, but you can probably see how quickly this will get complicated as new variants are added over time. Not to meantion that for every permutation of these properties a new class will be calculated and mounted to the page.\n\nTrousers discourages dynamic interpolations like this and instead provides modifiers to help you fall into the right patterns. Only one class will be calculated and mounted per modifier and they're structured to be easier reason about at a glance.\n\n```jsx\nconst styles = css({\n    background: 'grey',\n    color: 'black',\n    fontSize: '1em',\n    margin: '1em',\n}).modifier('primary', {\n    background: 'red',\n    color: 'white',\n});\n```\n\nWith this, you can now clearly see that this style block has two different variants 'default' and 'primary', which will only ever process and mount 2 classes to the page, it's clear what properties are applied to which scenarios when.\n\nFor a more in depth explanation read my motivation blog post: [CSS-in-JS: What happened to readability](https://danieldelcore.medium.com/css-in-js-what-happened-to-readability-11fd43552c35)\n\n## API Reference\n\nFor API documentation, please refer to the relevant package README.\n\n-   [`trousers`](packages/trousers): Is the base packages which re-exports all of the modules in the sub-packages\n-   [`@trousers/macro`](packages/macro): **(Recommended)** Babel macro that moves 99% of Trousers' run-time logic to build-time!\n-   [`@trousers/core`](packages/core): Holds all of the underlying logic of trousers, including the css collector.\n-   [`@trousers/react`](packages/react): React implementation of Trousers\n-   [`@trousers/styled`](packages/styled): Styled Components like API\n-   [`@trousers/sheet`](packages/sheet): Mount styles via the CSSStyleSheet API (CSSOM wrapper)\n-   [`@trousers/hash`](packages/hash): A tiny hashing function\n\n## Built with\n\n-   [changesets 🦋](https://github.com/atlassian/changesets)\n-   [preconstruct 🎁](https://github.com/danieldelcore/trousers)\n-   [manypkg ☔️](https://github.com/Thinkmill/manypkg)\n\n## Inspired by\n\nPlease do yourself a favour and checkout these fantastic libraries:\n\n-   [styled-components 💅](https://styled-components.com/)\n-   [emotion 👩‍🎤](https://emotion.sh/)\n-   [compiled](https://compiledcssinjs.com/)\n-   [stitches](https://stitches.dev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldelcore%2Ftrousers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanieldelcore%2Ftrousers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldelcore%2Ftrousers/lists"}