@primer/stylelint-config 12.3.3-rc.c178bc3 → 12.4.0-rc.a92b3f2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 12.4.0
+
+### Minor Changes
+
+- [#232](https://github.com/primer/stylelint-config/pull/232) [`27ddfc9`](https://github.com/primer/stylelint-config/commit/27ddfc98f93ed898552bb62aa0926d35497dda72) Thanks [@jonrohan](https://github.com/jonrohan)! - Creating a responsive-widths plugin to keep fixed widths smaller than the minimum viewport size
+
 ## 12.3.3
 
 ### Patch Changes

package/README.md

@@ -39,6 +39,7 @@ Primer Stylelint Config extends the [stylelint-config-standard](https://github.c
 - [primer/typography](./plugins/#primertypography): Enforces the use of typography variables for certain CSS properties.
 - [primer/borders](./plugins/#primerborders): Enforces the use of certain variables for border properties.
 - [primer/box-shadow](./plugins/#primerbox-shadow): Enforces the use of certain variables for `box-shadow`.
+- [primer/responsive-widths](./plugins/#primerresponsive-widths): Errors on `width` and `min-width` that is larger than the minimum browser size supported. `320px`
 
 ## License
 

package/index.js

@@ -17,6 +17,7 @@ module.exports = {
     './plugins/borders',
     './plugins/box-shadow',
     './plugins/colors',
+    './plugins/responsive-widths',
     './plugins/spacing',
     './plugins/typography'
   ],
@@ -64,6 +65,7 @@ module.exports = {
       {severity: 'warning', files: 'node_modules/@primer/primitives/dist/scss/colors*/*.scss'}
     ],
     'primer/no-unused-vars': [true, {severity: 'warning'}],
+    'primer/responsive-widths': true,
     'primer/spacing': true,
     'primer/typography': true,
     'scss/at-extend-no-missing-placeholder': true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.3.3-rc.c178bc3",
+  "version": "12.4.0-rc.a92b3f2",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -31,7 +31,7 @@
     "postcss-scss": "^4.0.2",
     "postcss-value-parser": "^4.0.2",
     "string.prototype.matchall": "^4.0.2",
-    "stylelint-config-standard": "24.0.0",
+    "stylelint-config-standard": "25.0.0",
     "stylelint-no-unsupported-browser-features": "^5.0.1",
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.0.0",
@@ -43,20 +43,20 @@
     "stylelint": ">= 14.0.0"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "0.4.2",
-    "@changesets/cli": "2.20.0",
+    "@changesets/changelog-github": "0.4.3",
+    "@changesets/cli": "2.21.1",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^19.0.0",
     "@primer/primitives": "^7.0.1",
     "dedent": "0.7.0",
-    "eslint": "8.8.0",
+    "eslint": "8.11.0",
     "eslint-plugin-github": "4.3.5",
-    "eslint-plugin-jest": "26.0.0",
+    "eslint-plugin-jest": "26.1.1",
     "eslint-plugin-prettier": "4.0.0",
-    "jest": "27.4.7",
-    "jest-preset-stylelint": "4.2.0",
-    "prettier": "2.5.1",
-    "stylelint": "14.3.0"
+    "jest": "27.5.1",
+    "jest-preset-stylelint": "5.0.1",
+    "prettier": "2.6.0",
+    "stylelint": "14.6.0"
   },
   "jest": {
     "preset": "jest-preset-stylelint",

package/plugins/README.md

@@ -17,6 +17,7 @@ This directory contains all of our custom stylelint plugins, each of which provi
   - [`primer/typography`](#primertypography)
   - [`primer/borders`](#primerborders)
   - [`primer/box-shadow`](#primerbox-shadow)
+  - [`primer/responsive-widths`](#primerresponsive-widths)
   - [Variable rules](#variable-rules)
     - [Variable rule options](#variable-rule-options)
 
@@ -207,6 +208,10 @@ This [variable rule](#variable-rules) enforces the use of border-specific variab
 
 This [variable rule](#variable-rules) enforces the use of `$box-shadow*` variables for the `box-shadow` CSS property. See [the configuration](./box-shadow.js) for more info.
 
+## `primer/responsive-widths`
+
+This plugin checks for `width` and `min-width` declarations that use a value less than the minimum browser size. `320px`
+
 ## Variable rules
 
 Variable rules are created using a general-purpose helper that can validate constraints for matching CSS properties and values. In general, the Primer CSS variable rules enforce two basic principles for custom CSS:

package/plugins/responsive-widths.js

@@ -0,0 +1,98 @@
+const stylelint = require('stylelint')
+const declarationValueIndex = require('stylelint/lib/utils/declarationValueIndex')
+const valueParser = require('postcss-value-parser')
+
+const ruleName = 'primer/responsive-widths'
+
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: value => {
+    return `A value larger than the smallest viewport could break responsive pages. Use a width value smaller than ${value}. https://primer.style/css/support/breakpoints`
+  }
+})
+
+// 320px is the smallest viewport size that we support
+
+const walkGroups = (root, validate) => {
+  for (const node of root.nodes) {
+    if (node.type === 'function') {
+      walkGroups(node, validate)
+    } else {
+      validate(node)
+    }
+  }
+  return root
+}
+
+// eslint-disable-next-line no-unused-vars
+module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, context) => {
+  if (!enabled) {
+    return noop
+  }
+
+  const lintResult = (root, result) => {
+    root.walk(decl => {
+      // Ignore things inside of breakpoints
+      if (decl.type === 'atrule' && decl.name === 'include' && decl.params.includes('breakpoint')) {
+        return false
+      }
+
+      if (decl.type !== 'decl' || !decl.prop.match(/^(min-width|width)/)) {
+        return noop
+      }
+
+      const problems = []
+
+      walkGroups(valueParser(decl.value), node => {
+        // Only check word types. https://github.com/TrySound/postcss-value-parser#word
+        if (node.type !== 'word') {
+          return
+        }
+
+        // Exact values to ignore.
+        if (['*', '+', '-', '/', '0', 'auto', 'inherit', 'initial'].includes(node.value)) {
+          return
+        }
+
+        const valueUnit = valueParser.unit(node.value)
+
+        switch (valueUnit.unit) {
+          case 'px':
+            if (parseInt(valueUnit.number) > 320) {
+              problems.push({
+                index: declarationValueIndex(decl) + node.sourceIndex,
+                message: messages.rejected(node.value)
+              })
+            }
+            break
+          case 'vw':
+            if (parseInt(valueUnit.number) > 100) {
+              problems.push({
+                index: declarationValueIndex(decl) + node.sourceIndex,
+                message: messages.rejected(node.value)
+              })
+            }
+            break
+        }
+      })
+
+      if (problems.length) {
+        for (const err of problems) {
+          stylelint.utils.report({
+            index: err.index,
+            message: err.message,
+            node: decl,
+            result,
+            ruleName
+          })
+        }
+      }
+    })
+  }
+
+  return lintResult
+})
+
+function noop() {}
+
+module.exports.ruleName = ruleName
+module.exports.messages = messages