{"id":13725811,"url":"https://github.com/sadick254/scoped-style","last_synced_at":"2025-04-14T08:37:40.714Z","repository":{"id":143907697,"uuid":"149152667","full_name":"sadick254/scoped-style","owner":"sadick254","description":"A tiny css in js library 🚀","archived":false,"fork":false,"pushed_at":"2020-09-09T15:07:30.000Z","size":336,"stargazers_count":137,"open_issues_count":3,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-25T10:41:49.405Z","etag":null,"topics":["css","css-in-js","hyperapp","inferno","inferno-js","javascript","preact","react","styled-components","tiny","universal"],"latest_commit_sha":null,"homepage":"","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/sadick254.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}},"created_at":"2018-09-17T16:09:54.000Z","updated_at":"2023-05-23T17:02:02.000Z","dependencies_parsed_at":"2024-01-27T11:44:31.219Z","dependency_job_id":"d651af15-c3ee-448f-8453-371aeff02c90","html_url":"https://github.com/sadick254/scoped-style","commit_stats":null,"previous_names":["sadick254/scoped-css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadick254%2Fscoped-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadick254%2Fscoped-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadick254%2Fscoped-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sadick254%2Fscoped-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sadick254","download_url":"https://codeload.github.com/sadick254/scoped-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248847026,"owners_count":21171076,"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","hyperapp","inferno","inferno-js","javascript","preact","react","styled-components","tiny","universal"],"created_at":"2024-08-03T01:02:36.097Z","updated_at":"2025-04-14T08:37:40.673Z","avatar_url":"https://github.com/sadick254.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Scoped Style\n\nScoped style is a next gen tiny css-in-js library to help you style your components. Use the full power of css that you are used to.\n\n## Works With\n\n- [React](https://reactjs.org/)\n- [Preact](https://preactjs.com/)\n- [Hyperapp](https://github.com/jorgebucaran/hyperapp)\n- [Inferno](https://infernojs.org/)\n\n## Installation\n\n```cmd\nnpm i scoped-style\n// or\nyarn add scoped-style\n```\n\n## Usage\n\n```javascript\nimport scoped from 'scoped-style';\n\n// for react\nimport React from 'react';\nconst styled = scoped(React.createElement);\n//\n\n// for Preact\nimport { h } from 'preact';\nconst styled = scoped(h);\n//\n\n// for Hyperapp\nimport { h } from 'hyperapp';\nconst styled = scoped(h);\n//\n\n// for Infernojs\nimport { createElement } from 'inferno-create-element';\nconst styled = scoped(createElement);\n//\n\n// define global css\nstyled.global`\n  * {\n    margin: 0;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\n// and scoped css\nconst Button = styled('button')`\n  background: ${props =\u003e (props.primary ? 'orange' : 'gray')};\n  border: none;\n  border-radius: 2px;\n  :hover,\n  :focus,\n  :active {\n    padding: 10px;\n  }\n  @media screen and (max-width: 640px) {\n    background: blue;\n    :hover,\n    :focus,\n    :active {\n      padding: 5px;\n    }\n  }\n`;\n\n// keyframes\nconst spin = styled.keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nconst Loader = styled('div')`\n  border: 3px solid hsla(185, 100%, 62%, 0.2);\n  border-top-color: #3cefff;\n  border-radius: 50%;\n  width: 2em;\n  height: 2em;\n  animation: ${() =\u003e spin} 1s linear infinite;\n`;\n\n// styling children\nconst BlueChildren = styled('div')`\n  \u003e * {\n    color: blue;\n  }\n`;\n\nconst App = ({ children }) =\u003e (\n  \u003cdiv\u003e\n    \u003cButton primary\u003eLogin\u003c/Button\u003e\n    \u003cLoader /\u003e\n    \u003cBlueChildren\u003e{children}\u003c/BlueChildren\u003e\n  \u003c/div\u003e\n);\n\n// Your rendering code\n```\n\n## Support and limitations\n\n### Combinators\n\nSupported :\n\n- [Adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) : `+`\n- [General sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) : `~`\n- [Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) : `\u003e`\n\nNot supported :\n\n- [Descendant combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)\n- [Column combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator)\n\n### Selectors\n\nSelectors must be used in with a combinator.\n\nWe support them all :\n\n- [Type selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)\n- [Class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors)\n- [ID selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors)\n- [Universal selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors)\n- [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)\n\n### Pseudo selectors\n\nWe support them all.\n\nWarning, if you are using the `content` property : special characters (like `◀`) are not suppoted, you must convert them (via [http://enc.joyho.net/](http://enc.joyho.net/) for example) and it will work (`content: \"\\\\25C0\";`).\n\n## Questions, bugs and feature requests\n\nYou have a question about usage, feel free to open an issue.\n\nYou found a bug, feel free to open an issue.\n\nYou've got a feature requests, feel free to open an issue.\n\n## Advanced example : radio button, checkbox\n\n```javascript\nconst Label = styled('label')`\n  position: relative;\n  padding-left: 2rem;\n  padding-right: 0.75rem;\n  margin-bottom: 0.75rem;\n  cursor: pointer;\n  font-size: 1rem;\n  user-select: none;\n\n  \u003e input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n  }\n\n  \u003e input[type='checkbox'] ~ span {\n    position: absolute;\n    top: 0.2rem;\n    left: 0;\n    height: 1rem;\n    width: 1rem;\n    background-color: #eee;\n  }\n\n  \u003e input[type='radio'] ~ span {\n    position: absolute;\n    top: 0.2rem;\n    left: 0;\n    height: 1rem;\n    width: 1rem;\n    background-color: #eee;\n    border-radius: 50%;\n  }\n\n  :hover \u003e input ~ span {\n    background-color: #ccc;\n    transition: 0.2s;\n  }\n\n  \u003e input:checked ~ span {\n    background-color: #0080b3;\n  }\n\n  :active \u003e span {\n    transform: scale(0);\n  }\n\n  \u003e span:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  \u003e input:checked ~ span:after {\n    display: block;\n  }\n\n  \u003e input[type='checkbox'] ~ span:after {\n    left: 0.25rem;\n    top: 0.05rem;\n    width: 0.25rem;\n    height: 0.6rem;\n    border: solid white;\n    border-width: 0 0.2rem 0.2rem 0;\n    transform: rotate(45deg);\n  }\n\n  \u003e input[type='radio'] ~ span:after {\n    left: 0.3rem;\n    top: 0.3rem;\n    width: 0.4rem;\n    height: 0.4rem;\n    border-radius: 50%;\n    background: white;\n  }\n`;\n\nconst Radio = ({ name, checked, onChange }) =\u003e (\n  \u003cLabel\u003e\n    {name}\n    \u003cinput type=\"radio\" checked={checked} onChange={onChange} /\u003e\n    \u003cspan\u003e\u003c/span\u003e\n  \u003c/Label\u003e\n);\n\nconst Checkbox = ({ name, checked, onChange }) =\u003e (\n  \u003cLabel\u003e\n    {name}\n    \u003cinput type=\"checkbox\" checked={checked} onChange={onChange} /\u003e\n    \u003cspan\u003e\u003c/span\u003e\n  \u003c/Label\u003e\n);\n```\n\n## Scoped function second parameter\n\n```javascript\nimport scoped from 'scoped-style';\n```\n\n`scoped` can take a second parameter : a callback who \"render\" the css generated by `styled` function.\n\nThe default callback is exported via `scoped.defaultCallback`.\n\n### SSR example\n\nClient :\n\n```javascript\nimport { createElement } from 'inferno-create-element';\nimport scoped from './scoped-style';\n\nif (typeof global !== 'undefined') {\n  global.scopedStyleCSS == '';\n}\n\nconst styler = css =\u003e {\n  if (typeof document !== 'undefined') {\n    scoped.defaultCallback(css);\n  } else if (typeof global !== 'undefined') {\n    global.scopedStyleCSS += css;\n  }\n};\n\nexport const styled = scoped(createElement, styler);\n```\n\nServer :\n\n```javascript\napp.get('*', (req, res) =\u003e {\n  // first render the root component to string via the SSR function of your framework\n  const content = renderToString(\u003cApp {...props} /\u003e);\n  res.send(`\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n\n    \u003chead\u003e\n      \u003cmeta name=\"viewport\" content=\"width=device-width, height=device-height, initial-scale=1\"\u003e\n      \u003cmeta content=\"text/html; charset=utf-8\"\u003e\n      \u003ctitle\u003e\n        Citral\n      \u003c/title\u003e\n      \u003cstyle type=\"text/css\"\u003e\n        ${global.scopedStyleCSS /* then use the generated styles string */}\n      \u003c/style\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n      ${content}\n      \u003cscript type=\"text/javascript\" src=\"${fs\n        .readdirSync(path.join(__dirname, 'client'))\n        .find(file =\u003e /^[a-z0-9]+\\.bundle\\.js$/.test(file))}\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\n    \u003c/html\u003e\n  `);\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadick254%2Fscoped-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsadick254%2Fscoped-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsadick254%2Fscoped-style/lists"}