{"id":20129355,"url":"https://github.com/ryanmorr/csscope","last_synced_at":"2025-04-09T16:10:17.908Z","repository":{"id":36574321,"uuid":"228699240","full_name":"ryanmorr/csscope","owner":"ryanmorr","description":"A simple and lightweight scoped CSS solution","archived":false,"fork":false,"pushed_at":"2024-10-22T16:21:08.000Z","size":678,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T16:09:55.166Z","etag":null,"topics":["css","javascript","scoped-css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanmorr.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":"2019-12-17T20:49:59.000Z","updated_at":"2024-10-22T16:21:13.000Z","dependencies_parsed_at":"2024-10-23T00:09:37.475Z","dependency_job_id":null,"html_url":"https://github.com/ryanmorr/csscope","commit_stats":{"total_commits":44,"total_committers":2,"mean_commits":22.0,"dds":"0.20454545454545459","last_synced_commit":"07bc85552f6f52900bb1d7ce3856d3946a12e702"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcsscope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcsscope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcsscope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcsscope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanmorr","download_url":"https://codeload.github.com/ryanmorr/csscope/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065283,"owners_count":21041871,"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","javascript","scoped-css"],"created_at":"2024-11-13T20:33:48.778Z","updated_at":"2025-04-09T16:10:17.892Z","avatar_url":"https://github.com/ryanmorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# csscope\n\n[![Version Badge][version-image]][project-url]\n[![License][license-image]][license-url]\n[![Build Status][build-image]][build-url]\n\n\u003e A simple and lightweight scoped CSS solution\n\n## Install\n\nDownload the [CJS](https://github.com/ryanmorr/csscope/raw/master/dist/cjs/csscope.js), [ESM](https://github.com/ryanmorr/csscope/raw/master/dist/esm/csscope.js), [UMD](https://github.com/ryanmorr/csscope/raw/master/dist/umd/csscope.js) versions or install via NPM:\n\n``` sh\nnpm install @ryanmorr/csscope\n```\n\n## Usage\n\nProvide a unique ID and CSS as a string and get a transformed CSS string with the unique ID inserted as an attribute selector for each CSS selector sequence. It supports media queries, including prefixing keyframe and animation names, and deep combinators (`\u003e\u003e\u003e`) to add styles targeting child components. For example:\n\n```javascript\nimport csscope from '@ryanmorr/csscope';\n\nconst css = csscope('foo', `\n    .foo {\n        animation: grow 3s linear 1s infinite running;\n    }\n\n    .bar + [attr=value], :empty {\n        background-color: red;\n    }\n\n    .component \u003e\u003e\u003e .sub-component {\n        margin-bottom: 1em;\n    }\n\n    @media screen and (max-width: 480px) {\n        .foo {\n            color: red;\n        }\n    }\n\n    @keyframes grow {\n        from {\n            width: 0;\n            height: 0\n        }\n\n        to {\n            width: 100px;\n            height: 100px\n        }\n    }\n`);\n```\n\nGenerates the following CSS as a string:\n\n```css\n.foo[foo] {\n    animation: foo-grow 3s linear 1s infinite running;\n}\n\n.bar[foo] + [foo][attr=value], [foo]:empty {\n    background-color: red;\n}\n\n.component[foo] .sub-component {\n    margin-bottom: 1em;\n}\n\n@media screen and (max-width: 480px) {\n    div[foo] {\n        color: red;\n    }\n}\n\n@keyframes foo-grow {\n    from {\n        width: 0;\n    }\n\n    to {\n        width: 100%;\n    }\n}\n```\n\nUse the transformed CSS string to create a stylesheet client-side or server-side. To apply those styles to a DOM tree (component), add the unique ID as an attribute to every element in a DOM tree that should be influenced by the scoped styles.\n\n**Beware of descandant selectors for recursive components!** For a CSS rule with the selector \".foo .bar\", if the \".foo\" element contains a recursive child component, than all \".bar\" elements in that child component will be matched by the rule.\n\n## License\n\nThis project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).\n\n[project-url]: https://github.com/ryanmorr/csscope\n[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/csscope?color=blue\u0026style=flat-square\n[build-url]: https://github.com/ryanmorr/csscope/actions\n[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/csscope/node.js.yml?style=flat-square\n[license-image]: https://img.shields.io/github/license/ryanmorr/csscope?color=blue\u0026style=flat-square\n[license-url]: UNLICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fcsscope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanmorr%2Fcsscope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fcsscope/lists"}