{"id":13533200,"url":"https://github.com/LXSMNSYC/solid-styled","last_synced_at":"2025-04-01T21:31:59.501Z","repository":{"id":37612780,"uuid":"448813253","full_name":"lxsmnsyc/solid-styled","owner":"lxsmnsyc","description":"Reactive stylesheets for SolidJS","archived":false,"fork":false,"pushed_at":"2025-03-14T02:59:32.000Z","size":1008,"stargazers_count":184,"open_issues_count":8,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-01T13:08:10.029Z","etag":null,"topics":["css","css-in-js","scoped-css","solid-js"],"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/lxsmnsyc.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},"funding":{"github":"lxsmnsyc"}},"created_at":"2022-01-17T08:36:15.000Z","updated_at":"2025-03-20T04:26:55.000Z","dependencies_parsed_at":"2025-02-17T22:45:41.925Z","dependency_job_id":"65de0644-e746-4dee-9c96-a21689b24fc5","html_url":"https://github.com/lxsmnsyc/solid-styled","commit_stats":{"total_commits":168,"total_committers":5,"mean_commits":33.6,"dds":0.04166666666666663,"last_synced_commit":"d5f189deeca2071f946f8090875aebe442a37f23"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-styled","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-styled/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-styled/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-styled/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-styled/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713289,"owners_count":20821869,"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","scoped-css","solid-js"],"created_at":"2024-08-01T07:01:17.519Z","updated_at":"2025-04-01T21:31:59.491Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-styled\n\n\u003e Reactive stylesheets for SolidJS\n\n[![NPM](https://img.shields.io/npm/v/solid-styled.svg)](https://www.npmjs.com/package/solid-styled) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n\n## Install\n\n```bash\nnpm i solid-styled\nnpm i -D postcss\n```\n\n```bash\nyarn add solid-styled\nyarn add -D postcss\n```\n\n```bash\npnpm add solid-styled\npnpm add -D postcss\n```\n\n## Features\n\n- Render stylesheets only once\n- Fine-grained reactive CSS properties\n- Scoped stylesheets\n- `:global` selector\n- `@global` at-rule\n- SSR\n- Near zero-runtime\n- `\u003cstyle jsx\u003e`\n\n## Examples\n\n- Vite - [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-styled/tree/main/examples/demo)\n- Astro - [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-styled/tree/main/examples/astro-demo)\n\n## Usage\n\n### Integrations\n\n- [Rollup](https://github.com/lxsmnsyc/solid-styled/tree/main/packages/rollup)\n- [Vite](https://github.com/lxsmnsyc/solid-styled/tree/main/packages/vite)\n- [Unplugin](https://github.com/lxsmnsyc/solid-styled/tree/main/packages/unplugin)\n\n### `css`\n\nUse the `css` tagged template for writing stylesheets.\n\n```js\nimport { css } from 'solid-styled';\n\nfunction Title() {\n  css`\n    h1 {\n      color: red;\n    }\n  `;\n\n  return \u003ch1\u003eHello World\u003c/h1\u003e;\n}\n```\n\nThe template is also reactive. It works by replacing all templating values with a CSS variable. This allows the stylesheet to be only rendered once and can be shared by multiple components of the same scope.\n\n```js\nimport { css } from 'solid-styled';\n\nfunction Button() {\n  const [color, setColor] = createSignal('red');\n  css`\n    button {\n      color: ${color()};\n    }\n  `;\n\n  return (\n    \u003cbutton onClick={() =\u003e {\n      setColor((c) =\u003e (c === 'red' ? 'blue' : 'red'));\n    }}\u003e\n      Current color: {color()}\n    \u003c/button\u003e\n  );\n}\n```\n\nBy default, all styles are scoped to its component and cannot leak into another component. The scoping only applies to all DOM nodes that can be found in the component, including the children of the external components.\n\n```js\nimport { css } from 'solid-styled';\n\nfunction ForeignTitle() {\n  return \u003ch1\u003eThis is not affected\u003c/h1\u003e;\n}\n\nfunction Title() {\n  css`\n    h1 {\n      color: red;\n    }\n  `;\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003eThis is affected.\u003c/h1\u003e\n      \u003cForeignTitle /\u003e\n      \u003cContainer\u003e\n        \u003ch1\u003eThis is also affected.\u003c/h1\u003e\n      \u003c/Container\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n#### `:global`\n\nSince all selectors in a given stylesheet are scoped by default, you can use the `:global` pseudo selector to opt-out of scoping:\n\n```js\nimport { css } from 'solid-styled';\n\nfunction Feed(props) {\n  css`\n    div \u003e :global(* + *) {\n      margin-top: 0.5rem;\n    }\n  `;\n\n  return (\n    \u003cdiv\u003e\n      \u003cFor each={props.articles}\u003e\n        {(item) =\u003e (\n          // This item is affected by the CSS of the Feed component.\n          \u003cFeedArticle data={item} /\u003e\n        )}\n      \u003c/For\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### `@global`\n\nYou can use `@global` instead of `:global` if you want to declare multiple global styles\n\n```js\ncss`\n  /* this is global */\n  @global {\n    body {\n      background-color: black;\n    }\n\n    main {\n      padding: 0.5rem;\n    }\n  }\n\n  h1 {\n    color: white;\n  }\n`;\n```\n\n### Forward scope\n\nSince `solid-styled` scopes DOM elements and not components by default, it doesn't affect things like `\u003cDynamic\u003e`. Using `use:solid-styled`, we can forward the current scope/sheet to the component.\n\n```js\ncss`\n  * {\n    color: red;\n  }\n`;\n\n\u003cDynamic component={props.as} use:solid-styled\u003e\n  {props.children}\n\u003c/Dynamic\u003e\n```\n\nwhich compiles into\n\n```js\nuseSolidStyled('xxxx', '*[s\\\\:xxxx]{color:red}');\n\n\u003cDynamic component={props.as} s:xxxx style={vars()}\u003e\n  {props.children}\n\u003c/Dynamic\u003e\n```\n\n### `\u003cstyle jsx\u003e`\n\nInspired by [`styled-jsx`](https://github.com/vercel/styled-jsx).\n\nUse `\u003cstyle jsx\u003e` instead of `css` for declaring styles in JSX expressions. Both `\u003cstyle jsx\u003e` and `css` functions the same.\n\n```js\nfunction Button() {\n  const [color, setColor] = createSignal('red');\n  return (\n    \u003c\u003e\n      \u003cstyle jsx\u003e\n        {`\n          button {\n            color: ${color()};\n          }\n        `}\n      \u003c/style\u003e\n      \u003cbutton onClick={() =\u003e {\n        setColor((c) =\u003e (c === 'red' ? 'blue' : 'red'));\n      }}\u003e\n        Current color: {color()}\n      \u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nYou can also use `\u003cstyle jsx global\u003e` for declaring global styles.\n\nThe main motivation for writing an alternative way of declaring styles with `\u003cstyle jsx\u003e` is to facilitate the migration from `solid-styled-jsx` to `solid-styled`. Possibly, some developers may as well use `\u003cstyle jsx\u003e` because of their familiarity with adding the styles inside the JSX.\n\n## SSR\n\n### `\u003cStyleRegistry\u003e`\n\nFor SSR, you can pass an array to the `styles` prop of `\u003cStyleRegistry\u003e`. This array collects all of the \"critical\" (initial render) stylesheets, that which you can render as a string with `renderSheets`.\n\n```js\nimport { renderSheets } from 'solid-styled';\n\nconst styles = [];\n\nrenderToString(() =\u003e (\n  \u003cStyleRegistry styles={styles}\u003e\n    \u003cApp /\u003e\n  \u003c/StyleRegistry\u003e\n));\n\n// Render sheets\n// You can use the resulting sheet by inserting\n// it into an HTML template.\nconst styles = renderSheets(styles);\n```\n\nAlternatively, for automatic sheet rendering (assuming that you are server-rendering the entire document), you can do\n\n```jsx\nrenderToString(() =\u003e (\n  \u003cStyleRegistry auto\u003e\n    \u003cApp /\u003e\n  \u003c/StyleRegistry\u003e\n));\n```\n\n## CSS Processing\n\n`solid-styled` uses [LightningCSS](https://lightningcss.dev/) to preprocess CSS templates as well as apply CSS scoping and transformations. By default, [CSS Nesting and Custom Media Queries](https://lightningcss.dev/transpilation.html#draft-syntax) are enabled by default.\n\n## Limitations\n\n- Scoping `css` can only be called directly on components. This is so that the Babel plugin can find and transform the JSX of the component. Global `css` (i.e. `:global` or `@global`) can be used inside other functions i.e. hooks, utilities.\n- Dynamic styles are only limited to CSS properties.\n\n## Sponsors\n\n![Sponsors](https://github.com/lxsmnsyc/sponsors/blob/main/sponsors.svg?raw=true)\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":["https://github.com/sponsors/lxsmnsyc"],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLXSMNSYC%2Fsolid-styled","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLXSMNSYC%2Fsolid-styled","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLXSMNSYC%2Fsolid-styled/lists"}