cssthis

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 24 Open GitHub ↗

📦 It is a small library to work component styles intelligently, quickly and intuitively without leaving css.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Cssthis

Esta 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**.

This 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**.

## Installation

The installation depends on your development environment.

| Type | Package | Github | Install |
|:--------|:---------|:--------|:---------|
| **Rollup** | [link](https://www.npmjs.com/package/rollup-plugin-cssthis) | [link](https://github.com/uppercod/rollup-plugin-cssthis) | `yarn add -D rollup-plugin-cssthis` |
| **Parceljs** | [link](https://www.npmjs.com/package/parcel-plugin-cssthis) | [link](https://github.com/UpperCod/parcel-plugin-cssthis) | `yarn add -D parcel-plugin-cssthis` |
| **Preact** | [link](https://www.npmjs.com/package/cssthis) | [link](https://github.com/UpperCod/cssthis) | `yarn add cssthis` |
| **React** | [link](https://www.npmjs.com/package/cssthis-react) | [link](https://github.com/UpperCod/cssthis-react) | `yarn add cssthis-react` |

The documentation of **cssthis** and **cssthis-react** is the same, since there are no differences in use.

```js
/** preact **/
import {style,Theme} from "cssthis"
/** React **/
import {style,Theme} from "cssthis-react"
```

## Motivation

Today there are multiple tools to manage the style within components based on **JSX**, these manage to solve the problem, but generate additional ones:

* An additional burden on the client, due to the excessive size of these libraries.

* 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.

Cssthis, 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**.

Cssthis is simple, for example if your style sheet was the following.

```css
:this{
  width : 100px;
  height : 100px;
  background:black;
}
```

This would be printed in the browser by cssthis looking like this:

```css
._rQH{
  width : 100px;
  height:100px;
  background:black;
}
```

> **._rQH** is generated randomly, Cssthis ensures that the name of the class does not exist previously defined in the document.

## Ecosystem

Cssthis 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**.

### Bundle

#### 1. Get the style sheet
```css
:this{
  width: 100px;
  height: 100px;
  background: this(primary);
}
```
#### 2. Generate the template string, through postcss
```js
`.${props.cn}{
  width: 100px;
  height: 100px;
  background: ${props.cn};
}`
```

#### 3. Generate a template function, using the bundle tool in the css export.

```js
(props)=>`.${props.cn}{
  width: 100px;
  height: 100px;
  background: black;
}`
```

> 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.

### Component

For style management in the browser, you should work based on:

```js
import {Theme,style} from "cssthis";
```
* `style( tag:string, props?:Object ):Function` : This function creates a component that has access to the unique class name assigned to the style.
* `Theme` : This component allows modifying the base properties with which the style is defined when using the `style` function.

### Example

suppose we have a component based on **preact**, with the following characteristics.

```
components/button
├─── style.this.css
└─── index.js
```

#### components/button/index.js

Below 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.

```js
import {h} from "preact";
import css from "./style.this.css";
import {style} from "cssthis";

export default style("button")(css)
```

> Now a single must make use of the component.

``` js
import Button from "./components/button";

<Button>button!<Button>
```

## Cssthis style

### Introduction

This function allows you to create a component container type that has access to the random class, generated by cssthis.

```js
import {style} from "cssthis";
import css from "./style.this.css";

export default style(
   //tagName
   "div",
   //props,
   {
       primary : "black"
   }

)(
   css
);

```

The arguments that this function receives are:

* **tagName**: {String} the container component will be a specific element based on this variable.
* **props**: [Object] the component can access the properties given by this object.

### External variables

The second argument of style, is an object, this allows to share variables with the css, the following example shows how to use those variables.

```css
:this{
   background : this(primary);
}
```
> 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

###  Multiple styles

The 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.

```js
import {style} from "cssthis";
import cssHeader from "./header.this.css";
import cssAside from "./aside.this.css";
import cssBody from "./body.this.css";
import cssFooter from "./footer.this.css";

export default style(
   "div"
)([
   cssHeader,
   cssAside,
   cssBody,
   cssFooter
]);

```

## Cssthis Theme

### Introduction

This component allows you to create contexts that modify or grant additional properties to the CSS.

You can use `this(<property>)`, to get the property given by `Theme`.

```css
:this{
   background : this(primary);
}
```

The definitions of properties to share with the css, are achieved simply by defining them as properties of the `Theme` component

```js
import css from "./style.this.css";
import {Theme,style} from "cssthis";

let Button = style("button",{primary:"teal"})(css);

/** reander **/
<div>
   <Button>color teal</Button>
   <Theme primary="crimson">
       <Button>color crimson</Button>
   </Theme>
</div>

```

> The `Theme` component creates a context that extends the default context, when creating the` Button` component.

### Lifecycle

If the `Theme` component is removed from the document, it will remove all the styles associated with it, avoiding the overwriting of styles.

## Selector :this

This 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

### Selection by attribute

You can apply conditional styles only to certain attributes

```css
/** option 1**/
:this([src]){}
/** option 2**/
:this[src]{}
```

### Selection by multiple attributes

By using `: this (<selectors>)`, you can create a multiple selection.

```css
/** option 1**/
:this([src], [title]){}
/** option 2**/
:this[src],
:this[title]{}
```

### Selection by conditional attribute

You can apply additional selectors, which are concatenated to each selector given to **:this**

```css
/** option 1**/
:this([src], [title]):not([alt]){}
/** option 2**/
:this[src]:not([alt]){}
:this[title]:not([alt]){}
```

### Selectors by pattern

```css
/** option 1**/
:this([src*=.jpg]){}
/** option 2**/
:this[src*=.jpg]{}
```

### Selector by state

```css
:this:checked{}
```

### Selector by class accompaniment

```css
/** option 1**/
:this(.my_class){}
/** option 2**/
:this.my_class{}
```

### Selector by tagName

Using 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.
```css
:this(button){}
```

### Selector by context

Any style that is defined will be covered by `:this` with the exception of the selectors that use `:global`.

```css
.button{}
/** It is equivalent to **/
:this .button{}
```

### Context keyframes

these are also prefixed by `:this`, so the animation created will only work within the component.

```css
.circle{
 animation : move 1s alternate infinite;
}

@keyframes move{
 0%{ transform: translate(0px,0px) }
 100%{ transform: translate(100px,100px) }
}
```

### Property context

Using the second argument given to `style`, you can share properties to the style sheet and use it by using `this(property)`.

```css
button{
 background : this(primary);
 padding : this(paddingTop) this(paddingLeft);
}
```

```js
import css from "./style.this.css";
import {style} from "cssthis";

export default style("div",{
 primary : "black",
 paddingTop : "10px",
 paddingLeft : "20px"
})
```

## Selector :global

If you want to generate styles that escape the context of `: this` you should use the`: global` selector.

### Individual selection

```css
:globa body{}
```

### Multiple choice

```css
:globa(h1,h2,h3,h4,h5,h6){}
```

cssthis

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README