{"id":18358801,"url":"https://github.com/uppercod/root-css","last_synced_at":"2026-03-14T21:31:20.668Z","repository":{"id":113251502,"uuid":"132673273","full_name":"UpperCod/root-css","owner":"UpperCod","description":"this repository is replaced by CSSTHIS","archived":false,"fork":false,"pushed_at":"2018-05-26T22:51:33.000Z","size":92,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-25T20:07:26.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/UpperCod/cssthis","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/UpperCod.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":"2018-05-08T22:48:45.000Z","updated_at":"2024-01-03T15:27:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"7dee3026-319b-4ac3-abe8-fb09713561b6","html_url":"https://github.com/UpperCod/root-css","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"8b0390d19b56be61020a5ac48a64b040fec87adc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/UpperCod/root-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Froot-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Froot-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Froot-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Froot-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/root-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Froot-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260944882,"owners_count":23086908,"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":[],"created_at":"2024-11-05T22:19:33.022Z","updated_at":"2025-10-16T15:31:45.795Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# root-css\n\nRoot css is a small library inspired by css-module, root-css manages to isolate its style by creating unique classnames for each component created with **preact**\n\n\n## Ejemplo\n\nRoot exploits the potential of bundler tools, such as **rollup**.\n\nThe following example shows how an environment based on **root-css**, **rollup** y **preact**.\n\n\u003e I could see the code of this example in [/example](https://github.com/UpperCod/root-css/tree/master/example)\n\n\nIn the attached link you can see more configuration parameters for [rollup-root-css](https://github.com/UpperCod/transform-root-css/tree/master/libs)\n\n### /example\n\n```cmd\n/example\n├───components\n│   └───title\n│       ├───style.root.css\n│       └───index.js\n├───style.root.js\n├───index.js\n└───rollup.config.js\n```\n\n### /example/components/title/style.root.css\n\n```css\n:root {\n   font-size: 30px;\n   \u0026[size=small] {\n       font-size: 10px;\n   }\n   \u0026[size=medium] {\n       font-size: 20px;\n   }\n}\n```\n\n\u003e Please note that root allows to use the attribute selectors, this is the way the `:root` selector communicates with the component.\n\n### /example/components/title/index.js\n\n```js\nimport rules from \"./style.root.css\";\nimport { style } from \"root-css\";\n\nexport default style(\"div\")(rules);\n```\n\nThe **style** function within **root-css** will create a component, which allows you to isolate and print the style in the document.\n\n### /example/index.js\n\n```js\nimport { h, render } from \"preact\";\nimport { style } from \"root-css\";\nimport rules from \"./style.root.css\";\nimport Title from \"./components/title\";\n\nlet Layout = style(\"main\")(rules);\n\nrender(\n   \u003cLayout\u003e\n       \u003cTitle\u003enormal\u003c/Title\u003e\n       \u003cTitle size=\"small\"\u003esmall\u003c/Title\u003e\n       \u003cTitle size=\"medium\"\u003emedium\u003c/Title\u003e\n   \u003c/Layout\u003e,\n   document.body\n);\n```\n\nthe above is the simple way to explain and see how to use **root-css**.\n\n## `style(string tagName[,object root]) : function `\n\nThis function allows you to create a pre-instance configuration of a component, the return function receives as a first argument the rules to be used within the component.\n\n```js\nimport rules from \"./style.root.css\";\nimport { style } from \"root-css\";\n\nexport default style(\"div\",{\n   primary : \"crimson\"\n})(rules);\n```\n\n## Selectors and properties\n\n### `:global`\n\nThe `:global` selector that allows generating global styles in the document.\n\n```css\n:global body{\n   font-family : \"arial\";\n}\n```\n\n### `root(\u003cproperty\u003e)`\n\nAllows you to print properties of the root object given as an argument to the template function\n\n```css\n:root{\n   color : root(primary);\n}\n```\n\n## `\u003cTheme/\u003e`\n\nthe second argument given to the style function `style(string tagName [, object root])`, **root** is an object that allows properties to be transferred to the template function. You can modify the default properties by using the **Theme** component.\n\n```js\nimport ...\nrender(\n   \u003cTheme primary=\"orange\"\u003e\n       \u003cLayout\u003e\n           \u003cTitle\u003eHello!\u003c/Title\u003e\n       \u003c/Layout\u003e\n   \u003c/Theme\u003e,\n   document.body\n)\n```\n\n\u003e In the previous example, if title had the default property defined inside the ** root ** object, the **Theme** component will replace this property with \"orange\", but this replacement applies only to the context within **Theme**.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Froot-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Froot-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Froot-css/lists"}