fix(babel): support for typescript 4.9 (#1137, fixes #1133)

.changeset/nine-gifts-attack.md

@@ -0,0 +1,18 @@
+---
+'@linaria/atomic': patch
+'@linaria/babel-preset': patch
+'@linaria/cli': patch
+'@linaria/core': patch
+'@linaria/esbuild': patch
+'@linaria/griffel': patch
+'@linaria/babel-plugin-interop': patch
+'@linaria/postcss-linaria': patch
+'@linaria/react': patch
+'@linaria/shaker': patch
+'@linaria/tags': patch
+'@linaria/testkit': patch
+'@linaria/utils': patch
+'linaria-website': patch
+---
+
+Upgrade Babel to support TypeScript 4.9. Fixes #1133.

examples/astro-solid/package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "devDependencies": {
     "@astrojs/solid-js": "^1.2.3",
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.20.2",
     "@linaria/core": "workspace:^",
     "@linaria/shaker": "workspace:^",
     "@linaria/vite": "workspace:^",

examples/rollup/package.json

@@ -7,11 +7,11 @@
     "linaria-website": "workspace:^"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@linaria/rollup": "workspace:^",
-    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "rollup": "^2.76.0",

package.json

@@ -6,14 +6,14 @@
     "git-raw-commits": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.9",
-    "@babel/core": "^7.18.9",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/plugin-proposal-class-properties": ">=7",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/preset-env": ">=7",
-    "@babel/preset-react": ">=7",
-    "@babel/preset-typescript": ">=7",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.22.0",
     "@commitlint/config-conventional": "^8.3.4",
     "@types/jest": "^28.1.0",

packages/atomic/package.json

@@ -15,7 +15,7 @@
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.9"
+    "@babel/types": "^7.20.2"
   },
   "engines": {
     "node": "^12.16.0 || >=13.7.0"

packages/babel/package.json

@@ -4,12 +4,12 @@
   "version": "4.3.0",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/generator": "^7.18.9",
+    "@babel/core": "^7.20.2",
+    "@babel/generator": "^7.20.4",
     "@babel/helper-module-imports": "^7.18.6",
-    "@babel/template": "^7.18.6",
-    "@babel/traverse": "^7.18.9",
-    "@babel/types": "^7.18.9",
+    "@babel/template": "^7.18.10",
+    "@babel/traverse": "^7.20.1",
+    "@babel/types": "^7.20.2",
     "@linaria/core": "workspace:^",
     "@linaria/logger": "workspace:^",
     "@linaria/shaker": "workspace:^",

packages/babel/src/utils/__tests__/__snapshots__/collectTemplateDependencies.test.ts.snap

@@ -4,9 +4,7 @@ exports[`collectTemplateDependencies hoist chain of statements 1`] = `
 "import str from \\"module\\";
 let arg = str;
 let variable = arg + \\"2\\";
-
 const _exp = /*#__PURE__*/() => variable;
-
 function fn() {
   {
     const template = tag\`\${_exp()}\`;
@@ -16,15 +14,10 @@ function fn() {
 
 exports[`collectTemplateDependencies hoist expressions 1`] = `
 "import x from \\"module\\";
-
 const _exp = /*#__PURE__*/() => 42;
-
 const _exp2 = /*#__PURE__*/() => \\"test\\";
-
 const _exp3 = /*#__PURE__*/() => () => \\"result\\";
-
 const _exp4 = /*#__PURE__*/() => 21 * x;
-
 function fn() {
   const template = tag\`\${_exp()}\${_exp2()}\${_exp3()}\${_exp4()}\`;
 }"
@@ -37,9 +30,7 @@ let {
 } = {
   variable: result
 };
-
 const _exp = /*#__PURE__*/() => variable;
-
 function fn() {
   const template = tag\`\${_exp()}\`;
 }"
@@ -49,7 +40,6 @@ exports[`collectTemplateDependencies hoistExpression with object 1`] = `
 "const _exp = /*#__PURE__*/() => ({
   variable: \\"test\\"
 }).variable;
-
 function fn() {
   const template = tag\`\${_exp()}\`;
 }"
@@ -67,9 +57,7 @@ exports[`collectTemplateDependencies non-hoistable expression 1`] = `
 exports[`collectTemplateDependencies should hoist expressions after imports 1`] = `
 "import { styled } from '@linaria/react';
 import slugify from '../__fixtures__/slugify';
-
 const _exp = /*#__PURE__*/() => slugify('test');
-
 export const Title = styled.h1\`
   &:before {
     content: \\"\${_exp()}\\"

packages/cli/package.json

@@ -7,7 +7,7 @@
   },
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.20.2",
     "@linaria/babel-preset": "workspace:^",
     "@linaria/utils": "workspace:^",
     "glob": "^7.1.3",

packages/core/package.json

@@ -9,8 +9,8 @@
     "@linaria/utils": "workspace:^"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.18.9",
-    "@babel/types": "^7.18.9",
+    "@babel/traverse": "^7.20.1",
+    "@babel/types": "^7.20.2",
     "@types/babel__core": "^7.1.19",
     "@types/babel__traverse": "^7.17.1",
     "@types/node": "^17.0.39"

packages/esbuild/package.json

@@ -4,7 +4,7 @@
   "version": "4.2.2",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.20.2",
     "@linaria/babel-preset": "workspace:^",
     "@linaria/utils": "workspace:^",
     "esbuild": "^0.12.5"

packages/griffel/package.json

@@ -11,7 +11,7 @@
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.9"
+    "@babel/types": "^7.20.2"
   },
   "engines": {
     "node": "^12.16.0 || >=13.7.0"

packages/interop/__tests__/__snapshots__/index.test.ts.snap

@@ -7,19 +7,14 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = require(\\"styled-components\\");
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = (0, _styledComponents.css)\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -30,19 +25,14 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require(\\"linaria/react\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _react.default.h1\`
   & > \${_Title.default} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -53,19 +43,14 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _styledComponents.default.h1\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default.Small)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -76,21 +61,15 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 var _Cmp = _interopRequireDefault(require(\\"./Cmp\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = (0, _styledComponents.default)(_Cmp.default)\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -101,21 +80,15 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 var _Cmp = _interopRequireDefault(require(\\"./Cmp\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = (0, _styledComponents.default)(_Cmp.default).attrs(() => ({}))\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -126,19 +99,14 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _styledComponents.default.h1\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;
 
@@ -149,18 +117,13 @@ Object.defineProperty(exports, \\"__esModule\\", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = _interopRequireDefault(require(\\"styled-components\\"));
-
 var _Title = _interopRequireDefault(require(\\"./Title\\"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _styledComponents.default.h1.attrs(() => ({}))\`
   & > \${(i => i && i.__linaria ? '.' + i.__linaria.className : i)(_Title.default)} {
     color: red;
   }
 \`;
-
 exports.default = _default;"
 `;

packages/interop/package.json

@@ -6,9 +6,9 @@
     "email": "anton@evz.name"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/traverse": "^7.18.9",
-    "@babel/types": "^7.18.9",
+    "@babel/core": "^7.20.2",
+    "@babel/traverse": "^7.20.1",
+    "@babel/types": "^7.20.2",
     "@types/babel__core": "^7.1.19",
     "@types/babel__traverse": "^7.17.1",
     "dedent": "^0.7.0"

packages/postcss-linaria/package.json

@@ -4,13 +4,13 @@
   "version": "4.1.4",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
-    "@babel/generator": "^7.18.9",
-    "@babel/parser": "^7.18.13",
-    "@babel/traverse": "^7.18.9",
+    "@babel/generator": "^7.20.4",
+    "@babel/parser": "^7.20.3",
+    "@babel/traverse": "^7.20.1",
     "stylelint": "^14.11.0"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.9",
+    "@babel/types": "^7.20.2",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.17.1",
     "postcss": "^8.3.11"

packages/react/package.json

@@ -12,7 +12,7 @@
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.9",
+    "@babel/types": "^7.20.2",
     "@types/babel__core": "^7.1.19",
     "@types/node": "^17.0.39",
     "@types/react": ">=16",

packages/shaker/package.json

@@ -4,19 +4,19 @@
   "version": "4.2.4",
   "bugs": "https://github.com/callstack/linaria/issues",
   "dependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/generator": "^7.18.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
-    "@babel/plugin-transform-runtime": ">=7",
-    "@babel/plugin-transform-template-literals": ">=7",
-    "@babel/preset-env": ">=7",
+    "@babel/core": "^7.20.2",
+    "@babel/generator": "^7.20.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-template-literals": "^7.18.9",
+    "@babel/preset-env": "^7.20.2",
     "@linaria/logger": "workspace:^",
     "@linaria/utils": "workspace:^",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "ts-invariant": "^0.10.3"
   },
   "devDependencies": {
-    "@babel/types": "^7.18.9",
+    "@babel/types": "^7.20.2",
     "@types/babel__core": "^7.1.19",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.17.1",