@@ -43,6 +43,7 @@ an exception. Thorough testing trumps style.
43
43
* [ DO use type selectors as placeholders] ( #do-use-type-selectors-as-placeholders )
44
44
* [ DO use descriptive names for multiple placeholders] ( #do-use-descriptive-names-for-multiple-placeholders )
45
45
* [ DO use single-letter names for irrelevant placeholders] ( #do-use-single-letter-names-for-irrelevant-placeholders )
46
+ * [ DO use ` pfx ` for vendor prefixes] ( #do-use-pfx-for-vendor-prefixes )
46
47
* [ DO use style rules for expression-level tests] ( #do-use-style-rules-for-expression-level-tests )
47
48
* [ PREFER making imported files partials] ( #prefer-making-imported-files-partials )
48
49
* [ DO name single imported or used files "other"] ( #do-name-single-imported-or-used-files-other )
@@ -617,6 +618,45 @@ property name.
617
618
[ its path ] : #do-use-descriptive-paths
618
619
[ one thing ] : #do-test-only-one-thing-per-spec
619
620
621
+ ### DO use ` pfx ` for vendor prefixes
622
+
623
+ <details >
624
+ <summary >Example</summary >
625
+
626
+ #### Good
627
+
628
+ ``` hrx
629
+ <===> input.scss
630
+ a {b: is-superselector(":-pfx-matches(c d)", "c d")}
631
+
632
+ <===> output.css
633
+ a {
634
+ b: true;
635
+ }
636
+ ```
637
+
638
+ #### Bad
639
+
640
+ ``` hrx
641
+ <===> input.scss
642
+ a {b: is-superselector(":-webkit-matches(c d)", "c d")}
643
+
644
+ <===> output.css
645
+ a {
646
+ b: true;
647
+ }
648
+ ```
649
+
650
+ </details >
651
+
652
+ There are a few situation in which Sass specifically parses vendor prefixes. In
653
+ these cases, * all* vendor prefixes should be treated equivalently, whether
654
+ they're from a real browser or not. To test this, use the non-existent vendor
655
+ prefix ` pfx ` .
656
+
657
+ If multiple different vendor prefixes are needed, index them by letter, as
658
+ ` -pfxa- ` , ` -pfxb ` , and so on.
659
+
620
660
### DO use style rules for expression-level tests
621
661
622
662
<details >
0 commit comments