Less.js: إخفاق أقل في تحليل قيم الخاصية المخصصة الصالحة (على سبيل المثال:apply polyfill)

أخشى أن دعم بناء الجملة بخلاف CSS خارج نطاق أقل. لذا فإن -1.

في كلتا الحالتين ، يمكنك ملاحظة أنه يمكنك إرسال أي كود في الإخراج مع الهروب. على سبيل المثال:

xpaper-drawer-panel {
  --paper-drawer-panel-left-drawer: ~"{background-color: red;}";
}

أو بطريقة متعددة الأسطر أكثر إختراقًا:

paper-drawer-panel {
  -:~";--paper-drawer-panel-left-drawer: {";
    background-color: red;
    color: blue;
  -:~";}";
}

في المواقف الأكثر تعقيدًا ، من الممكن دائمًا استخدام <strong i="13">@import</strong> (inline) .

بالنسبة لمحاولات مثل %(~"%d", @ruleset); - لا ، المتغيرات الأقل ليست وحدات ماكرو ، ولا يتم توسيعها بغض النظر عن السياق ، وبشكل خاص لمجموعات القواعد غير المسماة ، فإن الصيغة الصحيحة الوحيدة هي @ruleset() داخل نص مجموعة القواعد و _not_ as قيمة الممتلكات.

حسنًا ، أنا أتفق معك في أنه لا ينبغي دعم البنية غير القياسية بشكل عام.

لكن هذا يعني أن LESS غير متوافق مع البوليمر في كثير من الحالات.

شكرا على الرد على أي حال. : +1:

لست متأكدًا مما إذا كان هذا سيحدث فرقًا في قرارك @ سبع مراحل كحد أقصى ولكن هناك مواصفات مفتوحة لقاعدة @apply ، http://tabatkins.github.io/specs/css-apply-rule/ #issue -882293bd.

راجع أيضًا https://github.com/Polymer/polymer/issues/1373 لأنه يبدو وكأنه شيء ستدفعه Google حقًا خلال العملية.

ويبدو أن SASS تتناول هذا https://github.com/sass/sass/issues/1128

@ donny-dont لاحظ أنني لا أقرر أي شيء (لم أغلق الاقتراح) - أنا ناقد فقط.

حسنًا ، أنشأ Tab Atkins _tens_ من مقترحات CSS القياسية (المسماة "الأفكار") وعلى الرغم من أن رجال Google قد يدفعون هذا إلى متصفحهم حتى غدًا ، إلا أن هذا لا يزال بعيدًا جدًا عن أن يصبح حتى مسودة CSS (تذكر CSS vars لا دخول عالم CSS لحوالي عشر سنوات؟).

@ Seven-stage-max اعتذار عن التضمين. أردت فقط أن أدون ملاحظة مفادها أن Polymer تدفع باقتراح mixin ومن المرجح أن يقوم Chrome بتنفيذه بمجرد تشكيله وهو أمر لم

أنا جديد إلى حد ما في استخدام LESS ، فهل هناك أي نوع من نظام المكونات الإضافية للمحلل في هذه الأنواع من السيناريوهات؟ شيء مثل علم تجريبي يمكنك تشغيله وإيقافه؟

أنا أعيد فتح هذا لأتمكن من إعادة توجيه الطلبات المكررة هنا.

/الفرعية

لدينا مواصفات لهذا ؛ يوجد بوليفيل قام Chrome بتطبيقه ؛ يستخدم البوليمر بالفعل في إصدار 1.0 ؛ والمواقع تستخدم بالفعل البوليمر.

أعتقد أنه توقع منطقي تمامًا لـ Less لدعم بناء الجملة عند مستوى أدنى.

يمر أقل بالفعل من @apply و --foo: bar; و var(--foo) . الشيء الوحيد المفقود هو الحصول على أقل من خلال { ... } في --foo: { property: value; } مع نفس المعالجة الأساسية الممنوحة لكتل ​​css الأخرى ؛ بدلاً من التوقف عن العمل وإلقاء خطأ في التحليل.

أعتقد أن المواصفات الكاملة لمتغيرات CSS يجب أن تدعمها أقل. أتمنى أن يحدث هذا!

تضمين التغريدة

لدينا مواصفات لهذا ؛ يوجد بوليفيل قام Chrome بتطبيقه ؛ يستخدم البوليمر بالفعل في إصدار 1.0 ؛ والمواقع تستخدم بالفعل البوليمر.

