Update tests and docs to mention that using a component with addStyle…

… doesn't enforce the linting convention
Khan · Dec 12, 2024 · e674d22 · e674d22
1 parent 1ac9cd8
commit e674d22
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/eslint-plugin-khan/docs/aphrodite-add-style-variable-name.md b/packages/eslint-plugin-khan/docs/aphrodite-add-style-variable-name.md
@@ -1,9 +1,11 @@
 # Naming convention for addStyle variable (aphrodite-add-style-variable-name)
 
-The variable name when using `addStyle` should be the same as the tag argument in the format `StyledTag`.
+The variable name should match the tag name passed into `addStyle` and follow the format: `StyledTag`.
 
 This is useful so that Aphrodite styled elements can be mapped to HTML elements for static code analysis. For example, if the `addStyle` variables are consistently named, we are able to provide [custom component mapping](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#component-mapping) to `eslint-plugin-jsx-a11y` so that it can identify linting issues based on the underlying HTML tag.
 
+This naming convention only applies to string arguments for HTML tags. It is not enforced when a component is used as the addStyle argument.
+
 ## Rule Details
 
 The following are considered warnings:
@@ -33,3 +35,9 @@ const StyledSpan = addStyle("span");
 ```ts
 const StyledImg = addStyle("img");
 ```
+
+```ts
+// Any variable name can be used when addStyle is used with a component
+const LinkWithStyle = addStyle(Link);
+const Foo = addStyle(Bar);
+```
diff --git a/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts b/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts
@@ -37,7 +37,7 @@ export default createRule<Options, MessageIds>({
     meta: {
         docs: {
             description:
-                "Ensure variable names match the tag name passed to addStyle and follow the format: StyledTag (ie. StyledDiv, StyledImg)",
+                "Variable name should match the tag name passed into addStyle and follow the format: StyledTag (ie. StyledDiv, StyledImg)",
             recommended: true,
         },
         messages: {

diff --git a/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts b/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts
@@ -53,6 +53,16 @@ ruleTester.run(ruleName, rule, {
             // Handling custom html components
             code: `const StyledFooBar = addStyle("foo-bar")`,
         },
+        {
+            // Variable name can be anything if a component is used as the
+            // argument
+            code: `const LinkWithStyle = addStyle(Link)`,
+        },
+        {
+            // Another example where variable name can be anything if a
+            // component is used as the argument
+            code: `const Foo = addStyle(Bar)`,
+        },
     ],
     invalid: [
         {