create classes.json at prepare time

tools/stylelint-selector-no-utility/.gitignore

@@ -0,0 +1 @@
+classes.json

tools/stylelint-selector-no-utility/index.js

@@ -1,34 +1,31 @@
-var stylelint = require("stylelint")
-var primerUtilities = require("primer-utilities")
+const stylelint = require('stylelint')
 
-var ruleName = "primer/selector-no-utility"
-var messages = stylelint.utils.ruleMessages(ruleName, {
-  rejected: function(classname) { return "Avoid styling the utilty class `" + classname + "`" }
+const ruleName = 'primer/selector-no-utility'
+const messages = stylelint.utils.ruleMessages(ruleName, {
+  rejected: classname => `Avoid styling the utilty class "${classname}"`
 })
 
-module.exports = stylelint.createPlugin(ruleName, function(enabled) {
-  return function(root, result) {
+const match = require('./match')
+const utilityClasses = require('./classes.json')
 
-    var validOptions = stylelint.utils.validateOptions(result, ruleName, {
+module.exports = stylelint.createPlugin(ruleName, enabled => {
+  return (root, result) => {
+
+    const validOptions = stylelint.utils.validateOptions(result, ruleName, {
       actual: enabled,
       possible: [true, false]
     })
 
-    if (!validOptions) { return }
-
-    var utilityClasses = primerUtilities.cssstats.selectors.values
-
-    if (utilityClasses.length === 0) {
+    if (!validOptions) {
       return
     }
 
-    root.walkRules(function(rule) {
-
-      var ruleClasses = rule.selector.match(/\.[a-z\-_0-9]+/ig)
-
-      if (ruleClasses != null) {
-        for (var i = 0; i < ruleClasses.length; i++) {
-          var ruleClass = ruleClasses[i]
+    root.walkRules(rule => {
+      const matches = match(rule.selector)
+      if (!matches) {
+        return
+      }
+      for (const ruleClass of Array.from(matches)) {
         if (utilityClasses.indexOf(ruleClass) >= 0) {
           stylelint.utils.report({
             message: messages.rejected(ruleClass),
@@ -38,7 +35,6 @@ module.exports = stylelint.createPlugin(ruleName, function(enabled) {
           })
         }
       }
-      }
     })
   }
 })

tools/stylelint-selector-no-utility/match.js

@@ -0,0 +1,5 @@
+const UTILITY_CLASS_PATTERN = /\.[-\w]+/g
+
+module.exports = function matchUtilities(selector) {
+  return selector.match(UTILITY_CLASS_PATTERN)
+}

tools/stylelint-selector-no-utility/package.json

@@ -4,9 +4,10 @@
   "description": "Stylelint rule that doesn't allow the styling of utility classes in CSS",
   "main": "index.js",
   "scripts": {
+    "prepare": "node prepare.js",
     "lint": "eslint .",
-    "tape": "node test/index.js",
-    "test": "../../script/npm-run-all lint tape",
+    "test": "node test/index.js",
+    "pretest": "npm run prepare",
     "prepublishOnly": "../../script/notify pending",
     "publish": "../../script/notify success"
   },
@@ -29,6 +30,7 @@
   "devDependencies": {
     "eslint": "^3.19.0",
     "eslint-plugin-github": "^0.12.0",
+    "fs-extra": "^4.0.2",
     "stylelint-test-rule-tape": "^0.2.0"
   }
 }

tools/stylelint-selector-no-utility/prepare.js

@@ -0,0 +1,24 @@
+const {join} = require('path')
+const {writeFile} = require('fs-extra')
+const utilities = require('primer-utilities')
+
+const match = require('./match')
+const classes = utilities.cssstats.selectors.values.reduce((set, selector) => {
+  const matches = match(selector)
+  if (matches) {
+    for (const klass of Array.from(matches)) {
+      set.add(klass)
+    }
+  }
+  return set
+}, new Set())
+
+const data = JSON.stringify(Array.from(classes), null, 2)
+const filename = join(__dirname, 'classes.json')
+
+writeFile(filename, data, 'utf8')
+  .then(() => console.warn(`wrote ${classes.size} classes to: ${filename}`))
+  .catch(error => {
+    console.error(error)
+    process.exitCode = 1
+  })

tools/stylelint-selector-no-utility/test/index.js

@@ -1,5 +1,5 @@
-var testRule = require("stylelint-test-rule-tape")
-var rule = require("..")
+const testRule = require('stylelint-test-rule-tape')
+const rule = require('..')
 
 testRule(rule.rule, {
   ruleName: rule.ruleName,
@@ -7,24 +7,24 @@ testRule(rule.rule, {
   skipBasicChecks: true,
   accept: [
     {
-      code: "a {  }"
+      code: 'a {  }'
     }
   ],
   reject: [
     {
-      code: ".m-0 { color: #fff; }"
+      code: '.m-0 { color: #fff; }'
     },
     {
-      code: ".m-0:hover { color: #fff; }"
+      code: '.m-0:hover { color: #fff; }'
     },
     {
-      code: ".m-2, .foo { color: #fff; }"
+      code: '.m-2, .foo { color: #fff; }'
     },
     {
-      code: ".m-2[type=button] { color: #fff; }"
+      code: '.m-2[type=button] { color: #fff; }'
     },
     {
-      code: ".foo.m-0 { color: #fff; }"
+      code: '.foo.m-0 { color: #fff; }'
     }
   ]
 })