Add aphrodite-add-style-variable-name lint rule (#1091)

## Summary:

Adding a custom lint rule to ensure consistent naming for when we use `addStyle` for aphrodite styling. Variable naming should be in the format `StyledTag`.

By having predictable names for styled elements, we are able to use [component mapping](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y?tab=readme-ov-file#component-mapping) more effectively for `eslint-plugin-jsx-a11y` so it can use the underlying HTML for accessibility checks. 

Issue: FEI-5952
Related ADR: [ADR-781](https://khanacademy.atlassian.net/wiki/x/IoBVyg)

## Test plan:
- Tests pass
- Linting works in the demo project (will need some help with this!)

[ADR-781]: https://khanacademy.atlassian.net/browse/ADR-781?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: beaesguerra

Reviewers: beaesguerra, kevinb-khan

Required Reviewers:

Approved By: kevinb-khan

Checks: ✅ gerald, ✅ Test (macos-latest, 20.x), ✅ codecov/project, ✅ CodeQL, ✅ Lint, typecheck, and coverage check (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Analyze (javascript), ✅ gerald, ⏭️  dependabot

Pull Request URL: #1091

.changeset/brave-scissors-repair.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/eslint-config": patch
+"@khanacademy/eslint-plugin": patch
+---
+
+Update eslint to ^8.55.0

.changeset/dirty-islands-bake.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/eslint-plugin": minor
+---
+
+Add `aphrodite-add-style-variable-name` lint rule

.eslintignore

@@ -5,3 +5,4 @@ coverage
 **/package.json
 **/*.md
 docs/assets/main.js
+packages/eslint-plugin-khan/demo

lint_ignore.txt

@@ -0,0 +1 @@
+.eslintignore

package.json

@@ -41,7 +41,7 @@
     "@typescript-eslint/parser": "8.17.0",
     "babel-jest": "^29.7.0",
     "babel-watch": "^7.8.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-disable": "^2.0.3",

packages/eslint-config-khan/package.json

@@ -18,7 +18,7 @@
         "@khanacademy/eslint-plugin": "^3.0.1",
         "@typescript-eslint/eslint-plugin": "8.17.0",
         "@typescript-eslint/parser": "8.17.0",
-        "eslint": "^8.44.0",
+        "eslint": "^8.55.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-import-resolver-typescript": "^3.5.3",
         "eslint-plugin-import": "^2.23.4",

packages/eslint-plugin-khan/README.md

@@ -12,3 +12,12 @@ eslint plugin with our set of custom rules for various things
 - [khan/react-no-subscriptions-before-mount](docs/react-no-subscriptions-before-mount.md)
 - [khan/react-svg-path-precision](docs/react-svg-path-precision.md)
 - [khan/sync-tag](docs/sync-tag.md)
+- [khan/aphrodite-add-style-variable-name](docs/aphrodite-add-style-variable-name.md)
+
+## Creating a new lint rule
+
+Here are some helpful resources for setting up a new lint rule:
+
+- [TypeScript Eslint custom rules](https://typescript-eslint.io/developers/custom-rules/)
+- [AST Explorer](https://astexplorer.net/): A tool for showing what the abstract syntax tree (AST) looks like based on code
+- [ESTree Spec](https://github.com/estree/estree/tree/master): The spec for learning more about the AST node types

packages/eslint-plugin-khan/demo/.eslintrc.js

@@ -1,6 +1,7 @@
-/* eslint-disable import/no-commonjs */
 module.exports = {
+    root: true,
     plugins: ["@khanacademy"],
+    parser: "@typescript-eslint/parser",
     rules: {
         "@khanacademy/jest-await-async-matchers": [
             "error",
@@ -22,5 +23,7 @@ module.exports = {
                 rootDir: __dirname,
             },
         ],
+        // TODO(kevinb): re-enable after publishing @khanacademy/eslint-plugin
+        // "@khanacademy/aphrodite-add-style-variable-name": "error",
     },
 };

packages/eslint-plugin-khan/demo/package.json

@@ -3,9 +3,12 @@
   "version": "0.0.1",
   "main": "index.js",
   "license": "MIT",
+  "scripts": {
+    "lint": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx ."
+  },
   "devDependencies": {
-    "@khanacademy/eslint-plugin": "../",
-    "eslint": "^8.40.0",
+    "@khanacademy/eslint-plugin": "^3.0.1",
+    "eslint": "^8.55.0",
     "typescript": "^5.0.4"
   },
   "dependencies": {

packages/eslint-plugin-khan/demo/src/foo.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
 
+function addStyle(str: string) {
+    // Placeholder example for calling addStyle for aphrodite
+}
+
+const div = addStyle("div");
+
 export const Icon = (): React.ReactNode => {
     return (
         <svg>