styled

สไตล์ Minstack

โซลูชันส่วนประกอบสไตล์ CSS-in-JS ขั้นต่ำสำหรับการตอบสนอง

• เล็ก : ~ 2.8kb โดยมีศูนย์พึ่งพา
• เร็ว : มีความเร็วใกล้เคียงกับโซลูชันส่วนประกอบสไตล์อื่น ๆ
• Simple : API ที่มีความคิดเห็นสร้างประสบการณ์นักพัฒนาที่ยอดเยี่ยม
• พิมพ์ : เขียนเป็น typeScript ออกแบบมาสำหรับ TypeScript

• เป้าหมาย
• เริ่มต้น
• คุณสมบัติสไตล์
• รูปแบบระดับโลก
  • การกำหนด keyframes และ fonts
• การสร้างธีม
• ไวยากรณ์สไตล์
  • จัดแต่งทรงผมด้วยตนเอง
  • เด็กจัดแต่งทรงผม
  • ตัวเลือกส่วนประกอบ
  • กฎการทำรัง
  • ใช้การอ้างอิงตัวเลือกหลัก
  • ใช้ at-rules
  • ใช้ค่าว่าง
  • การแสดงความคิดเห็น
• ผู้ช่วยสไตล์
• การทดสอบภาพรวม
• ผู้ให้บริการสไตล์
  • การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR)
  • ไม่เป็นไปได้
• การเปรียบเทียบ
  • ทำไมไม่ Goober?
  • เกณฑ์มาตรฐาน
• บันทึกย่อ

เป้าหมาย

• ขนาดมัดขนาดเล็กพอสมควร
• ศูนย์การพึ่งพา
• ความปลอดภัยประเภทที่แข็งแกร่ง
• ไม่มีการประกาศรวมสำหรับการพิมพ์ธีม
• API ที่เรียบง่ายและมีความเห็น
• การสนับสนุน CSS เต็มรูปแบบและในอนาคต
• การแสดงผลด้านเซิร์ฟเวอร์
• ใช้งานได้ในห้องสมุด
• เข้ากันได้
  • ตอบสนอง (โหมดเข้มงวด)> = 16.14.0
  • ES2021 (เช่น Chrome, Edge, Safari และ Firefox เวอร์ชันล่าสุด)

นอกจากนี้ยังมีบางสิ่งที่ไม่ใช่เป้าหมาย

• ไม่มีคำนำหน้าผู้ขายรถยนต์
  • ไม่ค่อยจำเป็น
• ไม่มีรูปแบบวัตถุ
  • รูปแบบข้อความนั้นพกพาได้มากขึ้นและเป็นผ้าสำลีได้มากขึ้น
• ไม่มีส่วนประกอบ polymorphism (เช่น as คุณสมบัติ. .withComponent() วิธี)
  • แบ่งประเภทความปลอดภัย
• ไม่มีคุณสมบัติ "ไม่สไตล์" (เช่น. .attrs() วิธีการ)
  • ใช้ defaultProps
• ไม่มีการสนับสนุนพื้นเมือง React
  • ค่าใช้จ่ายมีค่ามากกว่าผลประโยชน์

เริ่มต้น

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

จัดประเภทประเภทองค์ประกอบ HTML ใด ๆ โดยใช้ชื่อแท็ก องค์ประกอบที่มีสไตล์รองรับอุปกรณ์ประกอบฉากเดียวกันทั้งหมด (รวมถึงการอ้างอิงซึ่งถูกส่งต่อ) ที่องค์ประกอบ HTML รองรับ

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

ยังรองรับรูปแบบวิธีการแท็ก

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

จัดสไตล์ส่วนประกอบปฏิกิริยาใด ๆ ที่ยอมรับคุณสมบัติ className หรือขยายสไตล์ขององค์ประกอบที่มีสไตล์อยู่แล้ว

 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 } ;
  }
