styled modern normalize

Modern-Normalize.css للملابس المصممة

تتمثل طريقة الاستيراد المشتركة لـ modern-normalize.css في استخدام الواردات التي لم يتم تحديد اسمها والتي تعمل بشكل جيد للمشاريع مع CSS الفانيليا أو سير عمل ما قبل المعالجات مثل Sass/Less و Bundler مثل WebPack ، ولكنها لا تستخدم مزايا مكتبات CSS-JS مثل النماذج المصممة ، EG-prefixing و CSS مثبتة.

تعتبر التصميم css للحديث عبارة عن حزمة وكيل من العواصف الحديثة. يسمح ذلك باستيراده واستخدامه عبر injectGlobal أو أي مكون آخر تم تصميمه.

تعتمد الحزمة على الإصدار 0.5.0. الأنماط المقدمة متوافقة مع المكونات المصممة V2 و V3 و V4.

ابدء

تثبيت

أضف الحزمة كاعتماد على مشروعك:

npm install --save styled-modern-normalize

قم بتشغيل npm install من داخل جذر المشروع لتمهيد المشروع وتثبيت تبعيات التطوير ووقت التشغيل. لاحظ أن هذا لن يقوم بتثبيت حزمة المكونات المطلوبة المطلوبة والتي يتم تعريفها على أنها تبعية الأقران ويجب تثبيتها بشكل منفصل كما هو موضح في قسم تبعيات الأقران أدناه.

تبعيات الأقران

تستخدم هذه الحزمة وظائف واجهة برمجة تطبيقات المصمّمين المصممين التي تُرجع مكونات رد الفعل.

لذلك تعتمد هذه الحزمة على المكونات المصممة وحزم التفاعل المحددة على أنها تبعيات الأقران.

يمكن لمستخدمي Linux & MacOS تثبيت جميع تبعيات الأقران بسهولة باستخدام NPX الذي يأتي مسبقًا مع NPM 5 أو أعلى:

npx install-peerdeps styled-modern-normalize

عند استخدام NPM <5 ، لا يتم تفكيك أداة NPX ، ولكن يمكن للمستخدمين إما تثبيته على مستوى العالم ثم تشغيل الأمر أعلاه أو تثبيت حزمة التثبيت Peerdeps محليًا/عالميًا للسماح لها بالتعامل مع تثبيت جميع تبعيات الأقران.

 # Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps styled-modern-normalize

# …or globally.
npm install -g install-peerdeps
install-peerdeps styled-modern-normalize

يدويًا

يمكن أيضًا تثبيت جميع تبعيات الأقران يدويًا (على سبيل المثال للمستخدمين الذين يقومون بتشغيل نظام مستند إلى Microsoft Windows) عن طريق تثبيت الإصدار الصحيح من كل حزمة:

npm info " styled-modern-normalize@latest " peerDependencies

الاستخدام

يمكن استخدام عوائق التصميم الحديثة عن طريق استيراد التصدير modernNormalize أو تسميته.

 // With default export…
import modernNormalize from "styled-modern-normalize" ;

// …or via named export.
import { modernNormalize } from "styled-modern-normalize" ;

لحقن الأنماط عند استخدام المكونات المصممة V4 ، يمكن استخدام وظيفة createGlobalStyle API التي تولد مكونًا للوصول StyledComponent :

 // Usage with the latest "styled-components" v4.
import { createGlobalStyle } from "styled-components" ;

const ModernNormalize = createGlobalStyle `
  ${ modernNormalize }
  /* ... */
` ;

// Use the generated component in your rendering logic to inject the styles.
/* ... */
< React . Fragment >
  < ModernNormalize />
</ React . Fragment > ;
/* ... */

عند استخدام المكونات المصممة V2 أو V3 ، يمكن حقن الأنماط باستخدام API injectGlobal :

 // Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components" ;

const cssBaseline = injectGlobal `
  ${ modernNormalize }
  /* ... */
` ;

إصدار Modern-normalization.css تعتمد هذه الحزمة حاليًا على أنها MODERN_NORMALIZE_VERSION :

 import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize" ;

// Example:
console . log ( MODERN_NORMALIZE_VERSION ) ; // "0.5.0"

سير عمل التنمية

قم بتشغيل npm install من داخل جذر المشروع لتمهيد المشروع وتثبيت تبعيات التطوير ووقت التشغيل. لبدء التطوير مع إعادة التحسس التلقائي على أي ملف مصدر في تشغيل src/ Directory

npm run dev

تم تهيئة المشروع أيضًا لصالح الرمز الجمل الذي يوفر الدعم للتكامل للعديد من المحررين لتنسيق الملف المصدر تلقائيًا على حفظ.

مبنى

يمكن إنشاء بناء توزيع عن طريق التشغيل

npm run dist

يتم تشغيل عمليات التكامل المستمر في Circle CI و Travis CI.

الاختبار

linting

يتم ربط مصادر JavaScript مع ESLINT باستخدام تكوين قاعدة القطب الشمالي الذي يمكن تشغيله مع

npm run lint:js

يتم ربط مصادر التخفيضات مع الملاحظة التي تُلاحظ باستخدام مسبق القطب الشمالي الذي يمكن تشغيله مع

npm run lint:md

يمكن تشغيل جميع مهام التصعيد مع

npm run lint

المساهمة

اقرأ دليل المساهمة للتعرف على عملية التطوير وكيفية اقتراح اقتراحات التحسين والإبلاغ عن الأخطاء ، وكيفية إرسال طلبات السحب ودليلات Stylegues للمشروع ، وتنظيم الفرع ونموذج الإصدار.

يتضمن الدليل أيضًا معلومات حول الأمثلة الدنيا والكاملة والقابلة للتحقق وطرق أخرى للمساهمة في المشروع مثل تحسين المشكلات الحالية وتقديم ملاحظات حول المشكلات وطلبات السحب.

حقوق الطبع والنشر © 2018-Present Arctic Ice Studio & Sven Greb