styled

Minstack على غرار

الحد الأدنى من CSS-in-JS مكونات مكونات للرد.

• صغير : ~ 2.8 كيلو بايت مع تبعيات الصفر.
• سريع : مماثلة في السرعة مع حلول المكونات ذات التصميم الآخر.
• بسيطة : API API يخلق تجربة مطور رائعة.
• كتبت : مكتوبة في TypeScript. مصمم ل typextript.

• الأهداف
• ابدء
• خصائص نمط
• الأنماط العالمية
  • تحديد إطارات المفاتيح وخطوطها
• هم
• بناء الجملة
  • تصفيف الذات
  • تصميم الأطفال
  • محددات المكونات
  • قواعد التعشيش
  • باستخدام مراجع محدد الوالدين
  • باستخدام الحكم
  • باستخدام القيم الفارغة
  • التعليق
• مساعدين نمط
• اختبار لقطة
• مزود مصمم
  • عرض جانب الخادم (SSR)
  • nonce
• مقارنة
  • لماذا لا جوبر؟
  • المعايير
• ملاحظات الإصدار

الأهداف

• حجم حزمة صغير بشكل معقول
• التبعيات الصفر
• سلامة نوع قوي
• لا يوجد إعلان دمج لكتابة موضوع
• واجهة برمجة التطبيقات البسيطة والرأي
• دعم CSS الكامل والمستقبل
• عرض جانب الخادم
• قابلة للاستخدام في المكتبات
• متناسق
  • رد فعل (وضع صارم)> = 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 ، أو تمديد أنماط مكون مصمم بالفعل.

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

خصائص نمط

يمكن إضافة خصائص إضافية إلى المكون المصمم عن طريق تعيين المعلمة العامة لسلسلة القالب. بشكل عام ، يجب أن تكون خصائص الأناقة مسبوقة بـ $ للإشارة إلى أنها تستخدم فقط للتصميم. لن يتم تمرير أي اسم خاصية يبدأ بحرف $ إلى عنصر HTML الأساسي كسممة.

 interface ComponentStyleProps {
  $font ?: string ;
}

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

الأنماط العالمية

استخدم الأداة المساعدة styled.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;
  }
` ;

يحتوي كل مكون مصمم على فئة ثابتة فريدة يتم إنشاؤها على الإنشاء. تُرجع طريقة 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;
    }
  }
` ;

تمامًا مثل الفئة الديناميكية المصممة مسبقًا إلى محددات المستوى الأعلى ، وكذلك يتم إعداد محددات الوالدين إلى محددات الأطفال.

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

باستخدام مراجع محدد الوالدين

مراجع محدد الوالدين ( & ) تعمل بنفس الطريقة التي تعمل بها في SCSS/SASS. التفاصيل الإضافية الوحيدة هي أنه عند استخدام محدد الوالدين في جذر النمط (وليس متداخلًا داخل كتلة الوالدين) ، فإنه يشير إلى فئة النمط الفريد للنمط الحالي ، وهو محدد كتلة الأصل الضمني/الظاهري للنمط.

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

باستخدام الحكم

يتم دعم جميع 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;
        }
      }
    }
  }
` ;

سيتم رفع القواعد عند الضرورة ، وسيتم التعامل مع محددات الوالدين بالطريقة نفسها التي سيكونون بها بدون القاعدة المتداخلة.

 @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. */
` ; 

مساعدين نمط

