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:
gitstart-twenty
2023-09-16 02:41:10 +01:00
committed by GitHub
parent 549335054a
commit 00a3c8ca2b
575 changed files with 2848 additions and 3063 deletions

View File

@ -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
);
},
});
}
}
}
}
},
};
},
}
},
}),
};

View File

@ -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.',
});
}
});
},
};
},
});
},
}),
};

View 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,
};