Bapak. 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 ya, saya hampir lupa, mengganti tema gelap ke yang terang dan sebaliknya, Anda akan melihat bahwa seluruh aplikasi tidak digambar ulang (render reaksi) dan ini semacam keajaiban!

Secara alami, dimungkinkan untuk menata ulang komponen yang ada.

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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Saya dengan senang hati akan memberi tahu Anda tentang semua kemungkinan perpustakaan ini, tetapi saya tidak ingin terlihat seperti saya datang ke sini untuk PR: D. Saya di sini hanya untuk menghilangkan rasa sakit Anda dan mendengarkan kritik / saran Anda. Bisakah Anda menyenangkan balalaika seperti itu untuk kerangka kerja favorit Anda seperti next.js atau preact ?

Selamat tinggal semuanya, hati-hati dengan reagen dan jaga dirimu!