تُرجع دالة TAMPLATE TAMPLATE 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>
` ;

تقوم طريقة getStyleTags() من SSR Manager بإرجاع سلسلة HTML واحدة تحتوي فقط على علامات <style> . هناك أيضًا طرق getStyleElement() (صفيف عناصر React) و getCss() (صفيف سلاسل CSS).

nonce

استخدم createStyledManager (أو createSsrStyledManager ) و StyledProvider لتعيين nonce على جميع الأساليب المحقونة.

 const manager = createStyledManager ( nonce ) ;

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

مقارنة

• ؟ مدعوم
• ؟ مدعوم جزئيا
• ؟ غير مدعوم
• ⭕ غير موثق

	ميزة	Minstack على غرار	جوبر	المكونات المصممة	العاطفة
مكتبة
	حجم الحزمة (تقريبا كيلو بايت) [1]	2.8	1.2	13.3	9.1
	التبعيات الصفر	؟	؟	؟	؟
	TypeScript الأصلي	؟	؟	؟	؟
API
	أنماط قالب الموسومة	؟	؟	؟	؟
	أنماط ديناميكية	؟	؟	؟	؟
	أنماط الكائن	؟	؟	؟	؟
	الأنماط العالمية	؟	؟	؟	؟
	تعدد الأشكال ( as )	؟	؟	؟	؟
	رسم خرائط الممتلكات ( attrs )	؟	؟	؟	؟
	Theming [2]	؟	؟	؟	؟
	SSR	؟	؟	؟	؟
	اختبار لقطة	؟	؟	؟	؟
أسلوب
	بناء جملة CSS الأساسي [3]	؟	؟	؟	؟
	@media	؟	؟	؟	؟
	CSS @keyframes	؟	؟	؟	؟
	css @font-face	؟	⭕	⭕	؟
	CSS @import	؟	⭕	؟	؟
	قواعد CSS @ أخرى	؟	⭕	⭕	⭕
	بادئة البائع [4]	؟	؟	؟	؟
	حكم التعشيش	؟	؟	؟	؟
	محددات الوالدين ( & )	؟	؟	؟	؟
	محددات المكونات المصممة [5]	؟	؟	؟	؟

• [1] حجم الحزمة هو من التصدير styled (بعد تبادل الأشجار ، والتصنيع ، و GZIP) المحسوبة باستخدام محلل حزمة WebPack.
• [2] Goober ، المكونات المصممة ، والعاطفة ، كلها تدعم فقط موضوعًا واحدًا ، والذي يجب كتابته باستخدام دمج الإعلان.
• [3] سوف يقوم برنامج التحويل البرمجي للموسومة في GoboRE بتوصل CSS بشكل غير صحيح في بعض الحالات (النادرة).
• [4] يوفر Goober بادئة البائع كحزمة إضافية.
• [5] لا يكون محددات مكونات Goober فريدة دائمًا لكل مكون.

لماذا لا جوبر؟

جوبر يشبه إلى حد كبير هذا الحل. إنه أسرع وأصغر ولديه دعم لبعض الميزات الإضافية (أنماط الكائنات ، و as الخاصية). إذن ما هي الجوانب السلبية لـ Goober ، ولماذا يمكنني استخدام هذا بدلاً من ذلك؟

• يستخدم برنامج التحويل البرمجي للموسومة من Gober تعبيرات منتظمة لمطابقة بعض التسلسلات بطريقة ليست مضمونة. من المحتمل ألا يكون هذا فرقًا ملحوظًا إلا في بعض الحالات المحددة للغاية حيث يتم استخدام تسلسل الهروب والاقتباسات والأقواس. ولكن ، لا يمكن قولها لدعم جميع بناء جملة CSS بالكامل. تستخدم هذه المكتبة علامة رمزية حقيقية/محلل (لا تعبيرات منتظمة) لمطابقة الهروب بشكل صحيح ، والاقتباسات ، والأقواس في جميع الحالات. يعمل هذا المترجم في وقت O (n) وهو بنفس السرعة ، إن لم يكن أسرع. يحسب هذا المترجم (والرمز الأكثر قابلية للقراءة/القابلة للصيانة) معظم الفرق في الحجم بين المكتبات.
• لا يوفر Goober طريقة لتحقيق الاستقرار في أسماء الفئات وتقديم أنماط لاختبار اللقطة. توفر هذه المكتبة مكون Wrapper StyledTest الذي لا يمكّن اختبار اللقطة فحسب ، بل يقوم بذلك بطريقة لا يتم اختبار إطار العمل.
• استخدم "محددات المكونات" من Goober الفئة الديناميكية التي تم إنشاؤها من نمط المكون ، وهو سبب العديد من الأخطاء المفتوحة. تستخدم هذه المكتبة فئة ثابتة منفصلة ، يتم إنشاؤها عند تعريف المكون المصمم ، استنادًا إلى اسم عرض المكون والفئات الثابتة الموروثة من تمديد المكونات المصممة الأخرى.
• يستخدم Goober دالة setup() تقوم بتكوين المثيل العالمي الفردي من واجهة برمجة التطبيقات ، وهذا لا يغير نوع السمة. يمكن أن يتم توسيع نوع السمة من خلال دمج الإعلان ، ولكن هذا مرة أخرى عالمية وليست نوعًا من النوع الآمن. توفر هذه المكتبة المصنع createStyled() الذي يعيد مثيل API جديد ، والذي يحتوي على موضوع مكتوب بقوة.
• يقوم Goober بحقن السمة في الدعائم المكونة التي يمكن أن تصطدم بخاصية موضوع موجودة. تقوم هذه المكتبة بتمرير السمة إلى قيم دالة القالب كوسيطة ثانية.
• يتطلب Goober مكونًا إضافيًا بابل لتمكين بناء جملة طريقة اسم العلامة (أي styled.div بدلاً من styled('div') ). تدعم هذه المكتبة styled.<tag> دون ترجمة دعم الوقت.
• يستهدف Goober PREACT كإطار JSX الأساسي الخاص به ، ويتطلب مكالمة setup() عند استخدام React. تتفاعل أهداف المكتبة هذه وتتطلب preact/compat عند استخدام PREACT.

هذه المكتبة مصنوعة من الرأي وتترك بعض الميزات التي يدعمها جوبر. هذا هو تقليل عدد الطرق البديلة التي يمكن تصميم المكونات المصممة ، مما يزيد من اتساق الكود ، ويوفر تجربة مطور أفضل بشكل عام (DX). إن إزالة الدعم لطريقتين مختلفتين لإنجاز نفس الشيء يعني أيضًا أن حجم المكتبة ونفقات التشغيل في وقت التشغيل يتم تقليله و/أو تخصيصه للميزات الأساسية المحسنة ، وأن المكتبة أكثر قابلية للصيانة بشكل عام.

• يدعم جوبر أنماط الكائنات. تستخدم هذه المكتبة بشكل حصري قوالب موسومة لأن ...
  • يمكن نسخها بسهولة أكبر من الكائنات ، بما في ذلك من وإلى ملفات نصية CSS/أقل.
  • إنها توفر Intellisense والانتهاء والتمييز والبث عند استخدام الكود VS (مع امتداد المكونات المصممة).
  • فهي أكثر قابلية للقراءة ، وأقل مطوّلة ، وتتطلب عدد أقل من الهروب.
  • إنها توفر دعمًا أفضل لإعلانات CSS المكررة (نفس اسم خاصية CSS مع قيم مختلفة) ، مما يسمح بالقيم التي قد لا تزال تتطلب بادئة البائع.
• يدعم Goober الخاصية as لتغيير نوع المكون الأساسي للمكون المصمم. هذه المكتبة ليست لأنها بطبيعتها تكتب غير آمنة ، ويوفر استخدام مساعدي الأنماط (على سبيل المثال. الأداة styled.string .

المعايير

انظر البرنامج النصي المعيار. JS للتنفيذ القياسي.

مكتبة	OP/S.
Minstack على غرار	144،970
جوبر	142،028
العاطفة	124،681
المكونات المصممة	118،072

ملاحظات الإصدار

• v1.0.1
  • readme تحديث
• v1.0.0
  • أعيدت تسميتها إلى @minstack/styled
• رد الفعل على غرار Micro
  • v2.0.7
    • تحسينات السرعة/الحجم المترجم الداخلي
  • v2.0.6
    • readme تحديث
  • v2.0.5
    • readme تحديث
    • تحسين الاستقرار الطبقي الثابت
  • v2.0.4
    • يقبل getId وسيطة مساحة اسم اختيارية (إعادة إضافة)
    • تمت إضافة .withConfig() طريقة ثابتة للقوالب المصممة
    • استخدم إصدارًا رئيسيًا في تجزئة الفئة getId والديناميكية
    • تم وضع الأسماء في جيل الفئة الثابتة للمكون باسم العرض والفئات الثابتة الموروثة
  • v2.0.3
    • readme تحديث
  • v2.0.2
    • readme تحديث
    • دعم nonce
  • v2.0.1
    • readme تحديث
  • v2.0.0
    • ميزات جديدة
      • برنامج التحويل البرمجي الأسرع والأكثر موثوقية
      • styled.div طريقة اسم العلامة styled('div') على سبيل المثال
      • باستخدام useInsertionEffect الخاص بـ React عندما يكون ذلك متاحًا
      • وأضاف styled.string مساعد لبناء سلاسل على الطراز الثابت
      • تمت إضافة StyledProvider
        • تحسين دعم SSR ( createSsrStyledManager )
        • دعم اختبار لقطة محسّن ( StyledTest )
    • كسر التغييرات
      • لم يعد getId يقبل حجة
      • تم تغيير إصدار ECMA المدعوم إلى ES2021
      • تمت إزالته styled.mixin
      • تمت إزالة renderStylesToString