بالنسبة لي ، لا يزال هذا ليس سببًا مقنعًا للغاية. هذا يترجم إلى: Google و Google و Google يستخدمون هذا. لم يكن هناك اهتمام منبثق في أي مكان آخر ، ولا توجد مؤشرات على الإطلاق.

@ donny-dont

أنا جديد إلى حد ما في استخدام LESS ، فهل هناك أي نوع من نظام المكونات الإضافية للمحلل في هذه الأنواع من السيناريوهات؟ شيء مثل علم تجريبي يمكنك تشغيله وإيقافه؟

يوجد نظام مكون إضافي ، لكن لا يوجد دعم مباشر لتغيير التحليل. لذا ، لن يكون هذا بالأمر التافه.

تضمين التغريدة
لدينا مواصفات لهذا ؛ يوجد بوليفيل قام Chrome بتطبيقه ؛ يستخدم البوليمر بالفعل في إصدار 1.0 ؛ والمواقع تستخدم بالفعل البوليمر.

بالنسبة لي ، لا يزال هذا ليس سببًا مقنعًا للغاية. هذا يترجم إلى: Google و Google و Google يستخدمون هذا. لم يكن هناك اهتمام منبثق في أي مكان آخر ، ولا توجد مؤشرات على الإطلاق.

سيكون هذا الاستنتاج منطقيًا إذا كنا نتحدث عن بناء جملة أكثر احتكارية وغير مدعوم ينحرف بشكل كبير عن css العادي ؛ لكننا نتحدث عن أخطاء التحليل الأقل إنشاءًا عندما يفهم Less بالفعل التداخل ويكون بناء الجملة المعني مناسبًا تمامًا لقواعد التحليل القائمة على مطابقة قوس CSS ولا يكسر css المحيطة ، ويعمل معالج CSS الرئيسي الآخر والمعالج اللاحق إما على دعمها أو العمل بالفعل.

سيكون هذا الاستنتاج منطقيًا إذا كنا نتحدث عن بناء جملة أكثر احتكارية وغير مدعوم ينحرف بشكل كبير عن css العادي ؛ لكننا نتحدث عن أخطاء التحليل الأقل إنشاءًا عندما يفهم Less بالفعل التداخل ويكون بناء الجملة المعني مناسبًا تمامًا لقواعد التحليل القائمة على مطابقة قوس CSS ولا يكسر css المحيطة ، ويعمل معالج CSS الرئيسي الآخر والمعالج اللاحق إما على دعمها أو العمل بالفعل.

ليس غير ذي صلة. إنها تشبه إلى حد كبير قواعد ليس المنفصلة. وهناك سابقة لأشياء "تمرير من خلال" أخرى تمت إضافتها إلى Less. لذا فأنا لست بالضرورة ضدها. مجرد متشكك إذا كانت هناك قيمة تتجاوز البوليمر في الوقت الحالي.

يتم سرد الدعم الرسمي لمتغيرات CSS هنا: http://caniuse.com/#feat = css-variables

الحد الأدنى من إصدار المستعرض لدعم متغير CSS الافتراضي

• كروم 49
• Chrome لنظام Android 51
• متصفح Android 51
• Firefox لنظام Android 47
• فايرفوكس 31
• سفاري 9.1
• iOS Safari 9.3
• أوبرا 36
• أوبرا موبايل 37

بدون polyfill ، هذا يعادل تقريبًا ، 65٪ استخدام متصفح عالمي.

مع وجود العديد من CSS Variable Polyfills ، المتصفحات التي تطبقها ومزودي المستعرضات الكبار يدفعون من أجلها. يبدو أن هذه ستكون ميزة قيّمة.

المواصفات الرسمية: https://drafts.csswg.org/css-variables/

stramel لا علاقة له بهذه المشكلة. متغيرات CSS مدعومة بالفعل في Less. الطلب حوالي @apply ، وهو ليس جزءًا من تلك المواصفات.

تحرير: ليست كل قيم خصائص CSS المخصصة مدعومة ، انظر أدناه.

@ ماثيو دين آسف ، لقد أسأت الفهم. بغض النظر ،: +1: لمزج CSS / مجموعات الخصائص المخصصة

@ ماثيو دين ما هو شريط لأقل دعم؟ إذا تم تنفيذ متصفح آخر ، فمن الجيد أن تذهب؟

@ donny-dont بما أن Less هو مشروع مجتمعي ، فلا يوجد شريط محدد. لكن نعم ، شيء ما يتجاوز متصفحًا واحدًا سيجعله ميزة ذات أغراض أكثر عمومية.

