首頁>編程相關>三方組件
下載

Minstack風格

最小CSS In-JS樣式的組件解決方案用於React。

  • 小：〜2.8kb，依賴零。
  • 快速：速度類似於其他樣式的組件解決方案。
  • 簡單：自以為是的API創造了出色的開發人員體驗。
  • 鍵入：用打字稿編寫。專為打字稿設計。

  • 目標
  • 入門
  • 樣式屬性
  • 全球風格
    • 定義密鑰幀和字體
  • 主題
  • 樣式語法
    • 造型自我
    • 造型孩子
    • 組件選擇器
    • 嵌套規則
    • 使用家長選擇器參考
    • 使用在尺寸上
    • 使用空值
    • 評論
  • 樣式助手
  • 快照測試
  • 風格的提供商
    • 服務器端渲染（SSR）
    • nonce
  • 比較
    • 為什麼不呢？
    • 基準
  • 發行說明

目標

  • 合理的捆綁尺寸
  • 零依賴性
  • 強型安全
  • 沒有聲明合併主題鍵入
  • 簡單且自以為是的API
  • 全面和未來的CSS支持
  • 服務器端渲染
  • 可在圖書館中使用
  • 相容的
    • React（嚴格模式）> = 16.14.0
    • ES2021（例如，Chrome，Edge，Safari和Firefox的最新版本）

也有一些非目標。

  • 沒有自動供應商前綴
    • 很少需要。
  • 沒有對像樣式
    • 文本樣式更便攜，可覆蓋。
  • 沒有組件多態性（例如as屬性， .withComponent()方法）
    • 打破類型安全。
  • 無“非風格”功能（例如.attrs()方法）
    • 使用defaultProps 。
  • 沒有反應的本地支持
    • 費用超過利益。

入門

 import { styled } from '@minstack/styled' ;

使用標籤名稱樣式任何HTML元素類型。樣式的組件支持HTML元素支持的所有相同的道具（包括轉發的參考）。 

 const StyledComponent = styled ( 'div' ) `
  color: black;
` ;

標籤名稱方法樣式也得到了支持。 

 const StyledComponent = styled . div `
  color: black;
` ;

樣式任何接受className屬性的React組件，或擴展已經樣式的組件的樣式。 

 const StyledComponent = styled ( Component ) `
  color: black;
` ;

樣式屬性

通過設置模板字符串的通用參數，可以將額外的屬性添加到樣式組件中。通常，樣式屬性應以$為前綴，以表明它們僅用於樣式。以$字符開頭的任何屬性名稱都不會作為屬性傳遞到基礎HTML元素。 

 interface ComponentStyleProps {
  $font ?: string ;
}

const StyledComponent = styled ( 'div' ) < ComponentStyleProps > `
  font-family: ${ ( props ) => props . $font } ;
` ;

全球風格

使用styled.global global實用程序來創建全局樣式組件。 

 const GlobalStyle = styled . global `
  body,
  html {
    margin: 0;
    padding: 0;
  }
` ;

樣式屬性也可以添加到全球樣式中。 

 interface GlobalStyleProps {
  $font ?: string ;
}

const GlobalStyle = styled . global < GlobalStyleProps > `
  body,
  html {
    font-family: ${ ( props ) => props . $font } ;
  }
` ;

定義密鑰幀和字體

定義密鑰幀或字體尺寸與定義任何其他樣式相同。由於它們沒有範圍為任何特定組件，因此它們可能僅在全球樣式中使用。為防止名稱碰撞，請使用隨附的getId實用程序生成CSS安全的唯一名稱。 

 const openSansFont = getId ( 'font/open-sans' ) ;
const slideInAnimation = getId ( 'keyframes/slide-in' ) ;

const GlobalStyle = styled . global `
  @font-face {
    font-family: ${ openSansFont } ;
    src: url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
  }

  @keyframes ${ slideInAnimation } {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(100%);
    }
  }
` ;

const StyledComponent = styled ( 'div' ) `
  font-family: ${ openSansFont } ;
  animation-name: ${ slideInAnimation } ;
` ;

主題

傳遞主題掛鉤（或任何功能），該掛鉤將主題返回到createStyled實用程序中。然後，當第二個參數傳遞給任何樣式的模板字符串功能值時，主題值將可用。 

 // File: styled-with-theme.ts
import { createStyled } from '@minstack/styled' ;

export const styled = createStyled ( useTheme ) ;

這會創建一個強烈鍵入styled實例。使用此實例而不是內置實例。 

 import { styled } from './styled-with-theme' ;

const ThemedComponent = styled ( 'div' ) `
  color: ${ ( props , theme ) => theme . fgColor } ;
  background-color: ${ ( props , theme ) => theme . bgColor } ;
` ;

