Change to using arrow functions (#1603)
* Change to using arrow functions Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add lint rule --------- Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
@ -12,89 +12,87 @@ module.exports = {
|
||||
fixable: "code",
|
||||
schema: [],
|
||||
},
|
||||
create: function (context) {
|
||||
return {
|
||||
VariableDeclarator(node) {
|
||||
if (
|
||||
node?.init?.callee?.name &&
|
||||
typeof node.init.callee.name === "string" &&
|
||||
[
|
||||
'useRecoilState',
|
||||
'useRecoilFamilyState',
|
||||
'useRecoilSelector',
|
||||
'useRecoilScopedState',
|
||||
'useRecoilScopedFamilyState',
|
||||
'useRecoilScopedSelector',
|
||||
'useRecoilValue',
|
||||
].includes(node.init.callee.name)
|
||||
) {
|
||||
const stateNameBase = node.init.arguments?.[0].name;
|
||||
create: (context) => ({
|
||||
VariableDeclarator(node) {
|
||||
if (
|
||||
node?.init?.callee?.name &&
|
||||
typeof node.init.callee.name === "string" &&
|
||||
[
|
||||
"useRecoilState",
|
||||
"useRecoilFamilyState",
|
||||
"useRecoilSelector",
|
||||
"useRecoilScopedState",
|
||||
"useRecoilScopedFamilyState",
|
||||
"useRecoilScopedSelector",
|
||||
"useRecoilValue",
|
||||
].includes(node.init.callee.name)
|
||||
) {
|
||||
const stateNameBase = node.init.arguments?.[0].name;
|
||||
|
||||
if (!stateNameBase) {
|
||||
if (!stateNameBase) {
|
||||
return;
|
||||
}
|
||||
|
||||
let expectedVariableNameBase = stateNameBase.replace(
|
||||
/(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
|
||||
""
|
||||
);
|
||||
|
||||
if (node.id.type === "Identifier") {
|
||||
const actualVariableName = node.id.name;
|
||||
if (actualVariableName !== expectedVariableNameBase) {
|
||||
context.report({
|
||||
node,
|
||||
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(node.id, expectedVariableNameBase);
|
||||
},
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id.type === "ArrayPattern") {
|
||||
const actualVariableName = node.id.elements?.[0]?.name;
|
||||
|
||||
if (
|
||||
actualVariableName &&
|
||||
actualVariableName !== expectedVariableNameBase
|
||||
) {
|
||||
context.report({
|
||||
node,
|
||||
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(
|
||||
node.id.elements[0],
|
||||
expectedVariableNameBase
|
||||
);
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let expectedVariableNameBase = stateNameBase.replace(
|
||||
/(State|FamilyState|Selector|ScopedState|ScopedFamilyState|ScopedSelector)$/,
|
||||
""
|
||||
);
|
||||
if (node.id.elements?.[1]?.name) {
|
||||
const actualSetterName = node.id.elements[1].name;
|
||||
const expectedSetterName = `set${expectedVariableNameBase
|
||||
.charAt(0)
|
||||
.toUpperCase()}${expectedVariableNameBase.slice(1)}`;
|
||||
|
||||
if (node.id.type === "Identifier") {
|
||||
const actualVariableName = node.id.name;
|
||||
if (actualVariableName !== expectedVariableNameBase) {
|
||||
if (actualSetterName !== expectedSetterName) {
|
||||
context.report({
|
||||
node,
|
||||
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(node.id, expectedVariableNameBase);
|
||||
},
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id.type === "ArrayPattern") {
|
||||
const actualVariableName = node.id.elements?.[0]?.name;
|
||||
|
||||
if (
|
||||
actualVariableName &&
|
||||
actualVariableName !== expectedVariableNameBase
|
||||
) {
|
||||
context.report({
|
||||
node,
|
||||
message: `Invalid usage of ${node.init.callee.name}: the value should be named '${expectedVariableNameBase}' but found '${actualVariableName}'.`,
|
||||
message: `Invalid usage of ${node.init.callee.name}: Expected setter '${expectedSetterName}' but found '${actualSetterName}'.`,
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(
|
||||
node.id.elements[0],
|
||||
expectedVariableNameBase
|
||||
node.id.elements[1],
|
||||
expectedSetterName
|
||||
);
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id.elements?.[1]?.name) {
|
||||
const actualSetterName = node.id.elements[1].name;
|
||||
const expectedSetterName = `set${expectedVariableNameBase
|
||||
.charAt(0)
|
||||
.toUpperCase()}${expectedVariableNameBase.slice(1)}`;
|
||||
|
||||
if (actualSetterName !== expectedSetterName) {
|
||||
context.report({
|
||||
node,
|
||||
message: `Invalid usage of ${node.init.callee.name}: Expected setter '${expectedSetterName}' but found '${actualSetterName}'.`,
|
||||
fix(fixer) {
|
||||
return fixer.replaceText(
|
||||
node.id.elements[1],
|
||||
expectedSetterName
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
@ -1,24 +1,22 @@
|
||||
module.exports = {
|
||||
create: function (context) {
|
||||
return {
|
||||
TaggedTemplateExpression(node) {
|
||||
if (context.getFilename().endsWith('themes.ts')) {
|
||||
return;
|
||||
create: (context) => ({
|
||||
TaggedTemplateExpression(node) {
|
||||
if (context.getFilename().endsWith("themes.ts")) {
|
||||
return;
|
||||
}
|
||||
|
||||
node.quasi.quasis.forEach((quasi) => {
|
||||
const colorRegex =
|
||||
/(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*\d+\.?\d*)?\))|(?:#[0-9a-fA-F]{6})/i;
|
||||
|
||||
if (colorRegex.test(quasi.value.raw)) {
|
||||
context.report({
|
||||
node,
|
||||
message:
|
||||
"Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.",
|
||||
});
|
||||
}
|
||||
|
||||
node.quasi.quasis.forEach((quasi) => {
|
||||
const colorRegex =
|
||||
/(?:rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*\d+\.?\d*)?\))|(?:#[0-9a-fA-F]{6})/i;
|
||||
|
||||
if (colorRegex.test(quasi.value.raw)) {
|
||||
context.report({
|
||||
node,
|
||||
message:
|
||||
'Do not use hardcoded RGBA or Hex colors. Please use a color from the theme file.',
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
@ -1,26 +1,22 @@
|
||||
"use strict";
|
||||
const postcss = require("postcss");
|
||||
|
||||
function isStyledTagname(node) {
|
||||
return (
|
||||
(node.tag.type === "Identifier" && node.tag.name === "css") ||
|
||||
(node.tag.type === "MemberExpression" &&
|
||||
node.tag.object.name === "styled") ||
|
||||
(node.tag.type === "CallExpression" &&
|
||||
(node.tag.callee.name === "styled" ||
|
||||
(node.tag.callee.object &&
|
||||
((node.tag.callee.object.callee &&
|
||||
node.tag.callee.object.callee.name === "styled") ||
|
||||
(node.tag.callee.object.object &&
|
||||
node.tag.callee.object.object.name === "styled")))))
|
||||
);
|
||||
}
|
||||
const isStyledTagname = (node) =>
|
||||
(node.tag.type === "Identifier" && node.tag.name === "css") ||
|
||||
(node.tag.type === "MemberExpression" && node.tag.object.name === "styled") ||
|
||||
(node.tag.type === "CallExpression" &&
|
||||
(node.tag.callee.name === "styled" ||
|
||||
(node.tag.callee.object &&
|
||||
((node.tag.callee.object.callee &&
|
||||
node.tag.callee.object.callee.name === "styled") ||
|
||||
(node.tag.callee.object.object &&
|
||||
node.tag.callee.object.object.name === "styled")))));
|
||||
|
||||
/**
|
||||
* An atomic rule is a rule without nested rules.
|
||||
*/
|
||||
function isValidAtomicRule(rule) {
|
||||
const decls = rule.nodes.filter(node => node.type === "decl");
|
||||
const isValidAtomicRule = (rule) => {
|
||||
const decls = rule.nodes.filter((node) => node.type === "decl");
|
||||
if (decls.length < 0) {
|
||||
return { isValid: true };
|
||||
}
|
||||
@ -32,12 +28,12 @@ function isValidAtomicRule(rule) {
|
||||
const loc = {
|
||||
start: {
|
||||
line: decls[i - 1].source.start.line,
|
||||
column: decls[i - 1].source.start.column - 1
|
||||
column: decls[i - 1].source.start.column - 1,
|
||||
},
|
||||
end: {
|
||||
line: decls[i].source.end.line,
|
||||
column: decls[i].source.end.column - 1
|
||||
}
|
||||
column: decls[i].source.end.column - 1,
|
||||
},
|
||||
};
|
||||
|
||||
return { isValid: false, loc };
|
||||
@ -45,9 +41,9 @@ function isValidAtomicRule(rule) {
|
||||
}
|
||||
|
||||
return { isValid: true };
|
||||
}
|
||||
};
|
||||
|
||||
function isValidRule(rule) {
|
||||
const isValidRule = (rule) => {
|
||||
// check each rule recursively
|
||||
const { isValid, loc } = rule.nodes.reduce(
|
||||
(map, node) => {
|
||||
@ -63,9 +59,9 @@ function isValidRule(rule) {
|
||||
|
||||
// check declarations
|
||||
return isValidAtomicRule(rule);
|
||||
}
|
||||
};
|
||||
|
||||
function getNodeStyles(node) {
|
||||
const getNodeStyles = (node) => {
|
||||
const [firstQuasi, ...quasis] = node.quasi.quasis;
|
||||
// remove line break added to the first quasi
|
||||
const lineBreakCount = node.quasi.loc.start.line - 1;
|
||||
@ -87,49 +83,47 @@ function getNodeStyles(node) {
|
||||
});
|
||||
|
||||
return styles;
|
||||
}
|
||||
};
|
||||
|
||||
function create(context) {
|
||||
return {
|
||||
TaggedTemplateExpression(node) {
|
||||
if (isStyledTagname(node)) {
|
||||
try {
|
||||
const root = postcss.parse(getNodeStyles(node));
|
||||
const create = (context) => ({
|
||||
TaggedTemplateExpression(node) {
|
||||
if (isStyledTagname(node)) {
|
||||
try {
|
||||
const root = postcss.parse(getNodeStyles(node));
|
||||
|
||||
const { isValid, loc } = isValidRule(root);
|
||||
const { isValid, loc } = isValidRule(root);
|
||||
|
||||
if (!isValid) {
|
||||
return context.report({
|
||||
node,
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
loc,
|
||||
fix: fixer =>
|
||||
fix({
|
||||
rule: root,
|
||||
fixer,
|
||||
src: context.getSourceCode()
|
||||
})
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
return true;
|
||||
if (!isValid) {
|
||||
return context.report({
|
||||
node,
|
||||
messageId: "sort-css-properties-alphabetically",
|
||||
loc,
|
||||
fix: (fixer) =>
|
||||
fix({
|
||||
rule: root,
|
||||
fixer,
|
||||
src: context.getSourceCode(),
|
||||
}),
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
function fix({ rule, fixer, src }) {
|
||||
const fix = ({ rule, fixer, src }) => {
|
||||
let fixings = [];
|
||||
|
||||
// concat fixings recursively
|
||||
rule.nodes.forEach(node => {
|
||||
rule.nodes.forEach((node) => {
|
||||
if (node.type === "rule") {
|
||||
fixings = [...fixings, ...fix({ rule: node, fixer, src })];
|
||||
}
|
||||
});
|
||||
|
||||
const declarations = rule.nodes.filter(node => node.type === "decl");
|
||||
const declarations = rule.nodes.filter((node) => node.type === "decl");
|
||||
const sortedDeclarations = sortDeclarations(declarations);
|
||||
|
||||
declarations.forEach((decl, idx) => {
|
||||
@ -138,7 +132,7 @@ function fix({ rule, fixer, src }) {
|
||||
const range = getDeclRange({ decl, src });
|
||||
const sortedDeclText = getDeclText({
|
||||
decl: sortedDeclarations[idx],
|
||||
src
|
||||
src,
|
||||
});
|
||||
|
||||
fixings.push(fixer.removeRange([range.startIdx, range.endIdx + 1]));
|
||||
@ -154,55 +148,51 @@ function fix({ rule, fixer, src }) {
|
||||
}
|
||||
});
|
||||
return fixings;
|
||||
}
|
||||
};
|
||||
|
||||
function areSameDeclarations(a, b) {
|
||||
return (
|
||||
a.source.start.line === b.source.start.line &&
|
||||
a.source.start.column === b.source.start.column
|
||||
);
|
||||
}
|
||||
const areSameDeclarations = (a, b) =>
|
||||
a.source.start.line === b.source.start.line &&
|
||||
a.source.start.column === b.source.start.column;
|
||||
|
||||
function getDeclRange({ decl, src }) {
|
||||
const getDeclRange = ({ decl, src }) => {
|
||||
const loc = {
|
||||
start: {
|
||||
line: decl.source.start.line,
|
||||
column: decl.source.start.column - 1
|
||||
column: decl.source.start.column - 1,
|
||||
},
|
||||
end: {
|
||||
line: decl.source.end.line,
|
||||
column: decl.source.end.column - 1
|
||||
}
|
||||
column: decl.source.end.column - 1,
|
||||
},
|
||||
};
|
||||
|
||||
const startIdx = src.getIndexFromLoc(loc.start);
|
||||
const endIdx = src.getIndexFromLoc(loc.end);
|
||||
return { startIdx, endIdx };
|
||||
}
|
||||
};
|
||||
|
||||
function getDeclText({ decl, src }) {
|
||||
const getDeclText = ({ decl, src }) => {
|
||||
const { startIdx, endIdx } = getDeclRange({ decl, src });
|
||||
return src.getText().substring(startIdx, endIdx + 1);
|
||||
}
|
||||
};
|
||||
|
||||
function sortDeclarations(declarations) {
|
||||
return declarations
|
||||
const sortDeclarations = (declarations) =>
|
||||
declarations
|
||||
.slice()
|
||||
.sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
meta: {
|
||||
docs: {
|
||||
description: "Styles are sorted alphabetically.",
|
||||
category: "Fill me in",
|
||||
recommended: false
|
||||
recommended: false,
|
||||
},
|
||||
messages: {
|
||||
"sort-css-properties-alphabetically":
|
||||
"Declarations should be sorted alphabetically."
|
||||
"Declarations should be sorted alphabetically.",
|
||||
},
|
||||
fixable: "code"
|
||||
fixable: "code",
|
||||
},
|
||||
create
|
||||
};
|
||||
create,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user