babel-preset: transforms dont work with TypeScript >4.4 commonjs output

[Hotell]

Starting TS 4.4 commonjs output emits same code as swc, thus running into same issues when trying to process commonjs modules with griffel.

ts emit change: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html#more-compliant-indirect-calls-for-imported-functions

the problem is that extra self invocation (0, _react.makeStyles)(...), without that things work _react.makeStyles(...)

source

import { makeStyles } from "@griffel/react";

export const useStyles = makeStyles({
    root: {
        display: 'inline',
        lineHeight: 0
    },
    rtl : {
      transform: 'scaleX(-1)'
    }
});

swc output

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "useStyles", {
    enumerable: true,
    get: function() {
        return useStyles;
    }
});
const _react = require("@griffel/react");
const useStyles = (0, _react.makeStyles)({
    root: {
        display: 'inline',
        lineHeight: 0
    },
    rtl: {
        transform: 'scaleX(-1)'
    }
});

ts output

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStyles = void 0;
const react_1 = require("@griffel/react");
exports.useStyles = (0, react_1.makeStyles)({
    root: {
        display: 'inline',
        lineHeight: 0
    },
    rtl: {
        transform: 'scaleX(-1)'
    }
});

Related issues:

https://github.com/microsoft/griffel/issues/514