{"id":18358815,"url":"https://github.com/uppercod/cssthis","last_synced_at":"2025-04-06T13:31:38.522Z","repository":{"id":113250652,"uuid":"141048171","full_name":"UpperCod/cssthis","owner":"UpperCod","description":"📦  It is a small library to work component styles intelligently, quickly and intuitively without leaving css.","archived":false,"fork":false,"pushed_at":"2018-09-11T22:04:54.000Z","size":250,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T00:44:15.908Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://uppercod.github.io/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-07-15T18:13:38.000Z","updated_at":"2020-05-19T03:21:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"63781a26-9e4a-4991-8462-04971344cbe4","html_url":"https://github.com/UpperCod/cssthis","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"d4d49d2eface28b91f3f2838583018f9baaede7d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UpperCod%2Fcssthis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UpperCod","download_url":"https://codeload.github.com/UpperCod/cssthis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247488538,"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.098Z","updated_at":"2025-04-06T13:31:38.510Z","avatar_url":"https://github.com/UpperCod.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cssthis\n\n\nEsta es una pequeña librería de tan solo **1kbs**, para la gestión de estilos en componentes basados en JSX, se ha creado inicialmente para **Preact**, pero hoy ofrece soporte también para **React**, mediante **cssthis-react**.\n\nThis is a small library of only **1kbs**, for the management of styles in components based on **JSX**, it was created initially for **Preact**, but today it also offers support for **React**, using **cssthis-react**.\n\n## Installation\n\nThe installation depends on your development environment.\n\n| Type | Package | Github | Install |\n|:--------|:---------|:--------|:---------|\n| **Rollup** | [link](https://www.npmjs.com/package/rollup-plugin-cssthis) | [link](https://github.com/uppercod/rollup-plugin-cssthis) | `yarn add -D rollup-plugin-cssthis` |\n| **Parceljs** | [link](https://www.npmjs.com/package/parcel-plugin-cssthis) | [link](https://github.com/UpperCod/parcel-plugin-cssthis) | `yarn add -D parcel-plugin-cssthis` |\n| **Preact** | [link](https://www.npmjs.com/package/cssthis) | [link](https://github.com/UpperCod/cssthis) | `yarn add cssthis` |\n| **React** | [link](https://www.npmjs.com/package/cssthis-react) | [link](https://github.com/UpperCod/cssthis-react) | `yarn add cssthis-react` |\n\nThe documentation of **cssthis** and **cssthis-react** is the same, since there are no differences in use.\n\n\n```js\n/** preact **/\nimport {style,Theme} from \"cssthis\"\n/** React **/\nimport {style,Theme} from \"cssthis-react\"\n```\n\n\n## Motivation\n\nToday there are multiple tools to manage the style within components based on **JSX**, these manage to solve the problem, but generate additional ones:\n\n* An additional burden on the client, due to the excessive size of these libraries.\n\n* They abandon the simple thing of the css, for example, in the use of objects for the creation of styles, unnatural semantics in nests and generation of dynamic properties.\n\n\nCssthis, seeks not to abandon the css style sheet, in fact exploits the potential of the tools of **bundle** and **postcss**, to preprocess the css, managing to generate **styles with random class name**, the objective of this is to protect the css that appears inside the root selector that we call **:this**.\n\nCssthis is simple, for example if your style sheet was the following.\n\n```css\n:this{\n  width : 100px;\n  height : 100px;\n  background:black;\n}\n```\n\nThis would be printed in the browser by cssthis looking like this:\n\n```css\n._rQH{\n  width : 100px;\n  height:100px;\n  background:black;\n}\n```\n\n\u003e **._rQH** is generated randomly, Cssthis ensures that the name of the class does not exist previously defined in the document.\n\n## Ecosystem\n\nCssthis has 2 major processes, one oriented to the use of bundle tools such as **rollup**, **parceljs** or **webpack**, these manage to translate the css by ** cssthis-parse ** that exploit the potential of **postcss**.\n\n### Bundle\n\n#### 1. Get the style sheet\n```css\n:this{\n  width: 100px;\n  height: 100px;\n  background: this(primary);\n}\n```\n#### 2. Generate the template string, through postcss\n```js\n`.${props.cn}{\n  width: 100px;\n  height: 100px;\n  background: ${props.cn};\n}`\n```\n\n#### 3. Generate a template function, using the bundle tool in the css export.\n\n```js\n(props)=\u003e`.${props.cn}{\n  width: 100px;\n  height: 100px;\n  background: black;\n}`\n```\n\n\u003e How cssthis uses **Postcss** you will be able to make use of the greater amount of utilities that this offers like **Autoprefixer**, **Cssnano** and more.\n\n### Component\n\nFor style management in the browser, you should work based on:\n\n```js\nimport {Theme,style} from \"cssthis\";\n```\n* `style( tag:string, props?:Object ):Function` : This function creates a component that has access to the unique class name assigned to the style.\n* `Theme` : This component allows modifying the base properties with which the style is defined when using the `style` function.\n\n### Example\n\nsuppose we have a component based on **preact**, with the following characteristics.\n\n```\ncomponents/button\n├─── style.this.css\n└─── index.js\n```\n\n#### components/button/index.js\n\nBelow is how a component using cssthis is composed, please note the use of the **style** function, this creates a component that contains the predefined random class to use.\n\n```js\nimport {h} from \"preact\";\nimport css from \"./style.this.css\";\nimport {style} from \"cssthis\";\n\nexport default style(\"button\")(css)\n```\n\n\u003e Now a single must make use of the component.\n\n``` js\nimport Button from \"./components/button\";\n\n\u003cButton\u003ebutton!\u003cButton\u003e\n```\n\n## Cssthis style\n\n### Introduction\n\nThis function allows you to create a component container type that has access to the random class, generated by cssthis.\n\n```js\nimport {style} from \"cssthis\";\nimport css from \"./style.this.css\";\n\nexport default style(\n   //tagName\n   \"div\",\n   //props,\n   {\n       primary : \"black\"\n   }\n\n)(\n   css\n);\n\n```\n\nThe arguments that this function receives are:\n\n* **tagName**: {String} the container component will be a specific element based on this variable.\n* **props**: [Object] the component can access the properties given by this object.\n\n### External variables\n\nThe second argument of style, is an object, this allows to share variables with the css, the following example shows how to use those variables.\n\n```css\n:this{\n   background : this(primary);\n}\n```\n\u003e Note the use of `this(primary)` as a function, this will bring from the second argument given to the `style` function the **primary** property. The properties defined in the second style argument are considered as default properties, they can be replaced by using the `Theme` component\n\n\n\n\n###  Multiple styles\n\nThe css given to the function of the return can also be an array of styles, as the following example shows, each style will receive the same random class, the css will be rewritten in cascade, so that the last style will prevail over the others.\n\n```js\nimport {style} from \"cssthis\";\nimport cssHeader from \"./header.this.css\";\nimport cssAside from \"./aside.this.css\";\nimport cssBody from \"./body.this.css\";\nimport cssFooter from \"./footer.this.css\";\n\nexport default style(\n   \"div\"\n)([\n   cssHeader,\n   cssAside,\n   cssBody,\n   cssFooter\n]);\n\n```\n\n## Cssthis Theme\n\n### Introduction\n\nThis component allows you to create contexts that modify or grant additional properties to the CSS.\n\nYou can use `this(\u003cproperty\u003e)`, to get the property given by `Theme`.\n\n```css\n:this{\n   background : this(primary);\n}\n```\n\nThe definitions of properties to share with the css, are achieved simply by defining them as properties of the `Theme` component\n\n```js\nimport css from \"./style.this.css\";\nimport {Theme,style} from \"cssthis\";\n\nlet Button = style(\"button\",{primary:\"teal\"})(css);\n\n/** reander **/\n\u003cdiv\u003e\n   \u003cButton\u003ecolor teal\u003c/Button\u003e\n   \u003cTheme primary=\"crimson\"\u003e\n       \u003cButton\u003ecolor crimson\u003c/Button\u003e\n   \u003c/Theme\u003e\n\u003c/div\u003e\n\n```\n\n\u003e The `Theme` component creates a context that extends the default context, when creating the` Button` component.\n\n### Lifecycle\n\nIf the `Theme` component is removed from the document, it will remove all the styles associated with it, avoiding the overwriting of styles.\n\n\n## Selector :this\n\nThis selector gives the ability to point to the random class generated by cssthis, then it is taught how it can be used in various situations\n\n\n### Selection by attribute\n\nYou can apply conditional styles only to certain attributes\n\n```css\n/** option 1**/\n:this([src]){}\n/** option 2**/\n:this[src]{}\n```\n\n### Selection by multiple attributes\n\nBy using `: this (\u003cselectors\u003e)`, you can create a multiple selection.\n\n```css\n/** option 1**/\n:this([src], [title]){}\n/** option 2**/\n:this[src],\n:this[title]{}\n```\n\n### Selection by conditional attribute\n\nYou can apply additional selectors, which are concatenated to each selector given to **:this**\n\n```css\n/** option 1**/\n:this([src], [title]):not([alt]){}\n/** option 2**/\n:this[src]:not([alt]){}\n:this[title]:not([alt]){}\n```\n\n### Selectors by pattern\n\n```css\n/** option 1**/\n:this([src*=.jpg]){}\n/** option 2**/\n:this[src*=.jpg]{}\n```\n\n### Selector by state\n\n```css\n:this:checked{}\n```\n\n### Selector by class accompaniment\n\n```css\n/** option 1**/\n:this(.my_class){}\n/** option 2**/\n:this.my_class{}\n```\n\n### Selector by tagName\n\nUsing this type of selectors, you can generate a conditional style for different types of tagName, this is useful when creating the component using the `style` function, since you can generate multiple components using the same style base and through this Selector achieve different effects.\n```css\n:this(button){}\n```\n\n### Selector by context\n\nAny style that is defined will be covered by `:this` with the exception of the selectors that use `:global`.\n\n```css\n.button{}\n/** It is equivalent to **/\n:this .button{}\n```\n\n### Context keyframes\n\nthese are also prefixed by `:this`, so the animation created will only work within the component.\n\n```css\n.circle{\n animation : move 1s alternate infinite;\n}\n\n@keyframes move{\n 0%{ transform: translate(0px,0px) }\n 100%{ transform: translate(100px,100px) }\n}\n```\n\n### Property context\n\nUsing the second argument given to `style`, you can share properties to the style sheet and use it by using `this(property)`.\n\n```css\nbutton{\n background : this(primary);\n padding : this(paddingTop) this(paddingLeft);\n}\n```\n\n```js\nimport css from \"./style.this.css\";\nimport {style} from \"cssthis\";\n\nexport default style(\"div\",{\n primary : \"black\",\n paddingTop : \"10px\",\n paddingLeft : \"20px\"\n})\n```\n\n## Selector :global\n\nIf you want to generate styles that escape the context of `: this` you should use the`: global` selector.\n\n### Individual selection\n\n```css\n:globa body{}\n```\n\n### Multiple choice\n\n```css\n:globa(h1,h2,h3,h4,h5,h6){}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fcssthis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuppercod%2Fcssthis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuppercod%2Fcssthis/lists"}