@atlaskit/eslint-plugin-ui-styling-standard
Version:
The eslint plugin to enforce and educate on Atlassian's UI Styling Standard
466 lines (454 loc) • 15.8 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
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 { getAllowedDynamicKeys, getAllowedFunctionCalls, isAllowListedVariable } from '@atlaskit/eslint-utils/allowed-function-calls';
import { findIdentifierNode } from '@atlaskit/eslint-utils/find-identifier-node';
import { findVariable } from '@atlaskit/eslint-utils/find-variable';
var unwrapSatisfiesExpression = function unwrapSatisfiesExpression(node) {
if (node.type !== 'TSSatisfiesExpression') {
return node;
}
var currentNode = node;
while (['TSAsExpression', 'TSSatisfiesExpression', 'TSTypeAssertion'].includes(currentNode.type)) {
currentNode = currentNode.expression;
}
return currentNode;
};
function isReferenceToCssVar(variable) {
var definitions = variable.defs;
return definitions.every(function (definition) {
if (definition.type !== 'Variable') {
return false;
}
var initializer = definition.node.init;
if (!initializer) {
return false;
}
return initializer.type === 'Literal' && typeof initializer.value === 'string' && initializer.value.startsWith('--');
});
}
export var Linter = /*#__PURE__*/function () {
function Linter(context, baseNode) {
_classCallCheck(this, Linter);
this.context = context;
this.baseNode = baseNode;
this.allowedDynamicKeys = getAllowedDynamicKeys(context.options);
this.allowedFunctionCalls = getAllowedFunctionCalls(context.options);
}
/**
* Wrapper around `context.report` to provide type checking on the message ID.
*/
return _createClass(Linter, [{
key: "report",
value: function report(descriptor) {
this.context.report(descriptor);
}
/**
* Fallback case to lint any identifier that is not otherwise handled.
*/
}, {
key: "lintUnhandledIdentifier",
value: function lintUnhandledIdentifier(identifier) {
this.report({
node: identifier,
messageId: 'no-variables'
});
}
}, {
key: "lintIdentifier",
value: function lintIdentifier(value) {
var _this$context$sourceC,
_this = this;
if (value.name === 'undefined') {
/**
* `undefined` gets caught implicitly anyway by other checks below,
* but we are explicitly handling it here.
*
* We could potentially introduce a distinct message for it as well.
*/
this.lintUnhandledIdentifier(value);
return;
}
var variable = findVariable({
identifier: value,
// @ts-ignore - Jira's ESLint v10 types expose sourceCode, platform still checks with ESLint v9.
sourceCode: (_this$context$sourceC = this.context.sourceCode) !== null && _this$context$sourceC !== void 0 ? _this$context$sourceC : this.context.getSourceCode()
});
if (!variable) {
this.lintUnhandledIdentifier(value);
return;
}
/**
* Allows using whitelisted imported values
*/
if (isAllowListedVariable({
allowList: this.allowedFunctionCalls,
variable: variable
})) {
return;
}
var definitions = variable.defs;
if (definitions.length === 0) {
this.lintUnhandledIdentifier(value);
return;
}
definitions.forEach(function (definition) {
if (definition.type === 'Variable') {
var initializer = definition.node.init;
if (!initializer) {
_this.lintUnhandledIdentifier(value);
return;
}
/**
* Variables can be used if they resolve to a literal.
*/
if (unwrapSatisfiesExpression(initializer).type === 'Literal') {
return;
}
/**
* Not allowing tagged template expressions through variables.
*/
if (initializer.type === 'TaggedTemplateExpression') {
_this.report({
node: value,
messageId: 'no-function-calls'
});
return;
}
/**
* Variables can be used if they resolve to an allowed function call.
*/
if (initializer.type === 'CallExpression') {
if (_this.isAllowedFunctionCall(initializer)) {
return;
}
_this.report({
node: value,
messageId: 'no-function-calls'
});
return;
}
if (initializer.type === 'TemplateLiteral') {
var _iterator = _createForOfIteratorHelper(initializer.expressions),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var expression = _step.value;
_this.lintValue(expression);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return;
}
/**
* This branch is only here for clarity.
*
* We could fallback to `no-variables` for it too.
*/
if (initializer.type === 'ObjectExpression') {
_this.report({
node: value,
messageId: 'no-object-references'
});
return;
}
}
_this.lintUnhandledIdentifier(value);
});
}
}, {
key: "isAllowedDynamicKey",
value: function isAllowedDynamicKey(expression) {
var _typedExpression$expr, _this$context$sourceC2;
var typedExpression = expression;
if (typedExpression.type === 'TSSatisfiesExpression' && ((_typedExpression$expr = typedExpression.expression) === null || _typedExpression$expr === void 0 ? void 0 : _typedExpression$expr.type) === 'Literal' && typeof typedExpression.expression.value === 'string') {
return true;
}
var identifier = findIdentifierNode(expression);
if (!identifier) {
return false;
}
var variable = findVariable({
identifier: identifier,
// @ts-ignore - Jira's ESLint v10 types expose sourceCode, platform still checks with ESLint v9.
sourceCode: (_this$context$sourceC2 = this.context.sourceCode) !== null && _this$context$sourceC2 !== void 0 ? _this$context$sourceC2 : this.context.getSourceCode()
});
if (!variable) {
return false;
}
return isReferenceToCssVar(variable) || isAllowListedVariable({
allowList: this.allowedDynamicKeys,
variable: variable
});
}
}, {
key: "lintKey",
value: function lintKey(property) {
var key = property.key;
// A type-only `satisfies` annotation preserves a static key at runtime.
// It is safe for the same reason as a directly written string literal.
var unwrappedKey = unwrapSatisfiesExpression(key);
var isSatisfiesExpression = unwrappedKey !== key;
if (property.computed && isSatisfiesExpression && unwrappedKey.type === 'Literal' && typeof unwrappedKey.value === 'string') {
return;
}
/**
* If it's not computed then it must be a plain string.
*
* Private identifiers cannot be computed,
* but we need the extra check for type narrowing.
*/
if (!property.computed || property.key.type === 'PrivateIdentifier') {
return;
}
/**
* Some dynamic keys are explicitly allowed.
*/
if (this.isAllowedDynamicKey(property.key)) {
return;
}
this.report({
node: property.key,
messageId: 'no-dynamic-keys'
});
}
}, {
key: "isAllowedFunctionCall",
value: function isAllowedFunctionCall(value) {
var _this$context$sourceC3;
var identifier = findIdentifierNode(value);
if (!identifier) {
return false;
}
var variable = findVariable({
identifier: identifier,
// @ts-ignore - Jira's ESLint v10 types expose sourceCode, platform still checks with ESLint v9.
sourceCode: (_this$context$sourceC3 = this.context.sourceCode) !== null && _this$context$sourceC3 !== void 0 ? _this$context$sourceC3 : this.context.getSourceCode()
});
if (!variable) {
return false;
}
return isAllowListedVariable({
allowList: this.allowedFunctionCalls,
variable: variable
});
}
}, {
key: "lintFunctionCall",
value: function lintFunctionCall(value) {
if (this.isAllowedFunctionCall(value)) {
return;
}
this.report({
node: value,
messageId: 'no-function-calls'
});
}
}, {
key: "lintObjectExpression",
value: function lintObjectExpression(expression) {
var _iterator2 = _createForOfIteratorHelper(expression.properties),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var property = _step2.value;
if (property.type === 'SpreadElement') {
this.report({
node: property,
messageId: 'no-spread-elements'
});
} else {
this.lintKey(property);
this.lintValue(property.value);
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
}, {
key: "lintUnhandledValue",
value: function lintUnhandledValue(value) {
/**
* Default to blocking value if it isn't explictly handled.
*/
this.report({
node: value,
messageId: 'no-unsafe-values'
});
}
}, {
key: "lintValue",
value: function lintValue(value) {
var unwrappedValue = unwrapSatisfiesExpression(value);
if (unwrappedValue !== value) {
this.lintValue(unwrappedValue);
return;
}
/**
* Literals are always allowed by this rule.
*/
if (value.type === 'Literal') {
return;
}
/**
* Allow negative numbers.
*/
if (value.type === 'UnaryExpression' && value.operator === '-' && value.argument.type === 'Literal') {
return;
}
if (value.type === 'TemplateLiteral') {
var _iterator3 = _createForOfIteratorHelper(value.expressions),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var expression = _step3.value;
this.lintValue(expression);
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return;
}
if (value.type === 'ConditionalExpression' || value.type === 'LogicalExpression') {
this.report({
node: value,
messageId: 'no-conditional-values'
});
return;
}
if (value.type === 'BinaryExpression') {
// @ts-ignore -- this needs to be `ts-ignore` because this only errors in jira's typechecking due to update, not platform's
this.lintValue(value.left);
this.lintValue(value.right);
return;
}
if (value.type === 'ObjectExpression') {
this.lintObjectExpression(value);
return;
}
if (value.type === 'Identifier') {
this.lintIdentifier(value);
return;
}
if (value.type === 'TaggedTemplateExpression') {
this.report({
node: value,
messageId: 'no-function-calls'
});
return;
}
if (value.type === 'CallExpression') {
this.lintFunctionCall(value);
return;
}
if (value.type === 'ArrowFunctionExpression' || value.type === 'FunctionExpression') {
/**
* Function values are handled by `no-dynamic-styles` instead
*/
return;
}
if (value.type === 'MemberExpression') {
this.report({
node: value,
messageId: 'no-object-access'
});
return;
}
if (value.type === 'ArrayExpression') {
this.report({
node: value,
messageId: 'no-array-values'
});
return;
}
this.lintUnhandledValue(value);
}
}, {
key: "lintArgument",
value: function lintArgument(argument) {
if (argument.type === 'ArrowFunctionExpression') {
if (argument.body.type === 'ObjectExpression') {
// Something in this form:
//
// const styles = styled.div(
// (props) => ({ color: props.height }),
// );
this.lintArgument(argument.body);
}
return;
}
if (argument.type === 'ArrayExpression') {
var _iterator4 = _createForOfIteratorHelper(argument.elements),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var element = _step4.value;
if (element === null) {
continue;
}
this.lintArgument(element);
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return;
}
if (argument.type === 'ObjectExpression') {
this.lintObjectExpression(argument);
return;
}
if (argument.type === 'CallExpression') {
this.lintFunctionCall(argument);
return;
}
if (argument.type === 'ConditionalExpression' || argument.type === 'LogicalExpression') {
this.report({
node: argument,
messageId: 'no-conditional-values'
});
return;
}
if (argument.type === 'Identifier' || argument.type === 'MemberExpression') {
this.report({
node: argument,
messageId: 'no-identifier-arguments'
});
return;
}
this.lintUnhandledValue(argument);
}
}, {
key: "lintArguments",
value: function lintArguments(args) {
var _iterator5 = _createForOfIteratorHelper(args),
_step5;
try {
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
var argument = _step5.value;
this.lintArgument(argument);
}
} catch (err) {
_iterator5.e(err);
} finally {
_iterator5.f();
}
}
}, {
key: "run",
value: function run() {
this.lintArguments(this.baseNode.arguments);
}
}]);
}();