stylelint-8-point-grid
Version:
Stylelint plugin to validate CSS with 8-point grid guideline
120 lines (119 loc) • 4.3 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
var stylelint_1 = require("stylelint");
var utils_1 = require("./utils");
var ruleMessages = stylelint_1.utils.ruleMessages, validateOptions = stylelint_1.utils.validateOptions, report = stylelint_1.utils.report;
var ruleName = 'plugin/8-point-grid';
exports.ruleName = ruleName;
var rules = (_a = {},
_a[ruleName] = { base: 8 },
_a);
exports.rules = rules;
var plugins = ['stylelint-8-point-grid'];
exports.plugins = plugins;
var supportedCssProperties = [
'margin',
'margin-top',
'margin-bottom',
'margin-left',
'margin-right',
'padding',
'padding-top',
'padding-bottom',
'padding-left',
'padding-right',
'height',
'min-height',
'max-height',
'width',
'min-width',
'max-width',
'top',
'bottom',
'right',
'left',
// CSS Logical Properties
'margin-block',
'margin-block-start',
'margin-block-end',
'margin-inline',
'margin-inline-start',
'margin-inline-end',
'padding-block',
'padding-block-start',
'padding-block-end',
'padding-inline',
'padding-inline-start',
'padding-inline-end',
'block-size',
'min-block-size',
'max-block-size',
'inline-size',
'min-inline-size',
'max-inline-size',
'inset',
'inset-block',
'inset-inline',
'inset-block-start',
'inset-block-end',
'inset-inline-start',
'inset-inline-end',
];
// Ignore values with `calc` and sass variables
var ignoreList = ['calc', '\\$\\w+'];
var pattern = function (props) {
return new RegExp(props.map(function (prop) { return "^" + prop + "$"; }).join('|'));
};
var ignorePattern = new RegExp(ignoreList.join('|'));
var valid = function (value) {
return utils_1.hasSupportedValue(value) && !String(value).match(ignorePattern);
};
var messages = ruleMessages(ruleName, {
invalid: function (prop, actual, base) {
var baseRem = base / 16;
if (utils_1.hasPixelValue(actual) && utils_1.hasRemValue(actual))
return "Invalid `" + prop + ": " + actual + "`. Pixel values should be divisible by " + base + " and rem values should be divisible by " + baseRem + ".";
if (utils_1.hasPixelValue(actual))
return "Invalid `" + prop + ": " + actual + "`. Pixel values should be divisible by " + base + ".";
return "Invalid `" + prop + ": " + actual + "`. Rem values should be divisible by " + baseRem + ".";
},
});
exports.messages = messages;
var rule = stylelint_1.createPlugin(ruleName, function (primaryOption) {
return function (postcssRoot, postcssResult) {
var validOptions = validateOptions(postcssResult, ruleName, {
actual: primaryOption,
possible: {
base: utils_1.validBase,
ignorelist: supportedCssProperties,
allowlist: utils_1.hasSupportedValue,
customProperties: utils_1.isString,
},
});
if (!validOptions)
return;
var _a = primaryOption.allowlist, allowlist = _a === void 0 ? [] : _a, _b = primaryOption.customProperties, customProperties = _b === void 0 ? [] : _b, _c = primaryOption.ignorelist, ignorelist = _c === void 0 ? [] : _c;
var properties = __spreadArrays(supportedCssProperties, customProperties).filter(function (property) { return !ignorelist.includes(property); });
postcssRoot.walkDecls(pattern(properties), function (decl) {
if (!valid(decl.value))
return;
if (!utils_1.validSupportedValue(decl.value, primaryOption.base, allowlist)) {
report({
ruleName: ruleName,
result: postcssResult,
node: decl,
message: messages.invalid(decl.prop, decl.value, primaryOption.base),
});
}
});
};
}).rule;
exports.rule = rule;