eslint-plugin-primer-react 0.0.0-2021817225727

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@1.6.0/schema.json",
+  "changelog": ["@changesets/changelog-github", {"repo": "primer/eslint-plugin-primer-react"}],
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test

package/.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create release pull request or publish to npm
+        id: changesets
+        uses: changesets/action@master
+        with:
+          title: Release Tracking
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

package/.github/workflows/release_canary.yml

@@ -0,0 +1,61 @@
+name: Release (canary)
+on:
+  push:
+    branches-ignore:
+      - 'main'
+      - 'changeset-release/main'
+
+jobs:
+  release:
+    if: ${{ github.repository == 'primer/eslint-plugin-primer-react' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build --if-present
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+      - name: Publish canary version
+        run: |
+          echo "$( jq '.version = "0.0.0"' package.json )" > package.json
+          echo -e "---\n'eslint-plugin-primer-react': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
+          yarn changeset version --snapshot
+          yarn changeset publish --tag canary
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Output canary version number
+        uses: actions/github-script@v4.0.2
+        with:
+          script: |
+            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
+            github.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'success',
+              context: `Published ${package.name}`,
+              description: package.version,
+              target_url: `https://unpkg.com/${package.name}@${package.version}/`
+            })

package/.github/workflows/release_candidate.yml

