diff --git a/.npmignore b/.npmignore index a45481e8..3ffb8e96 100644 --- a/.npmignore +++ b/.npmignore @@ -1,3 +1,3 @@ -__tests__ +tests *.yml .github diff --git a/README.md b/README.md index 93547a64..86842904 100644 --- a/README.md +++ b/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 diff --git a/__tests__/index.js b/__tests__/index.js deleted file mode 100644 index c6acd22d..00000000 --- a/__tests__/index.js +++ /dev/null @@ -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") - }) -}) diff --git a/index.js b/index.js index 7ce897e1..175c1597 100644 --- a/index.js +++ b/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, diff --git a/package.json b/package.json index eed6465f..3bea3991 100644 --- a/package.json +++ b/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" }, diff --git a/tests/index.js b/tests/index.js new file mode 100644 index 00000000..878b9542 --- /dev/null +++ b/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") + }) +})