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

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

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

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

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

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

:this{
  width: 100px;
  height: 100px;
  background: this(primary);
}

# 2. Generate the template string, through postcss

`.${props.cn}{
  width: 100px;
  height: 100px;
  background: ${props.cn};
}`

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

(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:

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.

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.

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.

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.

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

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.

: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

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

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

# Selection by multiple attributes

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

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

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

# Selectors by pattern

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

# Selector by state

:this:checked{}

# Selector by class accompaniment

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

:this(button){}

# Selector by context

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

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

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

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

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

:globa body{}

# Multiple choice

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