@@ -0,0 +1,59 @@
+name: Release (candidate)
+on:
+  push:
+    branches:
+      - 'changeset-release/main'
+
+jobs:
+  release:
+    if: ${{ github.repository == 'primer/eslint-plugin-primer-react' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build --if-present
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+      - name: Publish release candidate
+        run: |
+          version=$(jq -r .version package.json)
+          echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" package.json )" > package.json
+          yarn publish --tag next
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Output release candidate version number
+        uses: actions/github-script@v4.0.2
+        with:
+          script: |
+            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
+            github.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'success',
+              context: `Published ${package.name}`,
+              description: package.version,
+              target_url: `https://unpkg.com/${package.name}@${package.version}/`
+            })

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# eslint-plugin-primer-react
+
+## 0.0.0-2021817225727
+
+### Patch Changes
+
+- Fake entry to force publishing
+
+## 0.4.1
+
+### Patch Changes
+
+- [#3](https://github.com/primer/eslint-plugin-primer-react/pull/3) [`8e9144f`](https://github.com/primer/eslint-plugin-primer-react/commit/8e9144fd7a9ff1bb99878dca61621351026ddc82) Thanks [@colebemis](https://github.com/colebemis)! - Add type metadata to no-deprecated-colors rule

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Primer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,32 @@
+# eslint-plugin-primer-react
+
+[![npm package](https://img.shields.io/npm/v/eslint-plugin-primer-react.svg)](https://www.npmjs.com/package/eslint-plugin-primer-react)
+
+ESLint rules for Primer React
+
+## Installation
+
+1. Assuming you already have [ESLint](https://www.npmjs.com/package/eslint) and [Primer React](https://github.com/primer/react) installed, run:
+
+   ```shell
+   npm install --save-dev eslint-plugin-primer-react
+
+   # or
+   
+   yarn add --dev eslint-plugin-primer-react
+   ```
+
+2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the recommended Primer React ESLint config:
+
+   ```js
+   {
+     "extends": [
+       // ...
+       "plugin:primer-react/recommended"
+     ]
+   }
+   ```
+
+## Rules
+
+- [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)

package/docs/rules/no-deprecated-colors.md

@@ -0,0 +1,42 @@
+# Disallow references to deprecated color variables (no-deprecated-colors)
+
+🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+[Theming](https://primer.style/react/theming) in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more. The color variables in Primer React's [default theme object](https://primer.style/react/theme-reference) are pulled from [Primer Primitives](https://github.com/primer/primitives). When a color variable is deprecated in Primer Primitives, it's important to remove references to that color variable in your application before it's removed from the library.   
+
+## Rule details
+
+This rule disallows references to color variables that are deprecated in [Primer Primitives](https://github.com/primer/primitives).
+
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-deprecated-colors: "error" */
+import {Box, themeGet} from '@primer/components'
+import styled from 'styled-components'
+
+const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</Box>
+
+const SxPropExample() = () => <Box sx={{color: 'some.deprecated.color'}}>Incorrect</Box>
+
+const ThemeGetExample = styled.div`
+  color: ${themeGet('some.deprecated.color')};
+`
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-deprecated-colors: "error" */
+import {Box, themeGet} from '@primer/components'
+import styled from 'styled-components'
+
+const SystemPropExample() = () => <Box color="some.color">Incorrect</Box>
+
+const SxPropExample() = () => <Box sx={{color: 'some.color'}}>Incorrect</Box>
+
+const ThemeGetExample = styled.div`
+  color: ${themeGet('some.color')};
+`
+```

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "eslint-plugin-primer-react",
+  "version": "0.0.0-2021817225727",
+  "description": "ESLint rules for Primer React",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "release": "changeset publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primer/eslint-plugin-primer-react.git"
+  },
+  "keywords": [
+    "eslint",
+    "eslintplugin"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/primer/eslint-plugin-primer-react/issues"
+  },
+  "homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.4.0",
+    "@changesets/cli": "^2.16.0",
+    "@github/prettier-config": "0.0.4",
+    "@primer/primitives": "^4.6.2",
+    "eslint": "^7.32.0",
+    "jest": "^27.0.6"
+  },
+  "peerDependencies": {
+    "eslint": ">=4.19.0",
+    "@primer/primitives": ">=4.6.2"
+  },
+  "prettier": "@github/prettier-config",
+  "dependencies": {
+    "eslint-traverse": "^1.0.0"
+  }
+}

package/src/configs/recommended.js

@@ -0,0 +1,12 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ['primer-react'],
+  rules: {
+    'primer-react/no-deprecated-colors': 'warn'
+  }
+}

package/src/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    'no-deprecated-colors': require('./rules/no-deprecated-colors')
+  },
+  configs: {
+    recommended: require('./configs/recommended')
+  }
+}

package/src/rules/__tests__/no-deprecated-colors.test.js

@@ -0,0 +1,194 @@
+const rule = require('../no-deprecated-colors')
+const {RuleTester} = require('eslint')
+
+const testDeprecations = {
+  'text.primary': 'fg.default',
+  'bg.primary': 'canvas.default',
+  'auto.green.5': ['success.fg', 'success.emphasis'],
+  'fade.fg10': null,
+  'autocomplete.shadow': 'shadow.medium'
+}
+
+jest.mock('@primer/primitives/dist/deprecations/colors', () => testDeprecations)
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+})
+
+ruleTester.run('no-deprecated-colors', rule, {
+  valid: [
+    `import {Box} from '@other/design-system'; <Box color="text.primary">Hello</Box>`,
+    `import {Box} from "@primer/components"; <Box color="fg.default">Hello</Box>`,
+    `import {hello} from "@primer/components"; hello("colors.text.primary")`,
+    `import {themeGet} from "@primer/components"; themeGet("space.text.primary")`,
+    `import {themeGet} from "@other/design-system"; themeGet("colors.text.primary")`,
+    `import {get} from "@other/constants"; get("space.text.primary")`,
+    `import {Box} from '@primer/components'; <Box sx={styles}>Hello</Box>`,
+    `import {Box} from '@primer/components'; <Box sx={{color: text.primary}}>Hello</Box>`,
+    `import {Box} from '@primer/components'; <Box sx={{color: "fg.default"}}>Hello</Box>`
+  ],
+  invalid: [
+    {
+      code: `import {Box} from "@primer/components"; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import {Box} from "@primer/components"; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="text.primary">Hello</Box> }`,
+      output: `import Box from '@primer/components/lib-esm/Box'; function Example() { return <Box color="fg.default">Hello</Box> }`,
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; const Example = () => <Box color="text.primary">Hello</Box>`,
+      output: `import {Box} from "@primer/components"; const Example = () => <Box color="fg.default">Hello</Box>`,
+      errors: [
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box bg="bg.primary" m={1} />`,
+      output: `import {Box} from "@primer/components"; <Box bg="canvas.default" m={1} />`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{bg: "bg.primary", m: 1, ...rest}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{bg: "canvas.default", m: 1, ...rest}} />`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.autocomplete.shadow}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => theme.shadows.shadow.medium}} />`,
+      errors: [
+        {
+          message: '"theme.shadows.autocomplete.shadow" is deprecated. Use "theme.shadows.shadow.medium" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: theme => \`0 1px 2px \${theme.colors.fg.default}\`}} />`,
+      errors: [
+        {
+          message: '"theme.colors.text.primary" is deprecated. Use "theme.colors.fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.text.primary}\`}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{boxShadow: t => \`0 1px 2px \${t.colors.fg.default}\`}} />`,
+      errors: [
+        {
+          message: '"t.colors.text.primary" is deprecated. Use "t.colors.fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "bg.primary"}}} />`,
+      output: `import {Box} from "@primer/components"; <Box sx={{"&:hover": {bg: "canvas.default"}}} />`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box color="auto.green.5" />`,
+      errors: [
+        {
+          message: '"auto.green.5" is deprecated.',
+          suggestions: [
+            {
+              desc: 'Use "success.fg" instead.',
+              output: `import {Box} from "@primer/components"; <Box color="success.fg" />`
+            },
+            {
+              desc: 'Use "success.emphasis" instead.',
+              output: `import {Box} from "@primer/components"; <Box color="success.emphasis" />`
+            }
+          ]
+        }
+      ]
+    },
+    {
+      code: `import {Box} from "@primer/components"; <Box color="fade.fg10" />`,
+      errors: [
+        {
+          message:
+            '"fade.fg10" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.'
+        }
+      ]
+    },
+    {
+      code: `import {Box, Text} from "@primer/components"; <Box bg="bg.primary"><Text color="text.primary">Hello</Text></Box>`,
+      output: `import {Box, Text} from "@primer/components"; <Box bg="canvas.default"><Text color="fg.default">Hello</Text></Box>`,
+      errors: [
+        {
+          message: '"bg.primary" is deprecated. Use "canvas.default" instead.'
+        },
+        {
+          message: '"text.primary" is deprecated. Use "fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {themeGet} from "@primer/components"; themeGet("colors.text.primary")`,
+      output: `import {themeGet} from "@primer/components"; themeGet("colors.fg.default")`,
+      errors: [
+        {
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {themeGet} from "@primer/components"; themeGet("shadows.autocomplete.shadow")`,
+      output: `import {themeGet} from "@primer/components"; themeGet("shadows.shadow.medium")`,
+      errors: [
+        {
+          message: '"shadows.autocomplete.shadow" is deprecated. Use "shadows.shadow.medium" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {get} from "./constants"; get("colors.text.primary")`,
+      output: `import {get} from "./constants"; get("colors.fg.default")`,
+      errors: [
+        {
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
+        }
+      ]
+    },
+    {
+      code: `import {get} from "../constants"; get("colors.text.primary")`,
+      output: `import {get} from "../constants"; get("colors.fg.default")`,
+      errors: [
+        {
+          message: '"colors.text.primary" is deprecated. Use "colors.fg.default" instead.'
+        }
+      ]
+    }
+  ]
+})

package/src/rules/no-deprecated-colors.js

@@ -0,0 +1,173 @@
+const deprecations = require('@primer/primitives/dist/deprecations/colors')
+const traverse = require('eslint-traverse')
+
+const styledSystemColorProps = ['color', 'bg', 'backgroundColor', 'borderColor', 'textShadow', 'boxShadow']
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code'
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        // Skip if component was not imported from @primer/components
+        if (!isPrimerComponent(node.name, context.getScope(node))) {
+          return
+        }
+
+        for (const attribute of node.attributes) {
+          if (!attribute.name || !attribute.value) {
+            continue
+          }
+
+          const propName = attribute.name.name
+          const propValue = attribute.value.value
+
+          // Check for the sx prop
+          if (propName === 'sx' && attribute.value.expression.type === 'ObjectExpression') {
+            // Search all properties of the sx object (even nested properties)
+            traverse(context, attribute.value, path => {
+              if (path.node.type === 'Property' && path.node.value.type === 'Literal') {
+                const prop = path.node
+                const propName = prop.key.name
+                const propValue = prop.value.value
+
+                if (styledSystemColorProps.includes(propName) && Object.keys(deprecations).includes(propValue)) {
+                  replaceDeprecatedColor(context, prop.value, propValue)
+                }
+              }
+
+              // Check functions passed to sx object properties
+              // (e.g. boxShadow: theme => `0 1px 2px ${theme.colors.text.primary}` )
+              if (path.node.type === 'Property' && path.node.value.type === 'ArrowFunctionExpression') {
+                traverse(context, path.node.value.body, path => {
+                  if (path.node.type === 'MemberExpression') {
+                    // Convert MemberExpression AST to string
+                    const code = context.getSourceCode().getText(path.node)
+
+                    const [param, key, ...rest] = code.split('.')
+                    const name = rest.join('.')
+
+                    if (['colors', 'shadows'].includes(key) && Object.keys(deprecations).includes(name)) {
+                      replaceDeprecatedColor(
+                        context,
+                        path.node,
+                        name,
+                        str => [param, key, str].join('.'),
+                        str => str
+                      )
+                    }
+
+                    // Don't traverse any nested member expressions.
+                    // The root-level member expression gives us all the data we need.
+                    return traverse.SKIP
+                  }
+                })
+              }
+            })
+          }
+
+          // Check if styled-system color prop is using a deprecated color
+          if (styledSystemColorProps.includes(propName) && Object.keys(deprecations).includes(propValue)) {
+            replaceDeprecatedColor(context, attribute.value, propValue)
+          }
+        }
+      },
+      CallExpression(node) {
+        // Skip if not calling the `themeGet` or `get` function
+        // `get` is the internal version of `themeGet` that's used in the primer/react repository
+        if (!isThemeGet(node.callee, context.getScope(node)) && !isGet(node.callee, context.getScope(node))) {
+          return
+        }
+
+        const [key, ...path] = node.arguments[0].value.split('.')
+        const name = path.join('.')
+
+        if (['colors', 'shadows'].includes(key) && Object.keys(deprecations).includes(name)) {
+          replaceDeprecatedColor(context, node.arguments[0], name, str => [key, str].join('.'))
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Get the variable declaration for the given identifier
+ */
+function getVariableDeclaration(scope, identifier) {
+  if (scope === null) {
+    return null
+  }
+
+  for (const variable of scope.variables) {
+    if (variable.name === identifier.name) {
+      return variable.defs[0]
+    }
+  }
+
+  return getVariableDeclaration(scope.upper, identifier)
+}
+
+/**
+ * Check if the given identifier is imported from the given module
+ */
+function isImportedFrom(moduleRegex, identifier, scope) {
+  const definition = getVariableDeclaration(scope, identifier)
+
+  // Return true if the variable was imported from the given module
+  return definition && definition.type == 'ImportBinding' && moduleRegex.test(definition.parent.source.value)
+}
+
+function isPrimerComponent(identifier, scope) {
+  return isImportedFrom(/^@primer\/components/, identifier, scope)
+}
+
+function isThemeGet(identifier, scope) {
+  return isImportedFrom(/^@primer\/components/, identifier, scope) && identifier.name === 'themeGet'
+}
+
+function isGet(identifier, scope) {
+  return isImportedFrom(/^\.\.?\/constants$/, identifier, scope) && identifier.name === 'get'
+}
+
+function replaceDeprecatedColor(
+  context,
+  node,
+  deprecatedName,
+  transformName = str => str,
+  transformReplacementValue = str => JSON.stringify(str)
+) {
+  const replacement = deprecations[deprecatedName]
+
+  if (replacement === null) {
+    // No replacement
+    context.report({
+      node,
+      message: `"${transformName(
+        deprecatedName
+      )}" is deprecated. Go to https://primer.style/primitives or reach out in the #primer channel on Slack to find a suitable replacement.`
+    })
+  } else if (Array.isArray(replacement)) {
+    // Multiple possible replacements
+    context.report({
+      node,
+      message: `"${transformName(deprecatedName)}" is deprecated.`,
+      suggest: replacement.map(replacementValue => ({
+        desc: `Use "${transformName(replacementValue)}" instead.`,
+        fix(fixer) {
+          return fixer.replaceText(node, transformReplacementValue(transformName(replacementValue)))
+        }
+      }))
+    })
+  } else {
+    // One replacement
+    context.report({
+      node,
+      message: `"${transformName(deprecatedName)}" is deprecated. Use "${transformName(replacement)}" instead.`,
+      fix(fixer) {
+        return fixer.replaceText(node, transformReplacementValue(transformName(replacement)))
+      }
+    })
+  }
+}