@atlaskit/eslint-plugin-ui-styling-standard
Version:
The eslint plugin to enforce and educate on Atlassian's UI Styling Standard
387 lines (375 loc) • 11.4 kB
JavaScript
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';
const unwrapSatisfiesExpression = node => {
if (node.type !== 'TSSatisfiesExpression') {
return node;
}
let currentNode = node;
while (['TSAsExpression', 'TSSatisfiesExpression', 'TSTypeAssertion'].includes(currentNode.type)) {
currentNode = currentNode.expression;
}
return currentNode;
};
function isReferenceToCssVar(variable) {
const definitions = variable.defs;
return definitions.every(definition => {
if (definition.type !== 'Variable') {
return false;
}
const initializer = definition.node.init;
if (!initializer) {
return false;
}
return initializer.type === 'Literal' && typeof initializer.value === 'string' && initializer.value.startsWith('--');
});
}
export class Linter {
constructor(context, baseNode) {
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.
*/
report(descriptor) {
this.context.report(descriptor);
}
/**
* Fallback case to lint any identifier that is not otherwise handled.
*/
lintUnhandledIdentifier(identifier) {
this.report({
node: identifier,
messageId: 'no-variables'
});
}
lintIdentifier(value) {
var _this$context$sourceC;
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;
}
const 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
})) {
return;
}
const definitions = variable.defs;
if (definitions.length === 0) {
this.lintUnhandledIdentifier(value);
return;
}
definitions.forEach(definition => {
if (definition.type === 'Variable') {
const 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') {
for (const expression of initializer.expressions) {
this.lintValue(expression);
}
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);
});
}
isAllowedDynamicKey(expression) {
var _typedExpression$expr, _this$context$sourceC2;
const 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;
}
const identifier = findIdentifierNode(expression);
if (!identifier) {
return false;
}
const variable = findVariable({
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
});
}
lintKey(property) {
const 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.
const unwrappedKey = unwrapSatisfiesExpression(key);
const 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'
});
}
isAllowedFunctionCall(value) {
var _this$context$sourceC3;
const identifier = findIdentifierNode(value);
if (!identifier) {
return false;
}
const variable = findVariable({
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
});
}
lintFunctionCall(value) {
if (this.isAllowedFunctionCall(value)) {
return;
}
this.report({
node: value,
messageId: 'no-function-calls'
});
}
lintObjectExpression(expression) {
for (const property of expression.properties) {
if (property.type === 'SpreadElement') {
this.report({
node: property,
messageId: 'no-spread-elements'
});
} else {
this.lintKey(property);
this.lintValue(property.value);
}
}
}
lintUnhandledValue(value) {
/**
* Default to blocking value if it isn't explictly handled.
*/
this.report({
node: value,
messageId: 'no-unsafe-values'
});
}
lintValue(value) {
const 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') {
for (const expression of value.expressions) {
this.lintValue(expression);
}
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);
}
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') {
for (const element of argument.elements) {
if (element === null) {
continue;
}
this.lintArgument(element);
}
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);
}
lintArguments(args) {
for (const argument of args) {
this.lintArgument(argument);
}
}
run() {
this.lintArguments(this.baseNode.arguments);
}
}