樣式語法

支持所有CSS和嵌套。

造型自我

要將樣式直接應用於已設計的HTML元素或組件，請在標記模板的頂部使用CSS屬性（無周圍塊）。 

 const StyledComponent = styled ( 'div' ) `
  color: red;
` ;

頂級CSS屬性將包裹在動態樣式的類選擇器中

. _rmsds7y13d_ {
  color : red;
}

造型孩子

使用CSS規則塊為樣式組件的兒童設計樣式。 

 const StyledComponent = styled ( 'div' ) `
  .child {
    color: blue;
  }
` ;

樣式的動態類將自動添加到所有選擇器上，以使其“範圍”。 

. _rmsds7y13d_ . child {
  color : blue;
}

組件選擇器

每個樣式的組件（除全局樣式除外）都可以用作選擇器。 

 const StyledComponentA = styled ( 'div' ) `
  color: blue;
` ;

const StyledComponentB = styled ( 'div' ) `
  ${ StyledComponentA } {
    background-color: yellow;
  }
` ;

每個樣式的組件都有一個獨特的靜態類，該類別是在創建中生成的。樣式"._rmsss7y13d_"組件的toString()方法返回該靜態類的選擇器字符串（例如。 

. _rmsds7y13d_ . _rmsss7y13d_ {
  color : red;
}

靜態類是從組件的顯示名稱，樣式模板的靜態部分，繼承的靜態類（擴展另一個樣式組件）以及共享相同“ thumbprint”的先前創建的組件的數量。在大多數情況下，這應該使SSR和客戶端渲染的靜態類穩定。如果發生靜態類SSR問題，則可能是由於具有相同指紋的組件具有不穩定的創建順序。嘗試使用.withConfig()方法更改displayName ，以使有問題的組件的指紋獨特。 

 const StyledComponent = styled . div . withConfig ( { displayName : 'StyledComponent' } ) `
  color: red;
` ;

嵌套規則

巢規則塊可創建更複雜的選擇器。 

 const StyledComponent = styled ( 'div' ) `
  .child {
    color: blue;

    .grandchild {
      color: green;
    }
  }
` ;

就像樣式的動態類被預選到頂級選擇器一樣，父母選擇器也被培養給子女選擇器。 

. _rmsds7y13d_ . child {
  color : blue;
}
. _rmsds7y13d_ . child . grandchild {
  color : green;
}

使用家長選擇器參考

家長選擇器參考（ & ）的工作方式與SCS/SASS中的方式相同。一個額外的細節是，當在樣式根上使用父級選擇器（不嵌套在父塊內）時，它是指當前樣式的唯一樣式類，即該樣式的隱式/虛擬父塊選擇器。 

 const StyledComponent = styled ( 'div' ) `
  && {
    color: red;
  }
  &:hover {
    color: blue;
  }
  .parent & {
    color: green;
  }
` ;

使用在尺寸上

支持所有CSS ATULES（ @charset除外， <style>元素中不允許使用）。 

 const StyledComponent = styled ( 'div' ) `
  @media screen and (min-width: 900px) {
    color: red;
  }
  .child {
    @media screen and (min-width: 600px) {
      .grandchild {
        color: blue;
        .adopted & {
          color: green;
        }
      }
    }
  }
` ;

在必要的情況下，將懸掛在符號的情況下，而在沒有介入設備的情況下，將以相同的方式處理家長的選擇者。 

 @media screen and ( min-width : 900 px ) {
  . _rmsds7y13d_ {
    color : red;
  }
}
@media screen and ( min-width : 600 px ) {
  . _rmsds7y13d_ . child . grandchild {
    color : blue;
  }
  . adopted . _rmsds7y13d_ . child . grandchild {
    color : green;
  }
}

使用空值

如果CSS屬性值為“空”（空字符串， false ， null ， undefined或"" ），則將從樣式中省略整個屬性。 

 const StyledComponent = styled ( 'div' ) `
  color: ${ null } ;
  background-color: red;
` ;

不包括顏色屬性，因為它沒有價值。 

. _rmsds7y13d_ {
  background-color : red;
}

評論

樣式可以包含塊（ /* */ ）和行註釋（ // ）。評論永遠不會包含在渲染樣式表中。 

 const StyledComponent = styled ( 'div' ) `
  // This is a comment.
  /* And so...
     ...is this. */
` ;

樣式助手

styled.string標記的模板函數返回一個簡單的樣式字符串，其中所有值插值。僅允許靜態值（無函數）。空屬性值（ null ， undefined ， false和"" ）以相同的方式在樣式組件中使用，並導致屬性被省略。 

 const fontHelper = styled . string `
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: ${ size } ;
` ;

// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) `
  ${ fontHelper }
  color: red;