` ;

การกำหนด keyframes และ fonts

การกำหนด keyframes หรือ font-faces นั้นเหมือนกับการกำหนดสไตล์อื่น ๆ เนื่องจากพวกเขาไม่ได้กำหนดขอบเขตขององค์ประกอบใด ๆ โดยเฉพาะพวกเขาจึงควรใช้ในรูปแบบระดับโลกเท่านั้น เพื่อป้องกันการชนกันของชื่อให้ใช้ยูทิลิตี้ getId ที่ให้มาเพื่อสร้างชื่อที่ไม่ซ้ำกัน CSS-Safe

 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 Plus ทั้งหมด

จัดแต่งทรงผมด้วยตนเอง

หากต้องการใช้สไตล์โดยตรงกับองค์ประกอบ 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;
  }
` ;

แต่ละองค์ประกอบมีสไตล์มีคลาสคงที่ที่ไม่ซ้ำกันซึ่งสร้างขึ้นจากการสร้าง toString() ขององค์ประกอบที่มีสไตล์ส่งคืนสตริงตัวเลือก (เช่น "._rmsss7y13d_" ) สำหรับคลาสคงที่นั้น

. _rmsds7y13d_ . _rmsss7y13d_ {
  color : red;
}

คลาสคงที่ถูกสร้างขึ้นจากชื่อที่แสดงของส่วนประกอบส่วนคงที่ของเทมเพลตสไตล์คลาสคงที่ที่สืบทอดมา (เมื่อขยายองค์ประกอบสไตล์อื่น) และจำนวนของส่วนประกอบที่สร้างขึ้นก่อนหน้านี้ที่แบ่งปัน "thumbprint" เดียวกัน ในกรณีส่วนใหญ่สิ่งนี้ควรทำให้ชั้นเรียนคงที่มีเสถียรภาพใน SSR และการแสดงผลไคลเอนต์ หากปัญหา SSR ระดับคงที่อาจเกิดขึ้นอาจเป็นเพราะส่วนประกอบที่มีลายนิ้วมือเดียวกันที่มีคำสั่งการสร้างที่ไม่เสถียร ลองเปลี่ยน displayName โดยใช้ .withConfig() วิธีการทำให้ลายนิ้วมือของส่วนประกอบที่เป็นปัญหาไม่ซ้ำกัน

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

กฎการทำรัง

บล็อกกฎของรังเพื่อสร้างตัวเลือกที่ซับซ้อนมากขึ้น

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

    .grandchild {
      color: green;
    }
  }
` ;

เช่นเดียวกับคลาส Dynamic Dynamic ได้รับการเตรียมไว้ให้กับตัวเลือกระดับบนสุดดังนั้นตัวเลือกหลักที่เตรียมไว้ให้กับตัวเลือกเด็ก

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

ใช้การอ้างอิงตัวเลือกหลัก

การอ้างอิงตัวเลือกผู้ปกครอง ( & ) ทำงานแบบเดียวกับที่ทำใน SCSS/SASS รายละเอียดพิเศษหนึ่งคือเมื่อตัวเลือกผู้ปกครองถูกใช้ในรูปแบบรูท (ไม่ซ้อนกันภายในบล็อกหลัก) มันหมายถึงคลาสสไตล์ที่เป็นเอกลักษณ์ของสไตล์ปัจจุบันซึ่งเป็นตัวเลือกบล็อกหลัก/เสมือนจริง/เสมือนจริงสำหรับสไตล์

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

ใช้ at-rules

รองรับ CSS at-Rules ทั้งหมด (ยกเว้น @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;
        }
      }
    }
  }
` ;

