cssthis-parse

Is a way to write component-oriented styles, transform your style into a template string for creating functions.

This is done by defragmenting the css using postcss

Cssthis, now also accepts :host, as alias for :this.

Entry

:this{
   font-size: 30px;
}

Departure

${prop.id}{
   font-size: 30px;
}

Why :this ?

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

Instance

import parse from "cssthis-parse";
import autoprefixer from "autoprefixer";
 
 
let plugins = [autoprefixer()];
 
parse(plugins)(`
   :this{
       width : 200px;
       height : 200px;
   }
`).then((css)=>{
   console.log(css)
   /**
   .${props.id}{
        width : 200px;
        height : 200px;
   }
   */
}).catch((error)=>{
   console.log(error)
})
 

:this

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

Example 1

If :this is used as a function, it will create a list of selectors based on the given arguments

/*----input----*/
:this(h1){
   color : black;
}
/*----output----*/
h1.${props.id}{
   color : black;
}

Example 2

the following example shows how :this can receive more than one argument regardless of its type

/*----input----*/
:this(h1,h2,h3){
   color : black;
}
/*----output----*/
h1.${props.id},
h2.${props.id},
h3.${props.id}{
   color : black;
}

Example 3

You can also make :this act only if it is accompanied by the given class as an argument

/*----input----*/
:this(.primary){
   color : black;
}
/*----output----*/
.${props.id}.primary{
   color : black;
}

example 4

You can also make :this act only when accompanied by one or more attributes

/*----input----*/
:this([large]){
   width : 100%;
}
/*----output----*/
.${props.id}[large]{
   width : 100%;
}

Example 5

searches by attribute and class also work without the need to use parentheses

/*----input----*/
:this[large]{
   width : 100%;
}
/*----output----*/
.${props.id}[large]{
   width : 100%;
}

Example 6

One of the advantages of using parentheses is that the selection by attribute is iterated until they are all completed

/*----input----*/
:this(h1,h2):not([large]){
   width : 50%;
}
/*----output----*/
h1.${props.id}:not([large]),
h2.${props.id}:not([large]){
   width : 50%;
}

: this and the context

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

Example 1

The following example shows the effect that :this has on the button selector

/*----input----*/
button{
   font-size : 20px;
}
/*----output----*/
.${props.id} button{
   font-size : 20px;
}

Example 2

in the following example it is taught that it has the same effect within the alrule @media, :this will always put its context first.

/*----input----*/
@media (max-width: 300px){
   button{
       font-size : 20px;
   }
}
/*----output----*/
@media (max-width: 300px){
   .${props.id} button{
       font-size : 20px;
   }
}

Example 3

when working with keyframes again :this prefixes its context, adding the variable to each animation name only within the context.

/*----input----*/
button{
   animation : move 1s ease all;
}
@keyframes move{
   0%{
       transform : translate(0px,0px);
   }
   100%{
       transform : translate(100px,100px);
   }
}
/*----output----*/
.${props.id} button{
   animation : ${props.cn}-move 1s ease all;
}
@keyframes ${props.cn}-move{
   0%{
       transform : translate(0px,0px);
   }
   100%{
       transform : translate(100px,100px);
   }
}

:global

using :global you can avoid using the context on the selector, it is useful to generate global classes

/*----input----*/
:global button{
   font-size : 20px;
}
/*----output----*/
button{
   font-size : 20px;
}

Using global button has been defined as a global rule, escaping the context of :this

this in properties

You can also use this to use properties within the argument prop

/*----input----*/
button{
  color : this(primary);
}
/*----output----*/
.${props.id} button{
    color : ${props.primary};
}