{"id":21469308,"url":"https://github.com/kbismark/react-stylescope","last_synced_at":"2026-06-20T23:32:03.036Z","repository":{"id":221428056,"uuid":"754327771","full_name":"KBismark/react-stylescope","owner":"KBismark","description":"Component based styling for react. Write styles that are scoped to the components where they are created.","archived":false,"fork":false,"pushed_at":"2024-02-13T21:59:42.000Z","size":94,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-26T00:43:43.384Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/KBismark.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-02-07T20:44:06.000Z","updated_at":"2024-02-15T07:23:17.000Z","dependencies_parsed_at":"2025-03-17T06:42:11.933Z","dependency_job_id":null,"html_url":"https://github.com/KBismark/react-stylescope","commit_stats":null,"previous_names":["kbismark/react-scoped-styles","kbismark/react-stylescope"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KBismark/react-stylescope","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Freact-stylescope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Freact-stylescope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Freact-stylescope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Freact-stylescope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KBismark","download_url":"https://codeload.github.com/KBismark/react-stylescope/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBismark%2Freact-stylescope/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34589204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-23T09:15:21.536Z","updated_at":"2026-06-20T23:32:03.017Z","avatar_url":"https://github.com/KBismark.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-stylescope ![NPM Version](https://img.shields.io/npm/v/react-stylescope) ![GitHub License](https://img.shields.io/github/license/KBismark/react-stylescope)     \n\nComponent based styling for react. Write styles that are scoped to the components where they are created. \nA react implementation of the `@scope` CSS at-rule with support for all browsers that can run JavaScript. \n\nReact allows you to write components to define your app's UI. Every component have its own logic and state \nwhich allows for a dclarative and mantainable codebase. However, how do we style those components? What if \nthe are differnt teams working on different parts of the application? How do we solve the confusion of CSS \nname conflicts easily? Team A sets `.card{ background-color: white;}` Team B thinks `.card{ background-color: blue;}` \nworks perfectly for them. Both Teams push to production. What happens next? Disaster!!    \n\nThere are solutions like [styled-components](https://github.com/styled-components). Styled-components is one of the \ngood solutions out there to help write styles that are scoped or tied to components. However, wouldn't it be easier to write \nstyles with auto completions out of the box than writing as strings?   \n\nAll you will need to do is `npm install react-stylescope`   \n\nWrite your style-scopped component.    \n```tsx\nimport { useScopedStyleSheet, getScopedName, ScopedStyleSheets } from 'react-stylescope'\n\ntype CardProps = {backgroundColor: 'white'|'blue',caption:string}\n\nconst Card = ({backgroundColor, caption}: CardProps)=\u003e{\n    const scoped = getScopedName('Card')\n    const { keys, sheet } = useScopedStyleSheet({\n        '.card-container': {\n            width: '320px',\n            backgroundColor: `${backgroundColor}`\n        },\n        '.card-container img':{\n            lineHeight: 1.5,\n            display: 'block',\n            margin: '10px'\n        }\n    }, scoped)\n\n    return (\n        \u003cdiv className={keys['.card-container']} \u003e\n            \u003cdiv\u003e\u003cimg src='image.png' alt='Some text'  /\u003e\u003c/div\u003e\n            \u003cdiv\u003e{caption}\u003c/div\u003e\n            \u003cScopedStyleSheets styles={sheet} /\u003e\n        \u003c/div\u003e\n    )\n}\n\n```    \n\nNow from the above component, Team A and Team B can use their desired color for background without anymore worries. \n\nAnd, relax. The style object passed to `useScopedStyleSheet` does not get to the browser. Hurray! It's transpiled \ninto strings before the code gets served to the browser. You get what I'm heading to right? Write the styles with \ncode completions and it's converted into strings for you. No more pain writing css in strings.    \n\n## How to use react-stylescope\nAfter installation, if the project was created with `create-react-app` navigate to the project directory and run \n`npx stylescope --setup react`     \n\nElse, add the code below to the end of the `module.rules` array in the `webpack.config.js` and run `npx stylescope --setup device`    \n```js\n{\n    test:/(\\.ts|\\.js|\\.cjs|\\.mjs|\\.tsx|\\.jsx)$/,\n    exclude:/node_modules/,\n    loader: require.resolve('react-stylescope/dist/lib/loader.js')\n}\n\n```  \n## Using Vite?\nImport the `ScopedStyleVitePlugin` and add to the plugins array in the `vite.config.js` file \nand run `npx stylescope --setup device`  \n\n```js\nimport { ScopedStyleVitePlugin } from \"react-stylescope/dist/lib/vite-loader\";\n\n// A possible config may looked like this\nexport default defineConfig({\n  plugins: [react(), ScopedStyleVitePlugin()] // Added to the plugin array\n});\n\n```\n\nThat is all to configure.    \n\n## API documentation \n\n### getScopedName\n\u003e Returns a `scoped` name unique to the calling component. The value returned \n\u003e must be stored in a variable named `scoped`. **This is a requirement**  \n\u003e  \n\u003e **@param** `name` A unique name for the component. It may be the name of the component.    \n\u003e \n\u003e **Do not forget to name your variable `scoped`**\n\u003e \n\u003e ```js \n\u003e  const App = ()=\u003e{\n\u003e      // Prevent regeneration of new scoped name on re-render\n\u003e      const scoped = useMemo(()=\u003egetScopedName('App'),[]);\n\u003e      // rest of your code...\n\u003e }\n\u003e\n\u003e```\n\n### ScopedStyleSheets\n\u003e A component that renders a style element with your style sheet.       \n\u003e **@param** `props.styles` Pass the style sheet to the styles prop\n\n### useScopedStyleSheet \n\u003e Creates a css string from a React CSSProperties object. The style object passed to `useScopedStyleSheet` \n\u003e does not get to the browser. It's transpiled into strings before the code gets served to the browser. \n\u003e The function only returns a pre-computed object when your application runs in the browser.     \n\u003e All dirty works (conversion of the styles object to css string) is done before the code gets to the browser.    \n\u003e    \n\u003e **@param** `styleSheet` Styles object.    \n\u003e\n\u003e **@param** `marker` Pass the `scoped` variable here. Anything other than the varible named `scoped` won't work. \n\u003e \n\u003e ```jsx\n\u003e const App = ()=\u003e{\n\u003e      const [ theme, setTheme ] = useState('light')\n\u003e      const color = `${theme==='light'?'black':'white'}`;\n\u003e      // Prevent regeneration of new scoped name on re-render\n\u003e      const scoped = useMemo(()=\u003egetScopedName('App'),[]);\n\u003e      // Get keys and style sheet\n\u003e      const { keys, sheet } = useScopedStyleSheet({\n\u003e          '.container':{\n\u003e              opacity: 0.9,\n\u003e              margin: '10px',\n\u003e              // Dynamic values must be set inside template literals\n\u003e              color: `${color}`\n\u003e          }\n\u003e      },scoped)\n\u003e      // rest of your code...\n\u003e \n\u003e      return (\n\u003e          \u003cdiv className={keys['.container']}\u003e\n\u003e              \u003ch1\u003eHello world\u003c/h1\u003e\n\u003e               \u003cScopedStyleSheet styles={sheet} /\u003e\n\u003e          \u003c/div\u003e\n\u003e      )\n\u003e }\n\u003e\n\u003e```\n\n## Setting style values dynamically\nIn your style objects passed to `useScopedStyleSheet`, when setting the values dynamically, do so only in template literals.    \n\n\u003e \n\u003e The following are wrong ❌ when setting style object values\n\u003e\n\u003e **Rule 1**    \n\u003e This is wrong.\n\u003e ```js\n\u003e const styleObject = { /*...*/ };\n\u003e const {keys, sheet} = useScopedStyleSheet(styleObject,scoped) \n\u003e  \n\u003e```\n\u003e\n\u003e **Solution:** Do not pass the object dynamically. Do it like below;    \n\u003e ```js\n\u003e const {keys, sheet} = useScopedStyleSheet({ /*...*/ },scoped)   \n\u003e```\n\u003e\n\u003e **Rule 2**    \n\u003e This is wrong.\n\u003e ```js\n\u003e const className = '.my-class';\n\u003e const {keys, sheet} = useScopedStyleSheet({\n\u003e    [className]: { /*...*/ }\n\u003e },scoped)   \n\u003e\n\u003e```\n\u003e\n\u003e **Solution:** Do not set keys dynamically. Do it like below;    \n\u003e ```js\n\u003e const {keys, sheet} = useScopedStyleSheet({\n\u003e    '.my-class': { /*...*/ }\n\u003e },scoped)   \n\u003e\n\u003e```\n\u003e\n\u003e **Rule 3**    \n\u003e This is wrong.\n\u003e ```js\n\u003e const {keys, sheet} = useScopedStyleSheet({\n\u003e   '.my-class': {\n\u003e        margin: 10 + 'px'\n\u003e    }\n\u003e },scoped)   \n\u003e\n\u003e```\n\u003e\n\u003e **Solution:** Set dynamic values this way instead. Always have the final value stored in a variable and \n\u003e set using template literals.    \n\u003e ```js\n\u003e const margin = 10 + 'px';\n\u003e const {keys, sheet} = useScopedStyleSheet({\n\u003e   '.my-class': {\n\u003e        margin: `${margin}`\n\u003e    }\n\u003e },scoped)   \n\u003e\n\u003e```\n\nHappy Coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Freact-stylescope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbismark%2Freact-stylescope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbismark%2Freact-stylescope/lists"}