Linting and run prettier outside of eslint

emotion-js · May 3, 2024 · 2e76344 · 2e76344
1 parent 52c4950
commit 2e76344
Show file tree

Hide file tree

Showing 31 changed files with 1,417 additions and 225 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -69,6 +69,8 @@ jobs:
 
       - name: ESLint
         run: yarn lint:check
+      - name: Prettier
+        run: yarn prettier:check
 
   typescript:
     name: dtslint

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,9 +12,9 @@ permissions: {}
 jobs:
   release:
     permissions:
-      contents: write # to create release 
+      contents: write # to create release
       issues: write # to post issue comments
-      pull-requests: write # to create pull request 
+      pull-requests: write # to create pull request
 
     name: Release
     runs-on: ubuntu-latest

diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,4 @@
-package.json
+package.json
+dist
+site/public
+.yarn
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,6 +4,6 @@ npmPublishAccess: public
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 yarnPath: .yarn/releases/yarn-3.2.3.cjs
diff --git a/docs/flow.mdx b/docs/flow.mdx
@@ -14,7 +14,7 @@ Unfortunately, Flow doesn't currently support generic types on tagged templates,
 you'd like to explictly type a styled component props, you will have to use one of the following
 alternatives:
 
-```jsx
+```tsx
 import styled from '@emotion/styled'
 
 // Option A
@@ -24,13 +24,13 @@ const A = styled<Props>('div')`
 
 // Option B
 const B = styled.div<Props>({
-  color: 'red',
+  color: 'red'
 })
 ```
 
 Styled components are annotated the same way normal React components are:
 
-```jsx
+```tsx
 import styled from '@emotion/styled'
 
 type Props = { a: string }
@@ -56,7 +56,6 @@ Be aware, Flow infers the return type of your components by referencing their re
 this means you will need to annotate the properties of the root component in the case below:
 
 ```jsx
-
 const Container = styled.div`
                   ^^^^^^^^^^^ Missing type annotation for P. P is a type parameter declared in function type [1] and was implicitly instantiated at
 encaps tag [2].   
@@ -69,7 +68,7 @@ export const App = () => <Container />
 You can use `React$ElementConfig` to obtain the props type of a HTML tag, or of
 any existing React component:
 
-```jsx
+```tsx
 import type { ElementConfig } from 'react'
 
 type Props = ElementConfig<'div'>
@@ -80,8 +79,7 @@ const Container = styled<Props>('div')`
 export const App = () => <Container />
 ```
 
-
-```jsx
+```tsx
 import type { ElementConfig } from 'react'
 import styled from '@emotion/styled'
 
@@ -101,7 +99,7 @@ const App = () => (
 Alternatively, you can define the return type of your component, so that
 Flow doesn't need to infer it reading the props type of the internal component:
 
-```jsx
+```tsx
 import type { Node } from 'react'
 
 const Container = styled.div`
@@ -110,6 +108,3 @@ const Container = styled.div`
 
 export const App = (): Node => <Container />
 ```
-
-
-
diff --git a/docs/migrating-to-emotion-10.mdx b/docs/migrating-to-emotion-10.mdx
@@ -216,7 +216,6 @@ injectGlobal`
 // ↓ ↓ ↓ ↓ ↓ ↓
 
 import { Global, css } from '@emotion/core'
-
 ;<Global
   styles={css`
     * {

diff --git a/docs/package-summary.mdx b/docs/package-summary.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Package Summaries"
+title: 'Package Summaries'
 ---
 
 Below is a list of most of Emotion's packages and a summary of what it's for and how it relates to other Emotion packages.

diff --git a/docs/ssr.mdx b/docs/ssr.mdx
@@ -45,7 +45,8 @@ import createCache from '@emotion/cache'
 
 const key = 'custom'
 const cache = createCache({ key })
-const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache)
+const { extractCriticalToChunks, constructStyleTagsFromChunks } =
+  createEmotionServer(cache)
 
 const html = renderToString(
   <CacheProvider value={cache}>
@@ -56,10 +57,7 @@ const html = renderToString(
 const chunks = extractCriticalToChunks(html)
 const styles = constructStyleTagsFromChunks(chunks)
 
-res
-  .status(200)
-  .header('Content-Type', 'text/html')
-  .send(`<!DOCTYPE html>
+res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -73,7 +71,7 @@ res
 
     <script src="./bundle.js"></script>
 </body>
-</html>`);
+</html>`)
 ```
 
 #### When using `@emotion/css`
@@ -96,10 +94,7 @@ let element = (
 
 let { html, css, ids } = extractCritical(renderToString(element))
 
-res
-  .status(200)
-  .header('Content-Type', 'text/html')
-  .send(`<!DOCTYPE html>
+res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -113,7 +108,7 @@ res
 
     <script src="./bundle.js"></script>
 </body>
-</html>`);
+</html>`)
 ```
 
 ### On client
@@ -129,8 +124,6 @@ ReactDOM.hydrate(
 )
 ```
 
-
-
 In this approach you have to create your own cache and emotion server then use extractCritical
 
 ## API Reference
@@ -167,7 +160,6 @@ This returns an object with the properties `html`, `ids` and `css`. It pulls out
 >
 > If you have dynamic global styles it's advised to create cache **per** single render to avoid global styles from different renders leaking into the extracted `css`.
 
