@atlaskit/stylelint-design-system
Version:
Stylelint plugin for use with the Atlassian Design System.
142 lines (141 loc) • 5.51 kB
JavaScript
import _toArray from "@babel/runtime/helpers/toArray";
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import valueParser from 'postcss-value-parser';
import stylelint from 'stylelint';
import renameMapping from '@atlaskit/tokens/rename-mapping';
import { getCSSCustomProperty } from '@atlaskit/tokens/utils/get-css-custom-property';
import { getDefaultTokenValue } from '../../utils/get-default-token-value';
import { isFunction } from '../../utils/is-function';
import { isToken } from '../../utils/is-token';
import { isVar } from '../../utils/is-var';
import { isWord } from '../../utils/is-word';
export var ruleName = 'design-system/no-unsafe-design-token-usage';
export var messages = stylelint.utils.ruleMessages(ruleName, {
invalidToken: function invalidToken(name) {
return "The token '".concat(name, "' does not exist. You can find the design tokens reference at <https://atlaskit.atlassian.com/packages/design-system/tokens/docs/tokens-reference>.");
},
tokenRemoved: function tokenRemoved(name, replacement) {
return "The token '".concat(name, "' has been deleted. Please use ").concat(replacement, " instead.");
},
missingFallback: 'Token usage is missing a fallback.',
hasFallback: 'Token usage has a fallback.'
});
var isInvalidToken = function isInvalidToken(node) {
return isWord(node) && node.value.startsWith('--ds-') && !isToken(node);
};
var isDeletedToken = function isDeletedToken(node) {
return isWord(node) && node.value.startsWith('--ds-') && renameMapping.filter(function (_ref) {
var state = _ref.state;
return state === 'deleted';
}).some(function (token) {
return getCSSCustomProperty(token.path) === node.value;
});
};
var ruleBase = function ruleBase(isEnabled) {
var flags = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var context = arguments.length > 2 ? arguments[2] : undefined;
return function (root, result) {
var validOptions = stylelint.utils.validateOptions(result, ruleName, {
actual: isEnabled,
possible: [true, false]
}, {
actual: flags,
possible: {
shouldEnsureFallbackUsage: [true, false],
fallbackUsage: ['forced', 'optional', 'none']
},
optional: true
});
if (!validOptions || !isEnabled) {
return;
}
var _ref2 = flags,
shouldEnsureFallbackUsage = _ref2.shouldEnsureFallbackUsage,
_ref2$fallbackUsage = _ref2.fallbackUsage,
fallbackUsage = _ref2$fallbackUsage === void 0 ? 'optional' : _ref2$fallbackUsage;
var fallbackUsageStrategy = fallbackUsage;
if (shouldEnsureFallbackUsage) {
fallbackUsageStrategy = 'forced';
} else if (shouldEnsureFallbackUsage === false) {
fallbackUsageStrategy = 'none';
}
root.walkDecls(function (decl) {
var parsedValue = valueParser(decl.value);
parsedValue.walk(function (node) {
if (!isFunction(node) || !isVar(node)) {
return;
}
var _node$nodes = _toArray(node.nodes),
head = _node$nodes[0],
tail = _arrayLikeToArray(_node$nodes).slice(1);
if (!head) {
return;
}
if (isDeletedToken(head)) {
var tokenMeta = renameMapping.find(function (_ref3) {
var path = _ref3.path;
return getCSSCustomProperty(path) === head.value;
});
if (!tokenMeta) {
return;
}
if (tokenMeta.replacement) {
var replacement = getCSSCustomProperty(tokenMeta.replacement);
if (context.fix) {
decl.value = decl.value.replace(head.value, replacement);
return;
} else {
return stylelint.utils.report({
message: messages.tokenRemoved(head.value, replacement),
node: decl,
word: node.value,
result: result,
ruleName: ruleName
});
}
}
}
if (isInvalidToken(head)) {
return stylelint.utils.report({
message: messages.invalidToken(head.value),
node: decl,
word: node.value,
result: result,
ruleName: ruleName
});
}
var isTokenUsage = isToken(head);
if (!isTokenUsage) {
return;
}
var hasFallback = tail.some(function (node) {
return !isToken(node);
});
if (fallbackUsageStrategy === 'optional' || fallbackUsageStrategy === 'forced' && hasFallback || fallbackUsageStrategy === 'none' && !hasFallback) {
return;
}
if (context.fix && !hasFallback) {
var defaultFallback = getDefaultTokenValue(head);
if (defaultFallback) {
decl.value = decl.value.replace(head.value, "".concat(head.value, ", ").concat(defaultFallback));
return;
}
}
stylelint.utils.report({
message: hasFallback ? messages.hasFallback : messages.missingFallback,
node: decl,
word: node.value,
result: result,
ruleName: ruleName
});
});
});
};
};
var rule = Object.assign(ruleBase, {
ruleName: ruleName,
messages: messages
});
var plugin = stylelint.createPlugin(ruleName, rule);
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export default plugin;