` ;

styled.string手沒有副作用，而且工作很少，因此在功能中也可以安全使用。 

 const shadow = ( depth : number ) => {
  return styled . string `
    -moz-box-shadow: 0 ${ depth } px ${ depth } px black;
    -webkit-box-shadow: 0 ${ depth } px ${ depth } px black;
    box-shadow: 0 ${ depth } px ${ depth } px black;
  ` ;
} ;

// Then use in a styled component or another helper.
const StyledComponent = styled ( 'div' ) < { $shadowDepth : number } > `
  ${ ( props ) => shadow ( props . $shadowDepth ) }
  color: red;
` ;

快照測試

使用StyledTest包裝器生產具有穩定的類名稱和样式信息的快照。 

 const container = render ( < MyStyledComponent /> , { wrapper : StyledTest } ) ;

expect ( container ) . toMatchSnapshot ( ) ; 
 // Snapshot
<div>
  <div
    class="_test-dynamic-0_ _test-static-0_"
  >
    Hello, world!
  </div>
  <style>

    ._test-dynamic-0_ {
      padding: 1rem;
    }

  </style>
</div>

風格的提供商

StyledProvider可以覆蓋默認的cache ， manager和renderer 。默認操作不需要提供商。

  • 樣式緩存：將樣式字符串編譯為CSS文本和動態類名稱。
  • 樣式經理：渲染樣式表。
  • 樣式渲染器：呈現樣式類後的組件已添加到其屬性中。 
 const cache = createStyledCache ( ) ;
const manager = createStyledManager ( ) ;
const renderer = createStyledRenderer ( ) ;

render (
  < StyledProvider cache = { cache } manager = { manager } renderer = { renderer } >
    < App />
  </ StyledProvider > ,
) ;

StyledTest組件是一種預先配置的StyledProvider ，它注入了所有三個資源的測試版本以替換班級名稱並捕獲樣式。

注意：提供的緩存，管理器和渲染器不得在樣式組件的壽命中更改。如果發生突變，將拋出（或在生產中記錄）。

服務器端渲染（SSR）

在呈現服務器上的應用程序時，請使用createSsrStyledManager和StyledProvider捕獲樣式。 

 const manager = createSsrStyledManager ( ) ;
const html = renderToString (
  < StyledProvider manager = { manager } >
    < App />
  </ StyledProvider > ,
) ;

const html = `
<!doctype HTML>
<html>
  <head>
    ${ manager . getStyleTags ( ) }
  </head>
  <body>
    <div id="root">
      ${ html }
    </div>
  </body>
