{"id":18358816,"url":"https://github.com/uppercod/cssthis-parse","last_synced_at":"2025-04-06T13:31:38.305Z","repository":{"id":113250706,"uuid":"140891106","full_name":"UpperCod/cssthis-parse","owner":"UpperCod","description":"Is a way to write component-oriented styles, transform your style into a template string for creating functions","archived":false,"fork":false,"pushed_at":"2018-09-11T21:54:15.000Z","size":68,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T00:44:20.118Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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-07-13T20:40:26.000Z","updated_at":"2018-09-11T21:54:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"659ee275-919e-40ce-9075-8d1387deb585","html_url":"https://github.com/UpperCod/cssthis-parse","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"55b50dcddbbf95acc0f30f7a85b50c7de4e01b48"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis-parse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis-parse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis-parse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis-parse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/cssthis-parse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247488536,"owners_count":20946957,"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:36.115Z","updated_at":"2025-04-06T13:31:38.285Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cssthis-parse\n\nIs a way to write component-oriented styles, transform your style into a template string for creating functions.\n\nThis is done by defragmenting the css using **postcss**\n\n\u003e Cssthis, now also accepts **:host**, as alias for **:this**. \n\n### Entry\n\n```css\n:this{\n   font-size: 30px;\n}\n```\n\n### Departure\n\n```css\n${prop.id}{\n   font-size: 30px;\n}\n```\n\n\n## Why :this ?\n\n**:this** is not a reserved word of the css language, it is not like **:host**, **:root** or **:scope**, these have a neutral definition for the css, and The goal of **:this** is not to clash with the evolution of language.\n\n## Instance\n\n```js\nimport parse from \"cssthis-parse\";\nimport autoprefixer from \"autoprefixer\";\n\n\nlet plugins = [autoprefixer()];\n\nparse(plugins)(`\n   :this{\n       width : 200px;\n       height : 200px;\n   }\n`).then((css)=\u003e{\n   console.log(css)\n   /**\n   .${props.id}{\n        width : 200px;\n        height : 200px;\n   }\n   */\n}).catch((error)=\u003e{\n   console.log(error)\n})\n\n```\n\n## :this\n\n**:this** allows you to point to the root class of the context, by using the variable `prop`, for **:this** the root class will be defined by `prop.id`.\n\n\n\n### Example 1\n\nIf **:this** is used as a function, it will create a list of selectors based on the given arguments\n\n```css\n/*----input----*/\n:this(h1){\n   color : black;\n}\n/*----output----*/\nh1.${props.id}{\n   color : black;\n}\n```\n\n### Example 2\nthe following example shows how **:this** can receive more than one argument regardless of its type\n\n```css\n/*----input----*/\n:this(h1,h2,h3){\n   color : black;\n}\n/*----output----*/\nh1.${props.id},\nh2.${props.id},\nh3.${props.id}{\n   color : black;\n}\n```\n\n### Example 3\nYou can also make **:this** act only if it is accompanied by the given class as an argument\n\n```css\n/*----input----*/\n:this(.primary){\n   color : black;\n}\n/*----output----*/\n.${props.id}.primary{\n   color : black;\n}\n```\n\n### example 4\nYou can also make **:this** act only when accompanied by one or more attributes\n\n```css\n/*----input----*/\n:this([large]){\n   width : 100%;\n}\n/*----output----*/\n.${props.id}[large]{\n   width : 100%;\n}\n```\n\n### Example 5\nsearches by attribute and class also work without the need to use parentheses\n\n```css\n/*----input----*/\n:this[large]{\n   width : 100%;\n}\n/*----output----*/\n.${props.id}[large]{\n   width : 100%;\n}\n```\n\n### Example 6\nOne of the advantages of using parentheses is that the selection by attribute is iterated until they are all completed\n\n```css\n/*----input----*/\n:this(h1,h2):not([large]){\n   width : 50%;\n}\n/*----output----*/\nh1.${props.id}:not([large]),\nh2.${props.id}:not([large]){\n   width : 50%;\n}\n```\n\n##: this and the context\n\ndefault **:this** points only to the root of the context, but it must be understood that the whole context is governed by **:this**, so that you generate styles outside of **:this** continue belonging to the context.\n\n### Example 1\nThe following example shows the effect that **:this** has on the button selector\n\n```css\n/*----input----*/\nbutton{\n   font-size : 20px;\n}\n/*----output----*/\n.${props.id} button{\n   font-size : 20px;\n}\n```\n\n### Example 2\n\nin the following example it is taught that it has the same effect within the alrule @media, **:this** will always put its context first.\n\n```css\n/*----input----*/\n@media (max-width: 300px){\n   button{\n       font-size : 20px;\n   }\n}\n/*----output----*/\n@media (max-width: 300px){\n   .${props.id} button{\n       font-size : 20px;\n   }\n}\n```\n\n### Example 3\nwhen working with keyframes again **:this** prefixes its context, adding the variable to each animation name only within the context.\n\n```css\n/*----input----*/\nbutton{\n   animation : move 1s ease all;\n}\n@keyframes move{\n   0%{\n       transform : translate(0px,0px);\n   }\n   100%{\n       transform : translate(100px,100px);\n   }\n}\n/*----output----*/\n.${props.id} button{\n   animation : ${props.cn}-move 1s ease all;\n}\n@keyframes ${props.cn}-move{\n   0%{\n       transform : translate(0px,0px);\n   }\n   100%{\n       transform : translate(100px,100px);\n   }\n}\n```\n\n## :global\n\nusing **:global** you can avoid using the context on the selector, it is useful to generate global classes\n\n```css\n/*----input----*/\n:global button{\n   font-size : 20px;\n}\n/*----output----*/\nbutton{\n   font-size : 20px;\n}\n```\n\n\u003e Using global button has been defined as a global rule, escaping the context of **:this**\n\n## this in properties\n\nYou can also use **this** to use properties within the argument **prop**\n\n```css\n/*----input----*/\nbutton{\n  color : this(primary);\n}\n/*----output----*/\n.${props.id} button{\n    color : ${props.primary};\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fcssthis-parse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Fcssthis-parse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fcssthis-parse/lists"}