https://github.com/uppercod/cssthis-parse
Is a way to write component-oriented styles, transform your style into a template string for creating functions
https://github.com/uppercod/cssthis-parse
Last synced: about 1 year ago
JSON representation
Is a way to write component-oriented styles, transform your style into a template string for creating functions
- Host: GitHub
- URL: https://github.com/uppercod/cssthis-parse
- Owner: UpperCod
- Created: 2018-07-13T20:40:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-11T21:54:15.000Z (almost 8 years ago)
- Last Synced: 2025-03-22T00:44:20.118Z (about 1 year ago)
- Language: JavaScript
- Size: 66.4 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```css
:this{
font-size: 30px;
}
```
### Departure
```css
${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
```js
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
```css
/*----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
```css
/*----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
```css
/*----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
```css
/*----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
```css
/*----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
```css
/*----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
```css
/*----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.
```css
/*----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.
```css
/*----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
```css
/*----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**
```css
/*----input----*/
button{
color : this(primary);
}
/*----output----*/
.${props.id} button{
color : ${props.primary};
}
```