فقط إذا كان شخص ما يبحث في هذا (كما فعلت أنا): يمكنك وضع كل البوليمر غير القياسي css في ملف منفصل واستيرادها باستخدام الكلمة الأساسية المضمنة في ملف أقل. يجب أن يتفاعل الملف الأقل بين المتغيرات الأقل وخصائص البوليمر المخصصة. ولكن هذه هي الطريقة التي يريدها بوليمر على أي حال. توافق على أنه لا يمكنك تنفيذ كل انحراف عن المعايير.

فقط لإعادة النظر في هذا ، أعتقد أنه كان لدي للأسف نظرة ضيقة لنطاق المشكلة.

هذا هو: نعم ، @apply هو مجرد اقتراح ، ولكن بغض النظر ، _ هذا _ ليس CSS غير صالح. ليس بعد الآن.

paper-drawer-panel {
  --paper-drawer-panel-left-drawer: {
    background-color: red;
  };
}

كان خطئي هو التفكير في أن @apply كان يقترح امتدادًا لبناء جملة الخاصية المخصصة ، لكنه ليس كذلك. _IS_ أعلاه قيمة خاصية مخصصة صالحة ، وعلى هذا النحو ، يجب إضافتها إلى دعم أقل. أتمنى لو كنت قد أخذت الوقت الكافي للتعمق في المواصفات. (هنا: https://www.w3.org/TR/css-variables/#syntax.)

أقل له هدف أساسي لدعم CSS صالح ، ويتم تنفيذ بناء جملة الخاصية المخصصة بالكامل في كل متصفح اعتبارًا من الآن. المواصفات متساهلة للغاية ، وقد تتطلب بعض التغييرات الكبيرة في طريقة تحليل قيم الممتلكات. يمكنك وضع أي شيء فيه. لست متأكدًا من مدى جنونك مع القيم وما إذا كانت المتصفحات ستسمح بذلك. لكن بالطريقة التي قرأت بها المواصفات ، غالبًا ما يكون أي شيء صالحًا إذا كان جيدًا. بمعنى ، حتى تصادف رمزًا مميزًا لفاصلة منقوطة من "المستوى الأعلى" ، يمكنك الالتفاف حول جميع أنواع الأشياء في أقواس معقوفة أو أقواس.

هذا يعني أن مكتبات JavaScript مثل Polymer تزداد احتمالية "اختراق" CSS لوضع الخصائص / القيم التعريفية حيث يمكن قراءتها بواسطة JS ، وهو ما لم يكن ممكنًا قبل ميزة CSS هذه.

لذا 👍 لتنفيذ ASAP.

آسف لأولئك الذين حاولوا الإشارة إلى أن هذا هو بناء جملة خاصية مخصصة صالحة.

ذات صلة: https://github.com/less/less.js/issues/2986

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

اختبار آخر يمكن إضافته إلى اختبارات أقل لتحليل الخاصية المخصصة. هذا CSS صالح تمامًا اعتبارًا من اليوم.

.test {
  --custom-function: () => { let x = 1; window['NAMESPACE'].doSomething(x); };
}

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

لقد بدأت هذا العمل هنا ولكني لست متأكدًا حتى الآن مما إذا كان هذا صحيحًا. https://github.com/less/less.js/blob/edge/lib/less/parser/parser.js#L1326

_ ملاحظة: لتوضيح ما إذا كان أي شخص مرتبكًا عند النظر إلى السطر أعلاه ، فإن JavaScript هذا لن يفعل شيئًا. ستعتبره CSS قيمة مجهولة طويلة وغير معروفة.

بشكل أساسي ، بمجرد إدخال شيء ما في () [] أو {} ، يمكنك تفريغ أي أحرف تريدها.

مم ، أليس كذلك؟ بالنسبة لي ، يمكن أن يكون https://www.w3.org/TR/css-variables/#syntax مثل أي رمز مميز (باستثناء تلك المدرجة هناك) في أي مكان (بغض النظر عن أي نوع من الأقواس). أم أن هذا يفترضه فقرة أخرى؟ هل يمكنك ، من فضلك ، أن تدلني ، حيث يقول عن أي شخصية ، أو أي شيء محدد حول القيم داخل الأقواس؟ (ما لم يكن url(...) بالطبع)؟

بمعنى آخر ، هل أي من --var: ?; أو --var: (?); أو --var: [¾]; صالح بالفعل؟

هذا هو القسم ذو الصلة في الأعلى ، والذي قد أكون قد أسيء تفسيره.

الصيغة المسموح بها للخصائص المخصصة متساهلة للغاية. يتطابق إنتاج <declaration-value> مع أي تسلسل من رمز واحد أو أكثر ، طالما أن التسلسل لا يحتوي على <bad-string-token> ، <bad-url-token> ، لا مثيل له <)-token> ، <]-token> أو <}-token> أو المستوى الأعلى <semicolon-token> الرموز المميزة أو <delim-token> الرموز المميزة بقيمة "!".