AT-RULES จะถูกยกขึ้นตามความจำเป็นและตัวเลือกผู้ปกครองจะได้รับการจัดการในลักษณะเดียวกับที่พวกเขาจะเป็นโดยไม่ต้องเข้าแทรกแซงที่กฎ

 @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 Tagged ส่งคืนสตริงสไตล์ที่เรียบง่ายพร้อมค่าทั้งหมดที่ถูกแก้ไข อนุญาตเฉพาะค่าคงที่ (ไม่มีฟังก์ชั่น) ค่าคุณสมบัติที่ว่างเปล่า ( 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;
` ; 

การทดสอบภาพรวม

ใช้ wrapper 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 ไม่จำเป็นต้องมีผู้ให้บริการสำหรับการดำเนินการเริ่มต้น

• Cache Styled: รวบรวมสตริงสไตล์ไปยังข้อความ CSS และชื่อคลาสแบบไดนามิก
• ผู้จัดการสไตล์: Renders Style Sheets
• Styled Renderer: แสดงส่วนประกอบหลังจากคลาสสไตล์ได้ถูกเพิ่มเข้าไปในคุณสมบัติของพวกเขา

 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>
` ;

เมธอด getStyleTags() ของ SSR Manager ส่งคืนสตริง HTML เดียวที่มีแท็ก <style> เท่านั้น นอกจากนี้ยังมี getStyleElement() (อาร์เรย์องค์ประกอบปฏิกิริยา) และ getCss() (css strings array)

ไม่เป็นไปได้

ใช้ 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
	ศูนย์การพึ่งพา	-	-	-	-
	TypeScript Native	-	-	-	-
API
	รูปแบบเทมเพลตที่ติดแท็ก	-	-	-	-
	รูปแบบแบบไดนามิก	-	-	-	-
	รูปแบบวัตถุ	-	-	-	-
	รูปแบบระดับโลก	-	-	-	-
	ความหลากหลาย ( as )	-	-	-	-
	การทำแผนที่คุณสมบัติ ( attrs )	-	-	-	-
	ธีม [2]	-	-	-	-
	SSR	-	-	-	-
	การทดสอบภาพรวม	-	-	-	-
สไตล์
	ไวยากรณ์ CSS พื้นฐาน [3]	-	-	-	-
	CSS @media	-	-	-	-
	CSS @keyframes	-	-	-	-
	css @font-face	-			-
	CSS @import	-		-	-
	กฎ CSS @ อื่น ๆ	-
	คำนำหน้าผู้ขาย [4]	-	-	-	-
	การทำรัง	-	-	-	-
	ตัวเลือกหลัก ( & )	-	-	-	-
	ตัวเลือกส่วนประกอบสไตล์ [5]	-	-	-	-

• [1] ขนาดมัดเป็นของการส่งออก styled (หลังจากการเขย่าต้นไม้, การลดขนาดเล็กและ GZIP) คำนวณโดยใช้ตัววิเคราะห์ชุด Webpack
• [2] Goober ส่วนประกอบสไตล์และอารมณ์ทั้งหมดสนับสนุนชุดรูปแบบเดียวเท่านั้นซึ่งจะต้องพิมพ์โดยใช้การรวมประกาศ
• [3] คอมไพเลอร์เทมเพลตที่ติดแท็กของ Goober จะแยกวิเคราะห์ CSS อย่างไม่ถูกต้องในบางกรณี (หายาก)
• [4] Goober ให้คำนำหน้าผู้ขายเป็นแพ็คเกจเพิ่มเติม
• [5] ตัวเลือกส่วนประกอบของ Goober นั้นไม่ซ้ำกันต่อองค์ประกอบเสมอไป

ทำไมไม่ Goober?

Goober นั้นคล้ายกับโซลูชันนี้มาก มันเร็วขึ้นเล็กลงและรองรับคุณสมบัติพิเศษสองสามอย่าง (รูปแบบวัตถุและคุณสมบัติ as ) แล้วข้อเสียของ Goober คืออะไรและทำไมฉันถึงใช้สิ่งนี้แทน?

• คอมไพเลอร์เทมเพลตที่ติดแท็กของ Goober ใช้นิพจน์ทั่วไปเพื่อให้ตรงกับลำดับบางอย่างในแบบที่ไม่สามารถป้องกันได้ นี่อาจไม่ใช่ความแตกต่างที่จะสังเกตได้ยกเว้นในบางกรณีที่เฉพาะเจาะจงมากที่มีการใช้ลำดับการหลบหนีคำพูดและวงเล็บ แต่ไม่สามารถกล่าวได้ว่าสนับสนุนไวยากรณ์ CSS ทั้งหมดอย่างเต็มที่ ห้องสมุดนี้ใช้ tokenizer/parser จริง (ไม่มีการแสดงออกปกติ) เพื่อจับคู่การหลบหนีคำพูดและวงเล็บในทุกกรณีอย่างถูกต้อง คอมไพเลอร์นี้ใช้งานได้ในเวลา O (n) และเร็วเท่าถ้าไม่เร็วขึ้น คอมไพเลอร์นี้ (และรหัสที่อ่านได้/บำรุงรักษาได้) นี้สำหรับขนาดที่แตกต่างกันมากที่สุดระหว่างไลบรารี
• Goober ไม่ได้ให้วิธีในการทำให้ชื่อคลาสและรูปแบบการแสดงผลสำหรับการทดสอบสแน็ปช็อต ไลบรารีนี้มีส่วนประกอบ wrapper StyledTest ซึ่งไม่เพียง แต่เปิดใช้งานการทดสอบสแน็ปช็อตเท่านั้น แต่ยังทำในลักษณะที่เป็นผู้ไม่เชื่อเรื่องพระเจ้า
• "ตัวเลือกส่วนประกอบ" ของ Goober ใช้คลาสแบบไดนามิกที่สร้างขึ้นจากสไตล์ส่วนประกอบซึ่งเป็นสาเหตุของข้อบกพร่องที่เปิดอยู่หลายตัว ไลบรารีนี้ใช้คลาสคงที่แยกต่างหากซึ่งสร้างขึ้นเมื่อมีการกำหนดองค์ประกอบสไตล์ตามชื่อการแสดงผลขององค์ประกอบและคลาสคงที่ที่สืบทอดมาจากการขยายส่วนประกอบสไตล์อื่น ๆ
• Goober ใช้ฟังก์ชั่น setup() ซึ่งกำหนดค่า อินสแตนซ์ส่วนกลางเดียวของ API และสิ่งนี้ไม่ได้เปลี่ยนประเภทธีม การขยายประเภทชุดรูปแบบสามารถทำได้ด้วยการรวมการประกาศ แต่นี่เป็นอีกครั้งทั่วโลกและไม่ปลอดภัยมากนัก ห้องสมุดนี้มีโรงงาน createStyled() ที่ ส่งคืนอินสแตนซ์ API ใหม่ ซึ่งมีธีมที่พิมพ์อย่างมาก
• Goober ฉีดธีมลงในอุปกรณ์ประกอบฉากส่วนประกอบซึ่งสามารถชนกับคุณสมบัติธีมที่มีอยู่ ไลบรารีนี้ผ่านธีมไปยังค่าฟังก์ชันเทมเพลตเป็นอาร์กิวเมนต์ที่สอง
• Goober ต้องใช้ปลั๊กอินบาเบลเพื่อเปิดใช้งานไวยากรณ์วิธีแท็กชื่อ (เช่น styled.div แทนที่จะเป็น styled('div') ) ห้องสมุดนี้รองรับ styled.<tag> โดยไม่ต้องรองรับเวลาคอมไพล์
• Goober ตั้งเป้าหมายไว้ล่วงหน้าว่าเป็นเฟรมเวิร์ก JSX หลักซึ่งต้องมีการเรียกใช้ setup() เมื่อใช้ React ไลบรารีนี้มีเป้าหมายตอบสนองและต้องการ preact/compat เมื่อใช้ preact

ห้องสมุดนี้มีความคิดเห็นและออกจากคุณสมบัติบางอย่างที่ Goober รองรับ นี่คือการลดจำนวนวิธีทางเลือกที่ส่วนประกอบที่มีสไตล์สามารถออกแบบได้ซึ่งเพิ่มความสอดคล้องของรหัสและให้ประสบการณ์นักพัฒนาซอฟต์แวร์ที่ดีขึ้นโดยรวม (DX) การลบการสนับสนุนสำหรับสองวิธีที่แตกต่างกันเพื่อให้บรรลุสิ่งเดียวกันนั้นหมายถึงขนาดของห้องสมุดและค่าใช้จ่ายรันไทม์จะลดลงและ/หรือจัดสรรให้กับคุณสมบัติหลักที่ดีขึ้นและห้องสมุดนั้นได้รับการบำรุงรักษาโดยรวมมากขึ้น

• Goober รองรับสไตล์วัตถุ ไลบรารีนี้ใช้เทมเพลตที่ติดแท็กโดยเฉพาะเพราะ ...
  • พวกเขาสามารถคัดลอกได้ง่ายกว่าวัตถุรวมถึงและจากไฟล์ข้อความ CSS/น้อยกว่า
  • พวกเขาให้ Intellisense ที่ดีขึ้นความสมบูรณ์การเน้นและผ้าสำลีเมื่อใช้รหัส VS (พร้อมส่วนขยายองค์ประกอบสไตล์)
  • พวกเขาสามารถอ่านได้มากขึ้น verbose น้อยกว่าและต้องการการหลบหนีน้อยลง
  • พวกเขาให้การสนับสนุนที่ดีขึ้นสำหรับการประกาศ CSS ซ้ำ (ชื่อคุณสมบัติ CSS เดียวกันกับค่าที่แตกต่างกัน) ซึ่งอนุญาตให้มีค่าซึ่งอาจต้องใช้คำนำหน้าผู้ขาย
• Goober สนับสนุนคุณสมบัติ as สำหรับการเปลี่ยนประเภทส่วนประกอบพื้นฐานขององค์ประกอบสไตล์ ไลบรารีนี้ไม่ได้เป็นเพราะมันพิมพ์ไม่ปลอดภัยโดยเนื้อแท้และใช้ผู้ช่วยสไตล์ (เช่น styled.string Utility) ให้วิธีที่ดีกว่าในการใช้สไตล์ที่ดีกว่า

เกณฑ์มาตรฐาน

ดูสคริปต์ Benchmark.js สำหรับการใช้งานมาตรฐาน

ห้องสมุด	op/s
สไตล์ Minstack	144,970
คนโง่	142,028
อารมณ์	124,681
ส่วนประกอบสไตล์	118,072

บันทึกย่อ

• v1.0.1
  • readme update
• v1.0.0
  • เปลี่ยนชื่อเป็น @minstack/styled
• ตอบโต้สไตล์ไมโคร
  • v2.0.7
    • การปรับปรุงความเร็ว/ขนาดของคอมไพเลอร์ภายใน
  • v2.0.6
    • readme update
  • v2.0.5
    • readme update
    • ปรับปรุงเสถียรภาพระดับคงที่
  • v2.0.4
    • getId ยอมรับอาร์กิวเมนต์ namespace เสริม (เพิ่มอีกครั้ง)
    • เพิ่ม .withConfig() วิธีการคงที่ในเทมเพลตสไตล์
    • ใช้เวอร์ชันหลักใน getId และ Dynamic Class Hash
    • การสร้างคลาสแบบคงที่ส่วนประกอบถูกกำหนดโดยชื่อที่แสดงและคลาสคงที่ที่สืบทอดมา
  • v2.0.3
    • readme update
  • v2.0.2
    • readme update
    • การสนับสนุนที่ไม่ได้รับ
  • v2.0.1
    • readme update
  • v2.0.0
    • คุณสมบัติใหม่
      • คอมไพเลอร์สไตล์ที่เร็วขึ้นและเชื่อถือได้มากขึ้น
      • การสนับสนุนวิธีการแท็กชื่อ (เช่น styled.div ทางเลือกสำหรับ styled('div') )
      • การใช้ useInsertionEffect ของ React เมื่อพร้อมใช้งาน
      • เพิ่ม styled.string Helper สำหรับการสร้างสตริงสไตล์คงที่
      • เพิ่ม StyledProvider
        • ปรับปรุงการสนับสนุน SSR ( createSsrStyledManager )
        • การสนับสนุนการทดสอบสแน็ปช็อตที่ได้รับการปรับปรุง ( StyledTest )
    • ทำลายการเปลี่ยนแปลง
      • getId ไม่ยอมรับอาร์กิวเมนต์อีกต่อไป
      • รุ่น ECMA ที่รองรับเปลี่ยนเป็น ES2021
      • ลบ styled.mixin
      • ลบ renderStylesToString