{"id":13458982,"url":"https://github.com/vercel/styled-jsx","last_synced_at":"2025-09-09T19:54:18.287Z","repository":{"id":37714038,"uuid":"75629834","full_name":"vercel/styled-jsx","owner":"vercel","description":"Full CSS support for JSX without compromises","archived":false,"fork":false,"pushed_at":"2025-04-30T13:33:29.000Z","size":2716,"stargazers_count":7776,"open_issues_count":83,"forks_count":265,"subscribers_count":104,"default_branch":"main","last_synced_at":"2025-09-05T07:55:39.038Z","etag":null,"topics":["css","css-in-js","dynamic-styles","jsx","react","shadow-dom"],"latest_commit_sha":null,"homepage":"http://npmjs.com/styled-jsx","language":"JavaScript","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/vercel.png","metadata":{"files":{"readme":"readme.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-12-05T13:58:02.000Z","updated_at":"2025-09-01T22:41:02.000Z","dependencies_parsed_at":"2024-05-07T23:24:59.556Z","dependency_job_id":"42ef6c9e-749d-46c1-adb0-7a1ef501da07","html_url":"https://github.com/vercel/styled-jsx","commit_stats":{"total_commits":401,"total_committers":78,"mean_commits":5.141025641025641,"dds":0.6633416458852868,"last_synced_commit":"7e7743aaa6587ea3ee4cd754a5fa0d00da9da4e3"},"previous_names":["zeit/styled-jsx"],"tags_count":127,"template":false,"template_full_name":null,"purl":"pkg:github/vercel/styled-jsx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyled-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyled-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyled-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyled-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vercel","download_url":"https://codeload.github.com/vercel/styled-jsx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fstyled-jsx/sbom","scorecard":{"id":918762,"data":{"date":"2025-08-11","repo":{"name":"github.com/vercel/styled-jsx","commit":"d7a59379134d73afaeb98177387cd62d54d746be"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/vercel/styled-jsx/main.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/vercel/styled-jsx/main.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/prs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/vercel/styled-jsx/prs.yml/main?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":10,"reason":"all changesets reviewed","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Warn: no topLevel permission defined: .github/workflows/prs.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: license.md:0","Info: FSF or OSI recognized license: MIT License: license.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: github.com/vercel/.github/SECURITY.md:1","Info: Found linked content: github.com/vercel/.github/SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/vercel/.github/SECURITY.md:1","Info: Found text in security policy: github.com/vercel/.github/SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"30 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4r62-v4vq-hr96","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-r2j6-p67h-q639","Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T23:18:34.241Z","repository_id":37714038,"created_at":"2025-08-24T23:18:34.241Z","updated_at":"2025-08-24T23:18:34.241Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273767941,"owners_count":25164464,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"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":["css","css-in-js","dynamic-styles","jsx","react","shadow-dom"],"created_at":"2024-07-31T09:01:00.539Z","updated_at":"2025-09-09T19:54:18.214Z","avatar_url":"https://github.com/vercel.png","language":"JavaScript","readme":"# styled-jsx\n\n[![build status](https://github.com/vercel/styled-jsx/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/vercel/styled-jsx/actions?query=branch%3Amain)\n\nFull, scoped and component-friendly CSS support for JSX (rendered on the server or the client).\n\nCode and docs are for v3 which we highly recommend you to try. Looking for styled-jsx v2? Switch to the [v2 branch](https://github.com/vercel/styled-jsx/tree/v2).\n\n- [Getting started](#getting-started)\n- [Configuration options](#configuration-options)\n  - [`optimizeForSpeed`](#optimizeforspeed)\n  - [`sourceMaps`](#sourcemaps)\n  - [`styleModule`](#stylemodule)\n  - [`vendorPrefixes`](#vendorprefixes)\n- [Features](#features)\n- [How It Works](#how-it-works)\n  - [Why It Works Like This](#why-it-works-like-this)\n- [Targeting The Root](#targeting-the-root)\n- [Global styles](#global-styles)\n  - [One-off global selectors](#one-off-global-selectors)\n- [Dynamic styles](#dynamic-styles)\n  - [Via interpolated dynamic props](#via-interpolated-dynamic-props)\n  - [Via `className` toggling](#via-classname-toggling)\n  - [Via inline `style`](#via-inline-style)\n- [Constants](#constants)\n- [Server-Side Rendering](#server-side-rendering)\n- [External CSS and styles outside of the component](#external-css-and-styles-outside-of-the-component)\n  - [External styles](#external-styles)\n  - [Styles outside of components](#styles-outside-of-components)\n  - [The `resolve` tag](#the-resolve-tag)\n  - [Styles in regular CSS files](#styles-in-regular-css-files)\n- [CSS Preprocessing via Plugins](#css-preprocessing-via-plugins)\n  - [Plugin options](#plugin-options)\n  - [Example plugins](#example-plugins)\n- [Rendering in tests](#rendering-in-tests)\n- [FAQ](#faq)\n  - [Warning: unknown `jsx` prop on \u0026lt;style\u0026gt; tag](#warning-unknown-jsx-prop-on-style-tag)\n  - [Can I return an array of components when using React 16?](#can-i-return-an-array-of-components-when-using-react-16)\n  - [Styling third parties / child components from the parent](#styling-third-parties--child-components-from-the-parent)\n  - [Some styles are missing in production](https://github.com/vercel/styled-jsx/issues/319#issuecomment-349239326)\n  - [Build a component library with styled-jsx](#build-a-component-library-with-styled-jsx)\n- [Syntax Highlighting](#syntax-highlighting)\n- [ESLint](#eslint)\n- [TypeScript](#typescript)\n- [Credits](#credits)\n\n## Getting started\n\nFirstly, install the package:\n\n```bash\nnpm install --save styled-jsx\n```\n\nNext, add `styled-jsx/babel` to `plugins` in your babel configuration:\n\n```json\n{\n  \"plugins\": [\"styled-jsx/babel\"]\n}\n```\n\nNow add `\u003cstyle jsx\u003e` to your code and fill it with CSS:\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eonly this paragraph will get the style :)\u003c/p\u003e\n\n    {/* you can include \u003cComponent /\u003es here that include\n         other \u003cp\u003es that don't get unexpected styles! */}\n\n    \u003cstyle jsx\u003e{`\n      p {\n        color: red;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\n## Configuration options\n\nThe following are optional settings for the babel plugin.\n\n#### `optimizeForSpeed`\n\nBlazing fast and optimized CSS rules injection system based on the CSSOM APIs.\n\n```json\n{\n  \"plugins\": [[\"styled-jsx/babel\", { \"optimizeForSpeed\": true }]]\n}\n```\n\nWhen in production\\* this mode is automatically enabled.\u003cbr\u003e\nBeware that when using this option source maps cannot be generated and styles cannot be edited via the devtools.\n\n\\* `process.env.NODE_ENV === 'production'`\n\n#### `sourceMaps`\n\nGenerates source maps (default: `false`)\n\n#### `styleModule`\n\nModule that the transpiled files should import (default: `styled-jsx/style`)\n\n#### `vendorPrefixes`\n\nTurn on/off automatic vendor prefixing (default: `true`)\n\n## Features\n\n- Full CSS support, no tradeoffs in power\n- Runtime size of just **3kb** (gzipped, from 12kb)\n- Complete isolation: Selectors, animations, keyframes\n- Built-in CSS vendor prefixing\n- Very fast, minimal and efficient transpilation (see below)\n- High-performance runtime-CSS-injection when not server-rendering\n- Future-proof: Equivalent to server-renderable \"Shadow CSS\"\n- Source maps support\n- Dynamic styles and themes support\n- CSS Preprocessing via Plugins\n\n## Using in Next.js\n\nNext.js automatically configures `styled-jsx` with babel or swc, you don't have to configure it manually.\n\n## How It Works\n\nThe example above transpiles to the following:\n\n```jsx\nimport _JSXStyle from 'styled-jsx/style'\n\nexport default () =\u003e (\n  \u003cdiv className=\"jsx-123\"\u003e\n    \u003cp className=\"jsx-123\"\u003eonly this paragraph will get the style :)\u003c/p\u003e\n    \u003c_JSXStyle id=\"123\"\u003e{`p.jsx-123 {color: red;}`}\u003c/_JSXStyle\u003e\n  \u003c/div\u003e\n)\n```\n\n### Why It Works Like This\n\nUnique classnames give us style encapsulation and `_JSXStyle` is heavily optimized for:\n\n- Injecting styles upon render\n- Only injecting a certain component's style once (even if the component is included multiple times)\n- Removing unused styles\n- Keeping track of styles for server-side rendering\n\n### Targeting The Root\n\nNotice that the outer `\u003cdiv\u003e` from the example above also gets a `jsx-123` classname. We do this so that\nyou can target the \"root\" element, in the same manner that\n[`:host`](https://web.dev/articles/shadowdom-v1) works with Shadow DOM.\n\nIf you want to target _only_ the host, we suggest you use a class:\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv className=\"root\"\u003e\n    \u003cstyle jsx\u003e{`\n      .root {\n        color: green;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\n### Global styles\n\nTo skip scoping entirely, you can make the global-ness of your styles\nexplicit by adding _global_.\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cstyle jsx global\u003e{`\n      body {\n        background: red;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\nThe advantage of using this over `\u003cstyle\u003e` is twofold: no need\nto use `dangerouslySetInnerHTML` to avoid escaping issues with CSS\nand take advantage of `styled-jsx`'s de-duping system to avoid\nthe global styles being inserted multiple times.\n\n### One-off global selectors\n\nSometimes it's useful to skip selectors scoping. In order to get a one-off global selector we support `:global()`, inspired by [css-modules](https://github.com/css-modules/css-modules).\n\nThis is very useful in order to, for example, generate a _global class_ that\nyou can pass to 3rd-party components. For example, to style\n`react-select` which supports passing a custom class via `optionClassName`:\n\n```jsx\nimport Select from 'react-select'\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cSelect optionClassName=\"react-select\" /\u003e\n\n    \u003cstyle jsx\u003e{`\n      /* \"div\" will be prefixed, but \".react-select\" won't */\n\n      div :global(.react-select) {\n        color: red;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\n### Dynamic styles\n\nTo make a component's visual representation customizable from the outside world there are three options.\n\n#### Via interpolated dynamic props\n\nAny value that comes from the component's `render` method scope is treated as dynamic. This makes it possible to use `props` and `state` for example.\n\n```jsx\nconst Button = props =\u003e (\n  \u003cbutton\u003e\n    {props.children}\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: ${'large' in props ? '50' : '20'}px;\n        background: ${props.theme.background};\n        color: #999;\n        display: inline-block;\n        font-size: 1em;\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\nNew styles' injection is optimized to perform well at runtime.\n\nThat said when your CSS is mostly static we recommend to split it up in static and dynamic styles and use two separate `style` tags so that, when changing, only the dynamic parts are recomputed/rendered.\n\n```jsx\nconst Button = props =\u003e (\n  \u003cbutton\u003e\n    {props.children}\n    \u003cstyle jsx\u003e{`\n      button {\n        color: #999;\n        display: inline-block;\n        font-size: 2em;\n      }\n    `}\u003c/style\u003e\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: ${'large' in props ? '50' : '20'}px;\n        background: ${props.theme.background};\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\n#### Via `className` toggling\n\nThe second option is to pass properties that toggle class names.\n\n```jsx\nconst Button = props =\u003e (\n  \u003cbutton className={'large' in props \u0026\u0026 'large'}\u003e\n    {props.children}\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: 20px;\n        background: #eee;\n        color: #999;\n      }\n      .large {\n        padding: 50px;\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\nThen you would use this component as either `\u003cButton\u003eHi\u003c/Button\u003e` or `\u003cButton large\u003eBig\u003c/Button\u003e`.\n\n#### Via inline `style`\n\n\\***best for animations**\n\nImagine that you wanted to make the padding in the button above completely customizable. You can override the CSS you configure via inline-styles:\n\n```jsx\nconst Button = ({ padding, children }) =\u003e (\n  \u003cbutton style={{ padding }}\u003e\n    {children}\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: 20px;\n        background: #eee;\n        color: #999;\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\nIn this example, the padding defaults to the one set in `\u003cstyle\u003e` (`20`), but the user can pass a custom one via `\u003cButton padding={30}\u003e`.\n\n### Constants\n\nIt is possible to use constants like so:\n\n```jsx\nimport { colors, spacing } from '../theme'\nimport { invertColor } from '../theme/utils'\n\nconst Button = ({ children }) =\u003e (\n  \u003cbutton\u003e\n    {children}\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: ${spacing.medium};\n        background: ${colors.primary};\n        color: ${invertColor(colors.primary)};\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\nPlease keep in mind that constants defined outside of the component scope are treated as static styles.\n\n## Server-Side Rendering\n\n`styled-jsx` v5 introduced `StyledRegistry` component and `useStyleRegistry` hook to let you scope styles rendering in each SSR render to keep concurrent-safe.\n\n- `registry.styles()` will return the array of react components for style tags.\n- `registry.flush()` can clean the existing styles in the registry, it's optional for SSR when you have a standalone registry for each SSR render.\n\n\u003e Next.js 12 integrates with `styled-jsx` v5 and manages the registry for you.\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/server'\nimport { StyleRegistry, useStyleRegistry } from 'styled-jsx'\nimport App from './app'\n\nfunction Styles() {\n  const registry = useStyleRegistry()\n  const styles = registry.styles()\n  return \u003c\u003e{styles}\u003c/\u003e\n}\n\nexport default (req, res) =\u003e {\n  const app = ReactDOM.renderToString(\u003cApp /\u003e)\n  const html = ReactDOM.renderToStaticMarkup(\n    \u003cStyleRegistry\u003e\n      \u003chtml\u003e\n        \u003chead\u003e\n          \u003cStyles /\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n          \u003cdiv id=\"root\" dangerouslySetInnerHTML={{ __html: app }} /\u003e\n        \u003c/body\u003e\n      \u003c/html\u003e\n    \u003c/StyleRegistry\u003e\n  )\n  res.end('\u003c!doctype html\u003e' + html)\n}\n```\n\nThere's also a new API `createStyleRegistry` that is introduced when you have to create a registry manually. In this way you can operate the registry yourself to extract the rendered styles (`registry.styles()`) or flush them out (`registry.flush()`).\n\n```js\nconst registry = createStyleRegistry()\nconst styles = registry.styles() // access styles\n\nfunction Page() {\n  return (\n    \u003cStyleRegistry registry={registry}\u003e\n      \u003cApp /\u003e\n    \u003c/StyleRegistry\u003e\n  )\n}\n```\n\nBy default `\u003cStyleRegistry /\u003e` will use the `registry` from root top `StyleRegistry`, which means there's only one `registry` in the react tree.\n\nIt's **paramount** that you use one of these two functions so that\nthe generated styles can be diffed when the client loads and\nduplicate styles are avoided.\n\n### Content Security Policy\n\nStrict [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is supported.\n\nYou should generate a nonce **per request**.\n\n```js\nimport nanoid from 'nanoid'\n\nconst nonce = Buffer.from(nanoid()).toString('base64') //ex: N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3\n```\n\nYou must then pass a nonce to `registry.styles({ nonce })` **and** set a `\u003cmeta property=\"csp-nonce\" content={nonce} /\u003e` tag.\n\nYour CSP policy must share the same nonce as well (the header nonce needs to match the html nonce and remain unpredictable).\n`Content-Security-Policy: default-src 'self'; style-src 'self' 'nonce-N2M0MDhkN2EtMmRkYi00MTExLWFhM2YtNDhkNTc4NGJhMjA3';`\n\n### External CSS and styles outside of the component\n\nIn styled-jsx styles can be defined outside of the component's render method or in separate JavaScript modules using the `styled-jsx/css` library. `styled-jsx/css` exports three tags that can be used to tag your styles:\n\n- `css`, the default export, to define scoped styles.\n- `css.global` to define global styles.\n- `css.resolve` to define scoped styles that resolve to the scoped `className` and a `styles` element.\n\n#### External styles\n\nIn an external file:\n\n```js\n/* styles.js */\nimport css from 'styled-jsx/css'\n\n// Scoped styles\nexport const button = css`\n  button {\n    color: hotpink;\n  }\n`\n\n// Global styles\nexport const body = css.global`body { margin: 0; }`\n\n// Resolved styles\nexport const link = css.resolve`a { color: green; }`\n// link.className -\u003e scoped className to apply to `a` elements e.g. jsx-123\n// link.styles -\u003e styles element to render inside of your component\n\n// Works also with default exports\nexport default css`\n  div {\n    color: green;\n  }\n`\n```\n\nYou can then import and use those styles:\n\n```jsx\nimport styles, { button, body } from './styles'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\u003estyled-jsx\u003c/button\u003e\n    \u003cstyle jsx\u003e{styles}\u003c/style\u003e\n    \u003cstyle jsx\u003e{button}\u003c/style\u003e\n    \u003cstyle jsx global\u003e\n      {body}\n    \u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\nN.B. All the tags except for [`resolve`](#the-resolve-tag) don't support dynamic styles.\n\n`resolve` and `global` can also be imported individually:\n\n```js\nimport { resolve } from 'styled-jsx/css'\nimport { global } from 'styled-jsx/css'\n```\n\nIf you use Prettier we recommend you to use the default `css` export syntax since the tool doesn't support named imports.\n\n#### Styles outside of components\n\nThe `css` tag from `styled-jsx/css` can be also used to define styles in your components files but outside of the component itself. This might help with keeping `render` methods smaller.\n\n```jsx\nimport css from 'styled-jsx/css'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\u003estyled-jsx\u003c/button\u003e\n    \u003cstyle jsx\u003e{button}\u003c/style\u003e\n  \u003c/div\u003e\n)\n\nconst button = css`\n  button {\n    color: hotpink;\n  }\n`\n```\n\nLike in externals styles `css` doesn't work with dynamic styles. If you have dynamic parts you might want to place them inline inside of your component using a regular `\u003cstyle jsx\u003e` element.\n\n#### The `resolve` tag\n\nThe `resolve` tag from `styled-jsx/css` can be used when you need to scope some CSS - for example, if you need to style nested components from the parent, such as the `Link` component in the example below.\n\nIt works by returning the generated scoped `className` and related `styles`.\n\n```jsx\nimport React from 'react'\nimport Link from 'some-library'\n\nimport css from 'styled-jsx/css'\n\nconst { className, styles } = css.resolve`\n  a { color: green }\n`\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    {/* use the className */}\n    \u003cLink className={className}\u003eAbout\u003c/Link\u003e\n\n    {/* render the styles for it */}\n    {styles}\n  \u003c/div\u003e\n)\n```\n\nThe `resolve` tag also supports dynamic styles, via template string interpolation:\n\n```jsx\nimport React from 'react'\nimport css from 'styled-jsx/css'\n\nfunction getLinkStyles(color) {\n  return css.resolve`\n    a { color: ${color} }\n  `\n}\n\nexport default props =\u003e {\n  const { className, styles } = getLinkStyles(props.theme.color)\n\n  return (\n    \u003cdiv\u003e\n      \u003cLink className={className}\u003eAbout\u003c/Link\u003e\n      {styles}\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Using `resolve` as a Babel macro\n\nIf you can't (or would rather not) make changes to your `.babelrc`, the `resolve` tag can be used as a Babel macro, thanks to the [`babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros) system.\n\nTo set this up, first of all, install `styled-jsx` and `babel-plugin-macros`:\n\n```bash\nnpm i --save styled-jsx\nnpm i --save-dev babel-plugin-macros\n```\n\nNext, add `babel-plugin-macros` to your Babel configuration:\n\n```json\n{\n  \"plugins\": [\"babel-plugin-macros\"]\n}\n```\n\nYou can then use `resolve` by importing it from `styled-jsx/macro`.\n\n```jsx\nimport css from 'styled-jsx/macro'\n\nconst { className, styles } = css.resolve`\n  a { color: green }\n`\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cLink className={className}\u003eAbout\u003c/Link\u003e\n    {styles}\n  \u003c/div\u003e\n)\n```\n\n##### Usage with [`create-react-app`](https://create-react-app.dev)\n\n[Create React App](https://create-react-app.dev) comes with `babel-plugin-macros` already installed, so the only thing that needs to be done is to install `styled-jsx`:\n\n```bash\nnpm i --save styled-jsx\n```\n\nThen `resolve` can be imported from `styled-jsx/macro` and used the same way as in the example in the [Using `resolve` as a Babel macro](https://github.com/vercel/styled-jsx/blob/main/readme.md#using-resolve-as-a-babel-macro) section above.\n\n#### Styles in regular CSS files\n\nstyled-jsx v3 comes with a webpack loader that lets you write styles in regular `css` files and consume them in React.\n\n```js\nimport styles from '../components/button/styles.css'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\u003estyled-jsx\u003c/button\u003e\n    \u003cstyle jsx\u003e{styles}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\nTo consume the styles in your component you can import them from your CSS file and render them using a `\u003cstyle jsx\u003e` tag. Remember to add the `global` prop if you want your styles to be global.\n\nTo use this feature you need to register the loader in your webpack config file, before `babel-loader` which will then transpile the styles via `styled-jsx/babel`\n\n```js\nconfig: {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: require('styled-jsx/webpack').loader,\n            options: {\n              type: 'scoped'\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nThe plugin accepts a `type` option to configure whether the styles should be `scoped`, `global` or `resolve` (see above). By default its values is set to `scoped`. `type` can also be a `function` which takes the `fileName` and the `fileNameQuery` that is being transpiled and must return a valid type.\n\n```js\ntype validTypes = 'scoped' | 'global' | 'resolve'\ntype fileName = string\ntype Options = {|\n  type: validTypes | ((fileName, options) =\u003e validTypes)\n|}\n```\n\n```js\nimport styles from './styles.css?type=global'\n\n// webpack\nconfig: {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          {\n            loader: require('styled-jsx/webpack').loader,\n            options: {\n              type: (fileName, options) =\u003e options.query.type || 'scoped'\n            }\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\nThe type can also be set per individual CSS file via CSS comment:\n\n```css\n/* @styled-jsx=scoped */\n\nbutton {\n  color: red;\n}\n```\n\nThe CSS comment option will override the one in the webpack configuration only for this specific file.\n\n##### Next.js\n\nExample of `next.config.js` to integrate `styled-jsx/webpack`:\n\n```js\nmodule.exports = {\n  webpack: (config, { defaultLoaders }) =\u003e {\n    config.module.rules.push({\n      test: /\\.css$/,\n      use: [\n        defaultLoaders.babel,\n        {\n          loader: require('styled-jsx/webpack').loader,\n          options: {\n            type: 'scoped'\n          }\n        }\n      ]\n    })\n\n    return config\n  }\n}\n```\n\n## CSS Preprocessing via Plugins\n\nStyles can be preprocessed via plugins.\n\nPlugins are regular JavaScript modules that export a simple function with the following signature:\n\n```ts\nfunction plugin(css: string, options: Object): string\n```\n\nBasically they accept a CSS string in input, optionally modify it and finally return it.\n\nPlugins make it possible to use popular preprocessors like SASS, Less, Stylus, PostCSS or apply custom transformations to the styles at **compile time**.\n\nTo register a plugin add an option `plugins` for `styled-jsx/babel` to your `.babelrc`. `plugins` must be an array of module names or _full_ paths for local plugins.\n\n```json\n{\n  \"plugins\": [\n    [\n      \"styled-jsx/babel\",\n      {\n        \"plugins\": [\n          \"my-styled-jsx-plugin-package\",\n          \"/full/path/to/local/plugin\"\n        ]\n      }\n    ]\n  ]\n}\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eInstructions to integrate with Next.js\u003c/summary\u003e\n  In order to register styled-jsx plugins in a Next.js app you need to create a custom .babelrc file:\n\n```json\n{\n  \"presets\": [\n    [\n      \"next/babel\",\n      {\n        \"styled-jsx\": {\n          \"plugins\": [\"styled-jsx-plugin-postcss\"]\n        }\n      }\n    ]\n  ]\n}\n```\n\nThis is a fairly new feature so make sure that you using a version of Next.js that supports passing options to `styled-jsx`.\n\n\u003c/details\u003e\n\u003cbr\u003e\n\nPlugins are applied in definition order left to right before styles are scoped.\n\nIn order to resolve local plugins paths you can use NodeJS' [require.resolve](https://nodejs.org/api/globals.html#globals_require_resolve).\n\nN.B. when applying the plugins styled-jsx replaces template literals expressions with placeholders because otherwise CSS parsers would get invalid CSS E.g.\n\n```css\n/* `ExprNumber` is a number */\n%%styled-jsx-placeholder-ExprNumber%%\n```\n\n**Plugins won't transform expressions** (eg. dynamic styles).\n\nWhen publishing a plugin you may want to add the keywords: `styled-jsx` and `styled-jsx-plugin`.\nWe also encourage you to use the following naming convention for your plugins:\n\n```\nstyled-jsx-plugin-\u003cyour-plugin-name\u003e\n```\n\n#### Plugin options\n\nUsers can set plugin options by registering a plugin as an array that contains\nthe plugin path and an options object.\n\n```json\n{\n  \"plugins\": [\n    [\n      \"styled-jsx/babel\",\n      {\n        \"plugins\": [\n          [\"my-styled-jsx-plugin-package\", { \"exampleOption\": true }]\n        ],\n        \"sourceMaps\": true\n      }\n    ]\n  ]\n}\n```\n\nEach plugin receives a `options` object as second argument which contains\nthe babel and user options:\n\n```js\n;(css, options) =\u003e {\n  /* ... */\n}\n```\n\nThe `options` object has the following shape:\n\n```js\n{\n  // user options go here\n  // eg. exampleOption: true\n\n  // babel options\n  babel: {\n    sourceMaps: boolean,\n    vendorPrefixes: boolean,\n    isGlobal: boolean,\n    filename: ?string, // defined only when the filename option is passed to Babel, such as when using Babel CLI or Webpack\n    location: { // the original location of the CSS block in the JavaScript file\n      start: {\n        line: number,\n        column: number,\n      },\n      end: {\n        line: number,\n        column: number,\n      }\n    }\n  }\n}\n```\n\n#### Example plugins\n\nThe following plugins are proof of concepts/sample:\n\n- [styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass)\n- [styled-jsx-plugin-postcss](https://github.com/giuseppeg/styled-jsx-plugin-postcss)\n- [styled-jsx-plugin-stylelint](https://github.com/giuseppeg/styled-jsx-plugin-stylelint)\n- [styled-jsx-plugin-less](https://github.com/erasmo-marin/styled-jsx-plugin-less)\n- [styled-jsx-plugin-stylus](https://github.com/omardelarosa/styled-jsx-plugin-stylus)\n\n## Rendering in tests\n\nIf you're using a tool such as Enzyme, you might want to avoid compiling your styles in test renders. In general, styled-jsx artifacts like `jsx-123` classnames and vendor prefixing are not direct concerns of your component, and they generate a lot of snapshot noise.\n\nOne option is to exclude the `styled-jsx/babel` plugin from the `test` environment using `env` in your Babel config (see [Config Merging options](https://babeljs.io/docs/en/options#config-merging-options)).\n\nBut this can cause noise in your terminal output when rendering:\n\n```\n   console.error node_modules/react-dom/cjs/react-dom.development.js:527\n      Warning: Received `true` for a non-boolean attribute `jsx`.\n```\n\nThe `styled-jsx/babel-test` solves this problem. It simply strips `jsx` attributes from all `\u003cstyle\u003e` tags. Be sure to target each environment with the appropriate plugin:\n\n```json\n{\n  \"env\": {\n    \"production\": {\n      \"plugins\": [\"styled-jsx/babel\"]\n    },\n    \"development\": {\n      \"plugins\": [\"styled-jsx/babel\"]\n    },\n    \"test\": {\n      \"plugins\": [\"styled-jsx/babel-test\"]\n    }\n  }\n}\n```\n\n#### styled-jsx/css in tests\n\nWhen using `styled-jsx/babel-test`, `styled-jsx/css` throws the following error:\n\n```\nstyled-jsx/css: if you are getting this error it means that your `css` tagged template literals were not transpiled.\n```\n\nto solve this issue you need to mock `styled-jsx/css`. You can find a guide at the following link https://kevinjalbert.com/jest-snapshots-reducing-styled-jsx-noise/\n\n## FAQ\n\n### Warning: unknown `jsx` prop on \u0026lt;style\u0026gt; tag\n\nIf you get this warning it means that your styles were not compiled by styled-jsx.\n\nPlease take a look at your setup and make sure that everything is correct and that the styled-jsx transformation is ran by Babel.\n\n### Can I return an array of components when using React 16?\n\nNo, this feature is not supported. However we support React Fragments, which are available in React `16.2.0` and above.\n\n```jsx\nconst StyledImage = ({ src, alt = '' }) =\u003e (\n  \u003cReact.Fragment\u003e\n    \u003cimg src={src} alt={alt} /\u003e\n    \u003cstyle jsx\u003e{`\n      img {\n        max-width: 100%;\n      }\n    `}\u003c/style\u003e\n  \u003c/React.Fragment\u003e\n)\n```\n\n### Styling third parties / child components from the parent\n\nWhen the component accepts a `className` (or ad-hoc) prop as a way to allow customizations then you can use [the `resolve` tag from `styled-jsx/css`](#the-resolve-tag).\n\nWhen the component doesn't accept any `className` or doesn't expose any API to customize the component, then your only option is to use `:global()` styles:\n\n```jsx\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cExternalComponent /\u003e\n\n    \u003cstyle jsx\u003e{`\n      /* \"div\" will be prefixed, but \".nested-element\" won't */\n\n      div \u003e :global(.nested-element) {\n        color: red;\n      }\n    `}\u003c/style\u003e\n  \u003c/div\u003e\n)\n```\n\nPlease keep in mind that `:global()` styles will affect the entire subtree, so in many cases you may want to be careful and use the children (direct descendant) selector `\u003e`.\n\n### Build a component library with styled-jsx\n\nThere's an [article](https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2) explaining how to bundle React components with Rollup and styled-jsx as an external dependency.\n\n## Syntax Highlighting\n\nWhen working with template literals a common drawback is missing syntax highlighting. The following editors currently have support for highlighting CSS inside `\u003cstyle jsx\u003e` elements.\n\n_If you have a solution for an editor not on the list_ **please [open a PR](https://github.com/vercel/styled-jsx/pull/new/main)** _and let us now._\n\n### Atom\n\nThe [`language-babel`](https://github.com/gandm/language-babel) package for the [Atom editor](https://atom.io/) has an option to [extend the grammar for JavaScript tagged template literals](https://github.com/gandm/language-babel#javascript-tagged-template-literal-grammar-extensions).\n\nAfter [installing the package](https://github.com/gandm/language-babel#installation) add the code below to the appropriate settings entry. In a few moments you should be blessed with proper CSS syntax highlighting. ([source](https://github.com/gandm/language-babel/issues/324))\n\n```\n\"(?\u003c=\u003cstyle jsx\u003e{)|(?\u003c=\u003cstyle jsx global\u003e{)|(?\u003c=css)\":source.css.styled\n```\n\n![babel-language settings entry](https://cloud.githubusercontent.com/assets/2313237/22627258/6c97cb68-ebb7-11e6-82e1-60205f8b31e7.png)\n\n### Webstorm/Idea\n\nThe IDE let you inject any language in place with _Inject language or reference_ in an _Intention Actions_ (default _alt+enter_).\nSimply perform the action in the string template and select CSS.\nYou get full CSS highlighting and autocompletion and it will last until you close the IDE.\n\nAdditionally you can use language injection comments to enable all the IDE language features indefinitely using the language comment style:\n\n```jsx\nimport { colors, spacing } from '../theme'\nimport { invertColor } from '../theme/utils'\n\nconst Button = ({ children }) =\u003e (\n  \u003cbutton\u003e\n    {children}\n\n    {/*language=CSS*/}\n    \u003cstyle jsx\u003e{`\n      button {\n        padding: ${spacing.medium};\n        background: ${colors.primary};\n        color: ${invertColor(colors.primary)};\n      }\n    `}\u003c/style\u003e\n  \u003c/button\u003e\n)\n```\n\n### Emmet\n\nIf you're using Emmet you can add the following snippet to `~/emmet/snippets-styledjsx.json` This will allow you to expand `style-jsx` to a styled-jsx block.\n\n```json\n{\n  \"html\": {\n    \"snippets\": {\n      \"style-jsx\": \"\u003cstyle jsx\u003e{`\\n\\t$1\\n`}\u003c/style\u003e\"\n    }\n  }\n}\n```\n\n### Syntax Highlighting [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-syntax)\n\nLaunch VS Code Quick Open (⌘+P), paste the following command, and press enter.\n\n```\next install Divlo.vscode-styled-jsx-syntax\n```\n\nIf you use Stylus instead of plain CSS, install [vscode-styled-jsx-stylus](https://marketplace.visualstudio.com/items?itemName=samuelroy.vscode-styled-jsx-stylus) or paste the command below.\n\n```\next install vscode-styled-jsx-stylus\n```\n\n### Autocomplete [Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=Divlo.vscode-styled-jsx-languageserver)\n\nLaunch VS Code Quick Open (⌘+P), paste the following command, and press enter.\n\n```\next install Divlo.vscode-styled-jsx-languageserver\n```\n\n### Vim\n\nInstall [vim-styled-jsx](https://github.com/alampros/vim-styled-jsx) with your plugin manager of choice.\n\n## ESLint\n\nIf you're using `eslint-plugin-import`, the `css` import will generate errors, being that it's a \"magic\" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:\n\n```\n\"settings\": {\"import/core-modules\": [\"styled-jsx/css\"] }\n```\n\n## TypeScript\n\nIf you're using TypeScript, then in order to allow `\u003cstyle jsx\u003e` tags to be properly understood by it, create a file named \"styled-jsx.d.ts\" anywhere within your project containing the following, or add this line to the top of any single existing .ts file within your project:\n\n```ts\n/// \u003creference types=\"styled-jsx\" /\u003e\n```\n\n\u003e If you're using babel to transform styled-jsx code with TypeScript, you need to specify `\"jsx\": \"preserve\"` in your tsconfig.json to keep the original JSX and let babel parse and transform with styled-jsx babel plugin.\n\n## Credits\n\n- **Pedram Emrouznejad** ([rijs](https://github.com/rijs/fullstack)) suggested attribute selectors over my initial class prefixing idea.\n- **Sunil Pai** ([glamor](https://github.com/threepointone/glamor)) inspired the use of `murmurhash2` (minimal and fast hashing) and an efficient style injection logic.\n- **Sultan Tarimo** built [stylis.js](https://github.com/thysultan), a super fast and tiny CSS parser and compiler.\n- **Max Stoiber** ([styled-components](https://github.com/styled-components)) proved the value of retaining the familiarity of CSS syntax and pointed me to the very efficient [stylis](https://github.com/thysultan/stylis.js) compiler (which we forked to very efficiently append attribute selectors to the user's css)\n- **Yehuda Katz** ([ember](https://github.com/emberjs)) convinced me on Twitter to transpile CSS as an alternative to CSS-in-JS.\n- **Evan You** ([vuejs](https://github.com/vuejs)) discussed his Vue.js CSS transformation with me.\n- **Henry Zhu** ([babel](https://github.com/babel)) helpfully pointed me to some important areas of the babel plugin API.\n\n## Authors\n\n- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) - [▲Vercel](https://vercel.com)\n- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) - [▲Vercel](https://vercel.com)\n- Giuseppe Gurgone ([@giuseppegurgone](https://twitter.com/giuseppegurgone))\n","funding_links":[],"categories":["JavaScript","Macros"],"sub_categories":["CSS-in-JS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fstyled-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvercel%2Fstyled-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fstyled-jsx/lists"}