{"id":15725825,"url":"https://github.com/ndrean/solid-css","last_synced_at":"2025-05-13T10:40:31.355Z","repository":{"id":177797377,"uuid":"660928022","full_name":"ndrean/solid-css","owner":"ndrean","description":"Lightweight CSS-in-JS for SolidJS based on BauCSS","archived":false,"fork":false,"pushed_at":"2023-07-12T13:52:25.000Z","size":231,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-20T23:32:34.891Z","etag":null,"topics":["css","css-in-js","solidjs","styled-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/bau-solidcss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ndrean.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-07-01T08:43:50.000Z","updated_at":"2024-11-25T15:26:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"35ccebfc-4549-4da1-aa2e-784490e63233","html_url":"https://github.com/ndrean/solid-css","commit_stats":null,"previous_names":["ndrean/solid-css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsolid-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsolid-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsolid-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ndrean%2Fsolid-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ndrean","download_url":"https://codeload.github.com/ndrean/solid-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253856654,"owners_count":21974581,"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","solidjs","styled-components"],"created_at":"2024-10-03T22:24:26.674Z","updated_at":"2025-05-13T10:40:31.333Z","avatar_url":"https://github.com/ndrean.png","language":"JavaScript","readme":"# CSS-in-JS for SolidJS\n\nShamlessly copied BauCSS, added `styled` for SolidJS.\n[![npm bundle size](https://img.badgesize.io/ndrean/solid-css/main/src/bau-solidcss.js?compression=gzip)](https://bundlephobia.com/package/bau-solidcss@0.1.10)\n\n## Usage\n\n```bash\npnpm i bau-solidcss\n```\n\n```js\nimport BauSolidCss from \"bau-solidcss\";\nconst { css, styled, keyframes, createGlobalStyles } = BauSolidCss();\n```\n\n## Worked example\n\n```bash\ncd example\npnpm i\npnpm run dev\n```\n\n## `bau-solidcss` package\n\nIt exports 4 primitives: `css`to build classes, `keyframes` to build animations, `createGlobalStyles` for global styles and `styled` to build styled components and easy conditional styling.\n\n### Global style with `createGlobalStyles`\n\n```js\ncreateGlobalStyles`\n  :root {\n    margin: 0;\n    --main-color: midnightblue;\n  }\n  \n  body {\n    text-align: center;\n  }\n`;\n```\n\n### Build a class with `css`\n\nYou write template strings, pass it to the function `css` to build a `class`.\n\n```js\nconst main = css`\n  background-color: bisque;\n  color: var(--main-color);\n`;\n\n\u003cdiv class={main}\u003eI am an div\u003c/div\u003e;\n```\n\n### Build a styled component with `styled`\n\n```js\nconst P = (props) =\u003e styled(\"p\", props)`\n  color: ${props.color ?? \"var(--main-color)\"};\n`;\n\n\u003cP\u003eI am blue\u003c/P\u003e\n\u003cP color=\"red\"\u003eI am red\u003c/P\u003e;\n```\n\n### Add rules to a styled component\n\nYo ucan extend rules, not overwrite them. To overwrite them, use the conditional form with props, see below.\n\n```js\nconst B = (props) =\u003e (\n  \u003cP\n    color=\"midnightblue\"\n    class={css`\n      background-color: bisque;\n    `}\n  \u003e\n    {props.children}\n  \u003c/P\u003e\n);\n\n\u003cB\u003e A bisqued \"P\"\u003c/B\u003e;\n```\n\n### Conditional classes\n\nTake CSS rules in the form of the object below:\n\n```js\nconst styles = (props) =\u003e {\n  base: `\n    cursor: pointer;\n    font-size: ${props.size ?? 1}em;\n    border-radius: 0.3em;\n    padding: 0.3em;\n  `,\n  danger: `\n    color: red;\n    animation: ${rescale} 1s ease infinite;\n  `,\n  disabled: `\n    pointer-events: none;\n    opacity: ${props.opacity};\n  `;\n}\n```\n\nYou can do:\n\n```js\nconst Btn = (props) =\u003e\n  styled(\"button\", props)`\n    ${styles(props).root +\n    (props.danger ? styles(props).danger : \"\") +\n    (props.disabled ? styles(props).disabled : \"\")}\n  `;\n```\n\nAlternatively, when you use the boject above, then the `styled` primitive merges the styles from the props. In other words, with:\n\n```jsx\nconst Button = (props) =\u003e styled(\"button\", props)`\n  ${styles(props).base}\n  ${styles(props)}\n`;\n```\n\nyou can do:\n\n```jsx\n// the 1st version:\n\u003cBtn size={2} onClick={()=\u003e alert('hi')}\u003eBase size 2\u003c/Btn\u003e\n\u003cBtn danger=\"true\"\u003eDanger\u003c/Btn\u003e\n\n//or the second version\n\u003cButton\u003eBase Button\u003c/Button\u003e\n\u003cButton\n  danger=\"true\"\n  disabled\n  size={1.5}\n  className={css`\n    box-shadow: 6px -6px bisque;\n  `}\n\u003e\n  Shadowed Danger\n\u003c/Button\u003e;\n```\n\n### Reactive style of a component\n\n```js\nconst [size, setSize] = createSignal(1)\n\n\nconst Dyn = (props) =\u003e {\n  const size = () =\u003e props.size || 1;\n  return (\n    \u003cdiv style={{ \"font-size\": `${size()}em` }}\u003e{props.children}\u003c/div\u003e\n  );\n};\n\n\u003cinput type=\"number\" value={size()} onchange={e =\u003e setSize(e.target.value)} /\u003e\n\u003cDyn size={size()}\u003eDynamic\u003c/Dyn\u003e\n```\n\n### Animations with `keyframes`\n\n```js\nconst rescale = keyframes`\n0% {transform: scale(0.5)}\n100% {transform: scale(1)}\n`;\n\nconst AnimSurf = (props) =\u003e styled(\"span\", props)`\n  font-size: ${props.size}em;\n  animation: ${rescale} 2s ease infinite;\n`;\n\n\u003cAnimSurf size={3}\u003e🏄\u003c/AnimSurf\u003e;\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrean%2Fsolid-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndrean%2Fsolid-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndrean%2Fsolid-css/lists"}