Tsdx: Breaking change with tsdx 0.12.1 with Tailwind babel macro

Created on 4 Jan 2020 · 7Comments · Source: formium/tsdx

Current Behavior

I'm using tailwind.macro in a React library with Storybook built with tsdx. On tsdx 0.12.0, everything was working as expected as babel macros are supported out of the box.
However, when updating to 0.12.1, my builds stopped working properly with tailwind.macro.

I created a repository with the two versions and a simple component including styled-components and tailwind.macro: https://github.com/fknop/tsdx-tailwind.macro-bug.
I also included the two dist folders from the two versions:
0.12.0: https://github.com/fknop/tsdx-tailwind.macro-bug/blob/master/tsdx-0.12.0/library/dist/library.esm.js
0.12.1: https://github.com/fknop/tsdx-tailwind.macro-bug/blob/master/tsdx-0.12.1/library/dist/library.esm.js

As we can see, tw is not imported anywhere in the 0.12.1 version. This makes any code importing this build failing with the function tw being undefined.

Tested on both MacOS and Windows 10.

regression

Source

fknop

👍3

All 7 comments

Might be related to https://github.com/jaredpalmer/tsdx/pull/130#issuecomment-569375532 , but not sure.
Only other big thing that changed was the fix for getter/setter treeshaking optimization in #371 , which I don't think is related, but I was concerned about it breaking things per the PR. Success/Failure Hooks & TranspileOnly were added in a patch release as well

agilgur5 on 4 Jan 2020

Interesting!
I just tried to set the target of the reproduction repository to esnext, and the tailwind import seems to be back.

This is the output of the build with 0.12.1 and target: esnext

import _styled from 'styled-components';
import _tailwindUtils from 'tailwind.macro/utils.umd.js';

var _tailwindConfig2 = {};

var _tailwindConfig =
/*#__PURE__*/
_tailwindUtils.resolveConfig(_tailwindConfig2);

// Delete me
var Comp =
/*#__PURE__*/
_styled.div.withConfig({
  displayName: "src__Comp",
  componentId: "sc-19dskac-0"
})(["", ""],
/*#__PURE__*/
Object.assign(
/*#__PURE__*/
_tailwindUtils.resolveStyle(_tailwindConfig, [{
  "prop": "color",
  "config": "textColor"
}, {
  "prop": "fontSize",
  "config": "fontSize"
}], "xs")));

export { Comp };
//# sourceMappingURL=library.esm.js.map

fknop on 4 Jan 2020

👍1

What need to be changed?