</html>
` ;

SSR Manager的getStyleTags()方法返回一個僅包含<style>標籤的單個HTML字符串。還有getStyleElement() （react元素數組）和getCss() （CSS字符串數組）方法。

nonce

使用createStyledManager （或createSsrStyledManager ）和StyledProvider對所有註射樣式設置nonce 。 

 const manager = createStyledManager ( nonce ) ;

render (
  < StyledProvider manager = { manager } >
    < App />
  </ StyledProvider > ,
) ;

比較

  • ？支持
  • ？部分支持
  • ？不支持
  • ⭕未記錄
特徵Minstack風格戈貝樣式的組件情感
圖書館
束大小（大約KB）[1] 2.8 1.2 13.3 9.1
零依賴性？ ？ ？ ？
打字稿本地？ ？ ？ ？
API
標記的模板樣式？ ？ ？ ？
動態風格？ ？ ？ ？
對像樣式？ ？ ？ ？
全球風格？ ？ ？ ？
多態性（ as ） ？ ？ ？ ？
屬性映射（ attrs ） ？ ？ ？ ？
主題[2] ？ ？ ？ ？
SSR ？ ？ ？ ？
快照測試？ ？ ？ ？
風格
基本CSS語法[3] ？ ？ ？ ？
CSS @media ？ ？ ？ ？
CSS @keyframes ？ ？ ？ ？
CSS @font-face ？ ⭕ ⭕ ？
CSS @import ？ ⭕ ？ ？
其他CSS @規則？ ⭕ ⭕ ⭕
供應商前綴[4] ？ ？ ？ ？
規則嵌套？ ？ ？ ？
家長選擇器（ & ） ？ ？ ？ ？
樣式的組件選擇器[5] ？ ？ ？ ？

  • [1]捆綁包的大小是使用WebPack捆綁包分析儀計算的styled導出（搖晃，縮小和GZIP之後）。
  • [2] Goober，樣式的組件和情感，都只支持一個主題，必須使用聲明合併來鍵入。
  • [3]在某些（罕見）情況下，Goober的標記模板編譯器將錯誤地解析CSS。
  • [4] Goober提供供應商前綴作為附加軟件包。
  • [5] Goober的組件選擇器並不總是每個組件唯一的。

為什麼不呢？

Goober與此解決方案非常相似。它快速，較小，並且支持一些額外的功能（對像樣式和as屬性）。那麼，Goober的缺點是什麼，為什麼要使用它？

  • Goober的標記模板編譯器使用正則表達式以不合時宜的方式匹配某些序列。除了在某些非常具體的情況下，使用逃生序列，引號和括號的情況下，這可能不是明顯的差異。但是，不能說完全支持所有CSS語法。在所有情況下，該庫都使用真實的令牌/解析器（無正則表達式）來正確匹配逃逸，引號和括號。該編譯器在O（n）時間工作，即使不是更快的速度，也是如此。該編譯器（以及更可讀/可維護的代碼）說明了庫之間大小的大部分差異。
  • Goober不提供穩定班級名稱和渲染樣式進行快照測試的方法。該庫提供了StyledTest測試包裝組件，不僅可以進行快照測試，而且以測試框架不可知的方式進行。
  • Goober的“組件選擇器”使用從組件樣式生成的動態類，這是幾個開放錯誤的原因。該庫使用一個單獨的靜態類，該類是根據組件的顯示名稱和從擴展其他樣式組件繼承的靜態類別定義的樣式組件時生成的。
  • Goober使用一個配置API的單個全局實例的setup()函數，這不會更改主題類型。通過聲明合併可以擴展主題類型，但這再次是全局，不是很安全。該庫提供了返回一個新的API實例的createStyled()工廠，該實例具有強烈的主題。
  • Goober將主題註射到可能與現有主題屬性相撞的組件道具中。該庫將主題傳遞給模板函數值作為第二個參數。
  • Goober需要一個Babel插件來啟用標籤名稱方法語法（即styled.div而不是styled('div') ）。該庫支持styled.<tag>沒有編譯時間支持。
  • Goober目標是將其作為其主要JSX框架，在使用React時需要對setup()進行調用。該庫的目標是反應，並且在使用preact時需要preact/compat 。

該圖書館被認為是景點支持的一些功能。這是為了減少可以設計樣式組件的替代方法，從而提高了代碼一致性，並提供了更好的開發人員體驗（​​DX）。刪除對完成同一操作的兩種不同方法的支持也意味著庫的大小和運行時開銷將減少和/或分配到改進的核心功能，並且庫的總體上更可維護。

  • Goober支持對像樣式。該庫專門使用標記模板，因為...
    • 它們可以比對象更容易複製，包括對象和來自CSS/更少的文本文件。
    • 它們在使用VS代碼時（帶有樣式組件擴展程序）時，它們提供更好的IntelliSense，完成，突出顯示和覆蓋。
    • 它們更可讀性，詳細信息較少，需要更少的逃逸。
    • 它們為重複的CSS聲明（具有不同值不同的CSS屬性名稱）提供了更好的支持，這允許仍然需要供應商前綴的值。
  • Goobober支持as屬性，用於更改樣式組件的基礎組件類型。該庫並不是因為它固有地鍵入不安全，並且使用樣式助手（例如， styled.string實用程序）提供了一種更好的重複使用樣式的方法。

基準

有關基準實現，請參見Benchmark.js腳本。

圖書館OP/s
Minstack風格144,970
戈貝142,028
情感124,681
樣式的組件118,072

發行說明

  • v1.0.1
    • 讀數更新
  • V1.0.0
    • 重命名為 @minstack/樣式
  • 反應微型風格
    • v2.0.7
      • 內部編譯器速度/尺寸改進
    • v2.0.6
      • 讀數更新
    • v2.0.5
      • 讀數更新
      • 改進的靜態類穩定性
    • v2.0.4
      • getId接受可選的名稱空間參數（重新添加）
      • 添加了.withConfig()靜態方法為樣式模板
      • 在getId和動態類哈希中使用主要版本
      • 組件靜態類生成是通過顯示名稱和繼承的靜態類命名的
    • v2.0.3
      • 讀數更新
    • v2.0.2
      • 讀數更新
      • NONCE支持
    • v2.0.1
      • 讀數更新
    • v2.0.0
      • 新功能
        • 更快，更可靠的樣式編譯器
        • 標籤名稱方法支持（例如styled.div styled('div') ）
        • 使用React的useInsertionEffect
        • 添加了styled.string
        • 添加了StyledProvider
          • 改進的SSR支持（ createSsrStyledManager ）
          • 改進的快照測試支持（ StyledTest ）
      • 打破變化
        • getId不再接受論點
        • 支持的ECMA版本更改為ES2021
        • 刪除了styled.mixin混合
        • 刪除了renderStylesToString
展開
附加信息
相關應用
爲您推薦
相關資訊 全部