Señor. Stylin

, ? , . , CSS JS, “ ”. , , styled-components-. , , : “ ” . styled-system   : 

<font color="red" face="Verdana" size="+1">
    <b></b> <i> </i>?
</font>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . CSS . . , .

:

import {render} from 'react-dom'
import {Title} from './styles.scss'

render(
  <Title color='tomato' size='small'>
    Hello world!
  </Title>,
  document.getElementById('app')
)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

styles.scss

/**
  @tag: h1
  @component: Title
  size: small | medium | large
  color: #38383d --color
*/
.title {
  --color: #38383d;
  color: var(--color);
  font-size: 18px;

  &.small {
    font-size: 14px;
    margin: 2px 0;
  }
  &.medium {
    font-size: 18px;
    margin: 4px 0;
  }
  &.large {
    font-size: 20px;
    margin: 6px 0;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, :

import {Title} from './styles.scss'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

scss



! , .

, . JSDocs, CSSDocs. , .

, :

CSS type: primary | secondary | link



, , .

, , webpack loader :

npm install @stylin/style
npm install --save-dev @stylin/msa-loader
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

webpack-.

, ! , TypeScript, - . :

webpack loader .

npm install --save-dev @stylin/ts-loader
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, : “ , ?”

43 , . , . runtime , CSS . 

, .

Stylin 30% styled-components, styled-components !

JS CSS CSS , - . , , E11 .

:

componentPropertyName: default-value --css-variable

/**
  @tag: button
  @component: SexyButton
  width: 150px --btn-width
*/
.sexy-button {
  --btn-width: 150px;
  width: var(--btn-width);
}

/* JSX */
<SexyButton width='180px'>
  Love me
</SexyButton>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS , , . , - ( sandbox FS),  .

Oh, sí, casi lo olvido, cambiando el tema oscuro al claro y viceversa, notarás que toda la aplicación no se vuelve a dibujar (reaccionar render) ¡y esto es una especie de magia!

Naturalmente, es posible modificar el estilo de los componentes existentes.

import {Button} from 'antd'
import {appleStyle} from './style.scss'

// sexy-button is css-class
const StyledButton = appleStyle(`sexy-button`, Button)

<StyledButton type='dashed'>
  Love me
</StyledButton>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Con mucho gusto les contaría todas las posibilidades de esta biblioteca, pero no quiero parecer que vine aquí a PR: D. Solo estoy aquí para quitarle el dolor y escuchar sus críticas / sugerencias. ¿Puedes complacer a un balalaika para tu marco favorito como next.js o preact ?

¡Adiós a todos, ten cuidado con el reactivo y cuídate!