diff --git a/package.json b/package.json index d59f96d00..55677bad3 100644 --- a/package.json +++ b/package.json @@ -185,8 +185,8 @@ "@types/jest": "^27.0.3", "@types/node": "^12.20.37", "@types/react": "^18.0.9", - "@typescript-eslint/eslint-plugin": "^4.22.0", - "@typescript-eslint/parser": "^4.22.0", + "@typescript-eslint/eslint-plugin": "^7.13.0", + "@typescript-eslint/parser": "^7.13.0", "babel-check-duplicated-nodes": "^1.0.0", "babel-eslint": "^10.1.0", "babel-jest": "^27.4.5", @@ -200,14 +200,14 @@ "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.0", + "eslint-config-prettier": "^9.1.0", "eslint-config-react": "^1.1.7", "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-prettier": "^5.1.3", + "eslint-plugin-promise": "^6.2.0", + "eslint-plugin-react": "^7.34.2", + "eslint-plugin-react-hooks": "^4.6.2", "html-tag-names": "^1.1.2", "husky": "^3.0.9", "jest": "^27.4.5", @@ -223,7 +223,7 @@ "npm-run-all": "^4.0.2", "opencollective": "^1.0.3", "polished": "^1.2.1", - "prettier": "^2.3.0", + "prettier": "^3.3.2", "raf": "^3.4.0", "react": "16.14.0", "react-dom": "16.14.0", @@ -235,7 +235,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/__tests__/__snapshots__/styled.js.snap b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap index 2fbba924f..1ef0fcb1d 100644 --- a/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap +++ b/packages/babel-plugin/__tests__/__snapshots__/styled.js.snap @@ -901,15 +901,13 @@ exports[`emotion-babel-plugin styled two-consecutive-interpolations 1`] = ` import { css } from '@emotion/react' const H1 = styled.h1\` - \${props => - css\` - color: red; - \`} + \${props => css\` + color: red; + \`} /* dummy comment */ - \${props => - css\` - text-transform: uppercase; - \`} + \${props => css\` + text-transform: uppercase; + \`} \` @@ -927,7 +925,7 @@ var _ref = process.env.NODE_ENV === "production" ? { } : { name: "15r1ir2-H1", styles: "text-transform:uppercase;label:H1;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVTyIsImZpbGUiOiJ0d28tY29uc2VjdXRpdmUtaW50ZXJwb2xhdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgYH1cbiAgLyogZHVtbXkgY29tbWVudCAqL1xuICAke3Byb3BzID0+XG4gICAgY3NzYFxuICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBgfVxuYFxuIl19 */", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRZ0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -937,7 +935,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? { } : { name: "1yd8rfk-H1", styles: "color:red;label:H1;", - map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLTyIsImZpbGUiOiJ0d28tY29uc2VjdXRpdmUtaW50ZXJwb2xhdGlvbnMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuXG5jb25zdCBIMSA9IHN0eWxlZC5oMWBcbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIGNvbG9yOiByZWQ7XG4gICAgYH1cbiAgLyogZHVtbXkgY29tbWVudCAqL1xuICAke3Byb3BzID0+XG4gICAgY3NzYFxuICAgICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBgfVxuYFxuIl19 */", + map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJZ0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ }; @@ -946,7 +944,7 @@ const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? { } : { target: "e45grep0", label: "H1" -})(props => _ref2, props => _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT5cbiAgICBjc3NgXG4gICAgICBjb2xvcjogcmVkO1xuICAgIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgYH1cbmBcbiJdfQ== */"));" +})(props => _ref2, props => _ref, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */"));" `; exports[`emotion-babel-plugin styled with-spread 1`] = ` diff --git a/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js index f932adce2..aeb9c2e2d 100644 --- a/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js +++ b/packages/babel-plugin/__tests__/styled-macro/__fixtures__/two-consecutive-interpolations.js @@ -2,13 +2,11 @@ import styled from '@emotion/styled/macro' import { css } from '@emotion/react' const H1 = styled.h1` - ${props => - css` - color: red; - `} + ${props => css` + color: red; + `} /* dummy comment */ - ${props => - css` - text-transform: uppercase; - `} + ${props => css` + text-transform: uppercase; + `} ` diff --git a/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap index 75c64a11b..d62f95778 100644 --- a/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap +++ b/packages/babel-plugin/__tests__/styled-macro/__snapshots__/index.js.snap @@ -878,15 +878,13 @@ exports[`@emotion/styled.macro two-consecutive-interpolations 1`] = ` import { css } from '@emotion/react' const H1 = styled.h1\` - \${props => - css\` - color: red; - \`} + \${props => css\` + color: red; + \`} /* dummy comment */ - \${props => - css\` - text-transform: uppercase; - \`} + \${props => css\` + text-transform: uppercase; + \`} \` @@ -901,10 +899,10 @@ const H1 = /*#__PURE__*/_styled("h1", process.env.NODE_ENV === "production" ? { target: "e45grep0", label: "H1" })(props => css\` - color: red; - \`, props => css\` - text-transform: uppercase; - \`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT5cbiAgICBjc3NgXG4gICAgICBjb2xvcjogcmVkO1xuICAgIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PlxuICAgIGNzc2BcbiAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgYH1cbmBcbiJdfQ== */"));" + color: red; + \`, props => css\` + text-transform: uppercase; + \`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR3by1jb25zZWN1dGl2ZS1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHb0IiLCJmaWxlIjoidHdvLWNvbnNlY3V0aXZlLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQvbWFjcm8nXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcblxuY29uc3QgSDEgPSBzdHlsZWQuaDFgXG4gICR7cHJvcHMgPT4gY3NzYFxuICAgIGNvbG9yOiByZWQ7XG4gIGB9XG4gIC8qIGR1bW15IGNvbW1lbnQgKi9cbiAgJHtwcm9wcyA9PiBjc3NgXG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgYH1cbmBcbiJdfQ== */"));" `; exports[`@emotion/styled.macro with-spread 1`] = ` diff --git a/packages/cache/__tests__/hydration.js b/packages/cache/__tests__/hydration.js index 851e3ffb9..98e0e0fc1 100644 --- a/packages/cache/__tests__/hydration.js +++ b/packages/cache/__tests__/hydration.js @@ -10,9 +10,8 @@ beforeEach(() => { test('it works', () => { let css = `color:hotpink;` let hash = hashString(css) - safeQuerySelector( - 'body' - ).innerHTML = `` + safeQuerySelector('body').innerHTML = + `` let cache = createCache({ key: 'css' }) expect(cache.inserted).toEqual({ [hash]: true }) expect(document.documentElement).toMatchSnapshot() @@ -21,9 +20,8 @@ test('it works', () => { test('rehydrated styles to head can be flushed', () => { let css = `color:hotpink;` let hash = hashString(css) - safeQuerySelector( - 'head' - ).innerHTML = `` + safeQuerySelector('head').innerHTML = + `` // this moves emotion style tags at initialization time jest.resetModules() @@ -86,9 +84,8 @@ test('should only hydrate style elements matching the cache key', () => { let css = `color:hotpink;` let hash = hashString(css) - safeQuerySelector( - 'body' - ).innerHTML = `` + safeQuerySelector('body').innerHTML = + `` const cache = createCache({ key: 'custom-key' }) @@ -125,9 +122,8 @@ test('should only hydrate style elements matching the cache key', () => { test('Existing client-side inserted styles from Emotion 10 should not be moved', () => { // the nested nature isn't special, it's just meant to be a general "make sure they're not moved" - safeQuerySelector( - 'body' - ).innerHTML = `