إذن ، النقاط المهمة هي:

1. فقط رمز الفاصلة المنقوطة ذو المستوى الأعلى مهم. أفسر ذلك على أنه يعني "ليس ضمن زوج آخر متطابق"؟ لكن قد أساء تفسير معنى "المستوى الأعلى".

2. ربما يكون مثال JS الوارد في تلك الصفحة مضللاً ، ( -foo: if(x > 5) this.width = 10; صالح.) لكن من المؤكد أن الرمز = غير المتباعد ليس رمز CSS نموذجيًا ، ولا هو this.width . بدون توضيح ، وبالنظر إلى مدى تساهل عملية استرداد الأخطاء على المتصفحات ، لا أعتقد أنه يمكننا افتراض أي خطأ في التحليل لأي شيء. نحن نعلم بالفعل أن بناء الجملة @apply صالح (مع مجموعة من القواعد) ، حتى لو كان يحتوي على تطبيق مخصص. لذلك نحن نعلم أن الخصائص المخصصة تسمح بعدة فواصل منقوطة داخل {} ؛ لذلك فمن المنطقي أن تشير هذه اللغة إلى شيء يتعلق بالطبيعة المتساهلة ضمن مطابقة () ، [] ، {} . هناك الكثير مما لا نعرفه هنا ، وبدون معرفة _ ما الذي يمكن إدخاله في خاصية مخصصة ، أعتقد أنه يتعين علينا افتراض أن أي شيء يمكن أن يدخل فيه ، طالما أنه يتبع بنية معينة ("طالما أن التسلسل لا تحتوي على <bad-string-token> ، <bad-url-token> ، لا مثيل لها <)-token> ، <]-token> ، أو <}-token> ") وقم بتمرير هذه الخاصية إلى المتصفح. أعتقد أن الهدف هنا هو خلق أقصى قدر من المرونة للمطورين ، مع إنشاء الحد الأدنى من المتطلبات لتحليل ناجح.

لذلك ، لا يمكنك فعل هذا:

.bar {
  --foo: {;
  --baz: ";
}

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

بالنسبة لهذا:

هي إما - فار:؟ ؛ ، - فار: (؟) ؛ أو - فار: [¾] ؛ صالح؟

لا أعلم.

هل يجب أن نعاملهم على أنهم صالحون؟ نعم IMO. لأننا لا / لا نستطيع أن نعرف ، لكننا نستطيع تحليلها بنجاح دون الكثير من المتاعب.

بالنسبة للتنفيذ المحتمل ... ليست مشكلة كبيرة للسماح بأي شيء هناك حتى ; ولكن بعد ذلك لا يزال يتعين علينا التعامل مع السلاسل وعناوين url على الأقل والتداخل {} (لأنها قد تحتوي على ; الداخل). من الواضح أن هذا يعني عدم وجود رمز أقل في الداخل.

قد تكون الخطوة التالية هي معاملته (في مرحلة التحليل) كنوع من DR (بدونه الخارجي {} ) مع المزيد من الرموز المسموح بها (على الرغم من أنه يبدو وكأنه طريق مسدود حيث يمكنك ذلك ' إعادة استخدام DR-parser لشيء مثل --var: (1 > 2) / {whatever} foo; )

وأخيرًا ، بالنسبة لشيء أكثر ملاءمة ، لا يمكنني بصدق رؤية أي شيء سوى كتابة رمز CSS-tokeniser كامل الميزات مع بعض الميزات الأقل (الرموز المميزة ثم تقييمها) المسموح بها. مشكلة biiiiiiiig بعبارة أخرى :(

فقط رمز الفاصلة المنقوطة ذو المستوى الأعلى مهم. أفسر ذلك على أنه يعني "ليس ضمن زوج آخر متطابق"؟ لكن قد أساء تفسير معنى "المستوى الأعلى".

نعم ، أنا متأكد من أنه يتعلق بإنهاء ; . أي كما في: --var: ";" url(;) {;}; صالح و --var: ; {} foo; ليس (أول ; بكونه "المستوى الأعلى" ينهي البيان).
لست متأكدًا من (;) الرغم من ذلك.

من الواضح أن هذا يعني عدم وجود رمز أقل في الداخل.

فكرتي الوحيدة هي أنه يمكننا السماح بصيغة الاستيفاء ، في حال أردت إنشاء خصائص مخصصة. ولكن ربما يكون هذا نوعًا من فكرة "الجولة الثانية إذا كان هناك اهتمام".

لست متأكدًا من مجرد (؛) رغم ذلك.

انا ايضا لست كذلك؟ أعتقد أن المواصفات غالبًا ما تحتوي على تفاصيل تحليل منشورة في مكان ما (مثل الرسوم البيانية لمسار الرمز المميز) ، لكنني لست متأكدًا مما إذا كانت موجودة في هذه الحالة. كمرحلة 1 - يتطلب فقط مطابقة {} ، () ، والاقتباسات ، وإلقاء أي شيء في عقدة مجهولة حتى يبدو المستوى الأعلى ; جيدًا. الأقواس المطابقة [] قد لا تكون ضرورية ، لكنها مذكورة أيضًا وهي تافهة إلى حد ما بمجرد وجود جميع القطع الأخرى هناك.

لا أعتقد أننا بحاجة إلى ترميز أي شيء بشكل خاص ، أو الدخول في خلط هذا مع عناصر DR. بعد كل شيء ، يمكن أن ينتهي شخص ما بـ:

.weird {
  --php: ($x = 5 /* + 15 */ + 5; echo $x;);
  --example: [My DR will be --this: { 
    blah: nope;
    --never mind i gave up;
    no wait here it --is: {
      lol: cats;
    }
  }];
}

بمعنى آخر ، سيكون من الأفضل لـ Less أن يمسح يديه عن التعامل مع محتويات الخصائص المخصصة.

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

لاحظ أنه إذا قمنا بتعديل المثال أعلاه ، فيجب اعتبار هذا غير صالح:

.weird {
  --example: [My DR will be --this: { 
    blah: nope;
    --never mind i gave up;
    no wait here it --is: {
      lol: cats;
   // missing matching }
  }];
}

"لا أقل رمز"

ربما ، ولكن هذا يعني خفض مستوى - مثل الآن يمكن للمرء أن يكتب:
--var: darken(red, 5%) + 1;
وهو يعمل ، ولكن بعد ذلك (من أجل --fortran: read (*, *, iostat=ierr) radius, height; ) لن يكون :(

يمكن أن يكون لدينا خيار لهذا على الأرجح (مثل --oh-no-yet-another-option-for-custom-properties-to-be-parsed-one-way-or-another: on :)

ربما ، ولكن هذا يعني خفض مستوى - مثل الآن يمكن للمرء أن يكتب - فار: أغمق (أحمر ، 5٪) ؛ وهو يعمل ، ولكن بعد ذلك (من أجل --fortran: اقرأ (* ، * ، iostat = ierr) نصف القطر ، الارتفاع ؛) لن :(

🤔 حسنًا ..... نعم أرى ما تعنيه ، ولهذا السبب ربما يكون الاستيفاء من نوع ما ضروريًا؟ يمكننا أساسًا في المحلل اللغوي التعامل مع أشياء مشابهة لما يلي:

<strong i="8">@iostat</strong>: ierr;
--fortran: read (*, *, iostat=@{iostat}) radius, height;

// treat similar to:
--fortran: ~"read (*, *, iostat=@{iostat}) radius, height";

(مع التحذيرات المذكورة أعلاه المتعلقة برموز المطابقة المناسبة؟)

أعني .... البديل هو أننا نوصي بشكل أساسي بالتهرب من بناء الجملة. سيكون من الجيد فقط إجراء تعديلات أقل على كود CSS الموضعي.

نعم ، الاستيفاء سيفي بالغرض. على الرغم من أنه لا يزال من الجيد إجراء تحليل لـ DR-ike كخيار تجريبي (أنا متأكد من أن الكثيرين سيفضلون --var: darken(red, 5%); حقيقيًا على --javascript: 1 = 2; على الأقل حتى ينتشر قرصنة الممتلكات المخصصة: )

بعبارة أخرى ، أنا بخير مع كلا الطريقتين (بشكل منفصل أو متزامن).

أعتقد أن لدي تنفيذ / حل قوي إلى حد ما لهذا الغرض. لقد استخدمت عددًا من أمثلة التعليمات البرمجية من هذا الموضوع في الاختبارات. لذلك ، يتم التعامل مع قيم الخصائص المخصصة وقواعد at غير المعروفة بشكل أساسي كقيم بين علامات اقتباس تم تجاوزها للسماح بالاستيفاء. تحقق من # 3213.

مثبت.