web_dev_style: ignore --css-vars from alphabetical ordering requirement

chrome/browser/web_dev_style/css_checker_test.py

Index: chrome/browser/web_dev_style/css_checker_test.py
diff --git a/chrome/browser/web_dev_style/css_checker_test.py b/chrome/browser/web_dev_style/css_checker_test.py
index 4b1cd3e9bcdec1134038293f25c695ff7425f861..d7f9515ee1cec189d39d0e444cbe04cdd8e485be 100755
--- a/chrome/browser/web_dev_style/css_checker_test.py
+++ b/chrome/browser/web_dev_style/css_checker_test.py
@@ -140,6 +140,21 @@ div {
     border-left: 5px;
     border: 5px solid red;""")
 
+  def testCssAlphaWithVariables(self):
+    self.VerifyContentIsValid("""
+#id {
+  --zzyxx-xylophone: 3px;
+  --ignore-me: {
+    /* TODO(dbeam): fix this by creating a "sort context". If we simply strip
+     * off the mixin, the inside contents will be compared to the outside
+     * contents, which isn't what we want. */
+    visibility: hidden;
+    color: black;
+  };
+  --aardvark-animal: var(--zzyxz-xylophone);
+}
+""")
+
   def testCssBracesHaveSpaceBeforeAndNothingAfter(self):
     self.VerifyContentsProducesOutput("""
 /* Hello! */div/* Comment here*/{