Merge pull request #2 from primer/no_unsupported_browsers

Don't allow any CSS features not supported by these browsers

.npmignore

@@ -1,3 +1,3 @@
-__tests__
+tests
 *.yml
 .github

README.md

@@ -116,6 +116,7 @@ This is a list of the lints turned on in this configuration, and what they do.
 * [no-eol-whitespace](http://stylelint.io/user-guide/rules/no-eol-whitespace/): Disallow end-of-line whitespace.
 * [no-extra-semicolons](http://stylelint.io/user-guide/rules/no-extra-semicolons/): Disallow extra semicolons.
 * [no-missing-end-of-source-newline](http://stylelint.io/user-guide/rules/no-missing-end-of-source-newline/): Disallow missing end-of-file newlines in non-empty files.
+* [no-unsupported-browser-features](http://stylelint.io/user-guide/rules/no-unsupported-browser-features/): Disallow features that are unsupported by the browsers that [we are targeting in the config](https://github.com/primer/stylelint-config-primer/blob/70866772c3b916be5c62b95cfd94b37dfc6e5b04/index.js#L267)
 
 #### Media Feature
 

__tests__/index.js

@@ -1,106 +0,0 @@
-const config = require("../")
-const stylelint = require("stylelint")
-const test = require("ava")
-
-const validCss =
-`@import "x.css";
-@import "y.css";
-
-/**
- * Multi-line comment
- */
-.selector-1,
-.selector-2,
-.selector-3[type="text"] {
-  display: block;
-  box-sizing: border-box;
-  color: #333;
-  background: linear-gradient(#fff, rgba(0, 0, 0, 0.8));
-}
-
-.selector-a,
-.selector-b:not(:first-child) {
-  top: calc(calc(1em * 2) / 3);
-  padding: 10px !important;
-}
-
-.selector-x { width: 10%; }
-.selector-y { width: 20%; }
-.selector-z { width: 30%; }
-
-/* Single-line comment */
-@media (min-width >= 60em) {
-  .selector {
-    /* Flush to parent comment */
-    transform: translate(1, 1) scale(3);
-  }
-}
-
-@media (min-orientation: portrait), projection and (color) {
-  .selector-i + .selector-ii {
-    font-family: helvetica, "arial black", sans-serif;
-    background: color(rgb(0, 0, 0) lightness(50%));
-  }
-}
-
-/* Flush single line comment */
-@media
-  screen and (min-resolution: 192dpi),
-  screen and (min-resolution: 2dppx) {
-  .selector {
-    height: 10rem;
-    margin: 10px;
-    margin-bottom: 5px;
-    background-image:
-      repeating-linear-gradient(
-        -45deg,
-        transparent,
-        #fff 25px,
-        rgba(255, 255, 255, 1) 50px
-      );
-    box-shadow:
-      0 1px 1px #000,
-      0 1px 0 #fff,
-      2px 2px 1px 1px #ccc inset;
-  }
-
-  /* Flush nested single line comment */
-  .selector::after {
-    content: "→";
-    background-image: url("x.svg");
-  }
-}
-`
-
-const invalidCss =
-`a {
-  top: .2em;
-}
-`
-
-test("no warnings with valid css", t => {
-  return stylelint.lint({
-    code: validCss,
-    config: config,
-  })
-  .then(data => {
-    const { errored, results } = data
-    const { warnings } = results[0]
-    t.falsy(errored, "no errored")
-    t.is(warnings.length, 0, "flags no warnings")
-  })
-})
-
-test("a warning with invalid css", t => {
-  return stylelint.lint({
-    code: invalidCss,
-    config: config,
-  })
-  .then(data => {
-    const { errored, results } = data
-    const { warnings } = results[0]
-    t.truthy(errored, "errored")
-    t.is(warnings.length, 1, "flags one warning")
-    t.is(warnings[0].text, "Expected a leading zero (number-leading-zero)", "correct warning text")
-  })
-})

index.js

@@ -263,6 +263,10 @@ module.exports = {
     "no-eol-whitespace": true,
     "no-extra-semicolons": true,
     "no-missing-end-of-source-newline": true,
+    "no-unsupported-browser-features": [true, {
+      "browsers": "> 5%, last 2 firefox versions, last 2 chrome versions, last 2 safari versions, last 2 edge versions, ie 11",
+      "severity": "warning"
+    }],
     "number-leading-zero": "always",
     "number-no-trailing-zeros": true,
     "primer/selector-no-utility": true,

package.json

@@ -4,7 +4,7 @@
   "description": "Sharable stylelint config used by GitHub's CSS",
   "main": "index.js",
   "scripts": {
-    "ava": "ava --verbose \"__tests__/**/*.js\"",
+    "ava": "ava --verbose \"tests/**/*.js\"",
     "lint": "eslint **/*.js",
     "test": "npm run lint && npm run ava"
   },

tests/index.js

@@ -0,0 +1,53 @@
+const config = require("../")
+const stylelint = require("stylelint")
+const test = require("ava")
+
+const validCss =
+`.selector-x { width: 10%; }
+.selector-y { width: 20%; }
+.selector-z { width: 30%; }
+`
+
+const invalidCss =
+`a {
+  top: .2em;
+}
+`
+
+test("stylelint runs with config", t => {
+  return stylelint.lint({
+    code: "a { font-weight: bold; }",
+    config: config
+  })
+  .then(data => {
+    t.truthy(true, "config works")
+    t.truthy(data, "data exists")
+  })
+})
+
+test("no warnings with valid css", t => {
+  return stylelint.lint({
+    code: validCss,
+    config: config,
+  })
+  .then(data => {
+    const { errored, results } = data
+    const { warnings } = results[0]
+    t.falsy(errored, "no errored")
+    t.is(warnings.length, 0, "flags no warnings")
+  })
+})
+
+test("a warning with invalid css", t => {
+  return stylelint.lint({
+    code: invalidCss,
+    config: config,
+  })
+  .then(data => {
+    const { errored, results } = data
+    const { warnings } = results[0]
+    t.truthy(errored, "errored")
+    t.is(warnings.length, 1, "flags one warning")
+    t.is(warnings[0].text, "Expected a leading zero (number-leading-zero)", "correct warning text")
+  })
+})