1
1
mirror of https://github.com/primer/css.git synced 2024-12-23 22:24:11 +03:00

create classes.json at prepare time

This commit is contained in:
Shawn Allen 2018-11-08 09:58:56 -08:00
parent 9c6e29f935
commit 3af1845f12
6 changed files with 66 additions and 38 deletions

View File

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

View File

@ -1,42 +1,38 @@
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]
if (utilityClasses.indexOf(ruleClass) >= 0) {
stylelint.utils.report({
message: messages.rejected(ruleClass),
node: rule,
result: result,
ruleName: ruleName
})
}
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),
node: rule,
result: result,
ruleName: ruleName
})
}
}
})

View File

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

View File

@ -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"
}
}

View File

@ -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
})

View File

@ -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; }'
}
]
})