Herr. 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 ja, ich hätte fast vergessen, das dunkle Thema auf das helle umzuschalten und umgekehrt. Sie werden feststellen, dass die gesamte Anwendung nicht neu gezeichnet wird (Render reagieren) und dies eine Art Magie ist!

Natürlich ist es möglich, vorhandene Komponenten neu zu gestalten.

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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ich würde Ihnen gerne alle Möglichkeiten dieser Bibliothek erläutern, aber ich möchte nicht so aussehen, als wäre ich zu PR: D hierher gekommen. Ich bin nur hier, um Ihnen den Schmerz zu nehmen und auf Ihre Kritik / Vorschläge zu hören. Können Sie eine solche Balalaika für Ihr Lieblings-Framework wie next.js oder preact bitte ?

Tschüss alle, sei vorsichtig mit dem Reagenz und pass auf dich auf!