-
 ```jsx
 import { renderToString } from 'react-dom/server'
 import { extractCritical } from '@emotion/server'
@@ -222,7 +214,7 @@ export const createMyCache = () =>
     key: 'my-prefix-key',
     stylisPlugins: [
       /* your plugins here */
-    ],
+    ]
   })
 
 export const myCache = createMyCache()

diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "benchmark": "cd scripts/benchmarks && yarn build && yarn run-benchmark",
     "flow": "flow",
     "flow:check": "flow check --flowconfig-name=.flowconfig-ci",
+    "prettier:check": "prettier --check .",
     "preinstall": "node ./scripts/ensure-yarn.js",
     "postinstall": "preconstruct dev && manypkg check",
     "changeset": "changeset",
@@ -44,36 +45,23 @@
     "css-in-js"
   ],
   "eslintConfig": {
-    "extends": [
-      "standard",
-      "standard-react",
-      "prettier"
-    ],
     "plugins": [
-      "prettier",
-      "flowtype",
-      "@emotion"
+      "@emotion",
+      "react",
+      "react-hooks",
+      "import"
     ],
-    "parser": "babel-eslint",
     "rules": {
       "camelcase": 0,
       "no-template-curly-in-string": 0,
       "prefer-const": 0,
       "no-unused-vars": 0,
-      "flowtype/define-flow-type": 2,
-      "import/no-duplicates": 0,
-      "prettier/prettier": [
-        "error",
-        {
-          "parser": "flow"
-        }
-      ],
       "react/jsx-curly-brace-presence": 0,
       "react/jsx-handler-names": 0,
       "react/no-unused-prop-types": 0,
       "react/prop-types": 0,
       "react/react-in-jsx-scope": 0,
-      "standard/computed-property-even-spacing": 0,
+      "react-hooks/rules-of-hooks": 2,
       "@emotion/pkg-renaming": 2
     },
     "env": {
@@ -89,6 +77,24 @@
           "jest": true
         }
       },
+      {
+        "files": [
+          "**/*.js"
+        ],
+        "parser": "@babel/eslint-parser"
+      },
+      {
+        "files": [
+          "**/*.{ts,tsx}"
+        ],
+        "plugins": [
+          "@typescript-eslint"
+        ],
+        "extends": [
+          "plugin:@typescript-eslint/eslint-recommended"
+        ],
+        "parser": "@typescript-eslint/parser"
+      },
       {
         "files": [
           "**/packages/*/src/*",
@@ -108,6 +114,14 @@
         "env": {
           "jest": false
         }
+      },
+      {
+        "files": [
+          "packages/*/types/*.{ts,tsx}"
+        ],
+        "rules": {
+          "react-hooks/rules-of-hooks": 0
+        }
       }
     ]
   },
@@ -167,6 +181,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.18.5",
+    "@babel/eslint-parser": "^7.24.5",
     "@babel/helper-module-imports": "^7.16.7",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@babel/plugin-syntax-jsx": "^7.17.12",
@@ -186,8 +201,9 @@
     "@types/jest": "^27.0.3",
     "@types/node": "^12.20.37",
     "@types/react": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "babel-check-duplicated-nodes": "^1.0.0",
-    "babel-eslint": "^10.1.0",
     "babel-flow-types": "^1.2.3",
     "babel-jest": "^27.4.5",
     "babel-plugin-codegen": "^4.1.5",
@@ -200,19 +216,13 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.57",
     "eslint-config-react": "^1.1.7",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-standard": "^4.0.1",
     "flow-bin": "^0.128.0",
     "html-tag-names": "^1.1.2",
     "husky": "^3.0.9",
@@ -241,7 +251,7 @@
     "react18-test-renderer": "npm:react-test-renderer@18.0.0-rc.0-next-aa8f2bdbc-20211215",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
-    "typescript": "^4.5.5",
+    "typescript": "^5.4.5",
     "unified": "^6.1.6",
     "webpack-bundle-analyzer": "3.3.2"
   },

diff --git a/packages/babel-plugin/README.md b/packages/babel-plugin/README.md
@@ -304,8 +304,8 @@ This option allows you to tell @emotion/babel-plugin what imports it should look
 An example file:
 
 ```js
-import { anotherExport } from 'my-package';
-import { someExport, thisIsTheJsxExport } from 'some-package';
+import { anotherExport } from 'my-package'
+import { someExport, thisIsTheJsxExport } from 'some-package'
 ```
 
 An example config:

diff --git a/packages/cache/package.json b/packages/cache/package.json
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
     "@emotion/hash": "*",
-    "typescript": "^4.5.5"
+    "typescript": "^5.4.5"
   },
   "files": [
     "src",

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
-    "typescript": "^4.5.5"
+    "typescript": "^5.4.5"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://emotion.sh",

diff --git a/packages/css/test/css.test.js b/packages/css/test/css.test.js
@@ -334,27 +334,23 @@ describe('css', () => {
     expect(sheet).toMatchSnapshot()
   })
   test('multiline declaration', () => {
-    /* eslint-disable prettier/prettier */
     const cls1 = css`
       display: grid;
       grid:
         'AppBar' auto
         'Main' 1fr
         / 1fr;
     `
-    /* eslint-enable prettier/prettier */
 
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
   test('multiline selector', () => {
-    /* eslint-disable prettier/prettier */
     const cls1 = css`
       .my-class:hover .its-child {
         background: pink;
       }
     `
-    /* eslint-enable prettier/prettier */
 
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()