Doesn't play well with babel-plugin-styled-components -- plugin order matters

[thany]

Maintainer Update

For any new readers of this issue, per #543 (comment), you can use styled-components/macro instead of babel-plugin-styled-components, which will work.

---

Current Behavior

I'm using babel-plugin-styled-components to annotate styled-components with CSS classes to more easily debug them in the browser's inspector.

Expected behavior

I'd expect this plugin to do something. Namely, do what it says on the tin. And it does when I run storybook for our project. But it doesn't when I'm done and want to build my project through tsdx.

Suggested solution(s)

Perhaps babel plugins ought to be merged differently. I suspect the plugins from .babelrc are executed too early or too late. I find it massively complicated to figure out what exactly is happening under the hood, and therefor I have no way of knowing how and when a babel plugin is executed, or supposed to be executed. But since the plugin itself does work, there must be an issue with how or when it's being called.

Additional context

Our project is based on React + styled-components in Storybook. In Storybook, babel-plugin-styled-components does it job beautifully. But in the tsdx build, it does not, and indeed, I cannot find any mention of the classnames that are supposed to be generated. Having or not having this plugin, literally makes not a byte of difference in the dist files that tsdx generates.

Your environment

Software	Version(s)
TSDX	0.12.3
TypeScript	3.8.3
Browser	Firefox 73
npm/Yarn	npm 6.9.0
Node	10.16.3
Operating System	Windows 10

[agilgur5]

The Babel plugins that are used internally are here:

tsdx/src/babelPluginTsdx.ts

Lines 64 to 102 in 3a6d42f

	[
	// {
	// name: '@babel/plugin-transform-react-jsx',
	// pragma: customOptions.jsx || 'h',
	// pragmaFrag: customOptions.jsxFragment || 'Fragment',
	// },
	{ name: 'babel-plugin-annotate-pure-calls' },
	{ name: 'babel-plugin-dev-expression' },
	customOptions.format !== 'cjs' && {
	name: 'babel-plugin-transform-rename-import',
	replacements,
	},
	isTruthy(customOptions.defines) && {
	name: 'babel-plugin-transform-replace-expressions',
	replace: customOptions.defines,
	},
	{
	name: 'babel-plugin-transform-async-to-promises',
	inlineHelpers: true,
	externalHelpers: true,
	},
	{
	name: '@babel/plugin-proposal-class-properties',
	loose: true,
	},
	// Adds syntax support for optional chaining (.?)
	{ name: '@babel/plugin-proposal-optional-chaining' },
	// Adds syntax support for default value using ?? operator
	{ name: '@babel/plugin-proposal-nullish-coalescing-operator' },
	{
	name: '@babel/plugin-transform-regenerator',
	async: false,
	},
	{
	name: 'babel-plugin-macros',
	},
	isTruthy(customOptions.extractErrors) && {
	name: './errors/transformErrorMessages',
	},

It might be that the Rollup plugins that are run prior change some things too (or Rollup itself). Are you using a custom tsdx.config.js? There wasn't a repro provided.

---

Also please ignore the reference above, that was an accident as I was trying to reference two PRs I made back-to-back but this issue was created in-between

[thany]

Sorry, no there's no custom tsdx.config.js. Only a .babelrc that literally only contains the plugin I mentioned:

{
  "plugins": [
    "babel-plugin-styled-components"
  ]
}

I've even tried messing up this name, which outputs an error. That's evidence that it does pick up my plugin properly.

Looking at babelPluginTsdx.ts, it's still pretty hard to predict where plugins from .babelrc go. And I don't even really know what should be the correct order, because babel-plugin-styled-components doesn't mention that.

I've also looked at typescript-plugin-styled-components which is supposed to do the same, but it's unclear how or where I should integrate that with tsdx.

[agilgur5]

Custom plugins get added to the end of the default plugins list (unless they are merged with the defaults):

tsdx/src/babelPluginTsdx.ts

Line 25 in 3a6d42f

mergedItems.push(item);

Yea idk what it's not interacting with well. There seem to be some issues at styled-components as well like styled-components/babel-plugin-styled-components#243 that might be related as well as some on other Babel plugins.

You'd have to override the rollup-plugin-typescript2 config to use a TS transformer, and I wouldn't recommend doing either as they're both pretty hacky methods (but there are some outdated guides in the HOWTOs issue). Babel is easier and a lot more robust for transforms.

You might want to try the styled-components Babel macro instead as some reports there say it has less issues. But that does require some more config if you're testing with Jest due to #383

[thany]

@agilgur5

unless they are merged with the defaults

How can I try that? I'd like to add it sooner to diagnose if load order is causing the issue.

As for your other remarks, basically you're telling me what you'd recommend against 😀 So thanks for the info, I guess. I'd rather not write a whole bunch more config (nevermind if it's hacky), because as a general rule, config becomes exponentially harder to maintain as it grows.

[agilgur5]

How can I try that? I'd like to add it sooner to diagnose if load order is causing the issue.

You can't -- the default plugins of TSDX don't include babel-plugin-styled-components. Sorry, I think you may have misinterpreted something there.

As for your other remarks, basically you're telling me what you'd recommend against

I also mentioned trying the styled-components Babel macro. If it works, that would be the easiest solution by a fairly big margin.

And some of the styled-components issues point to downgrading as a possible solution.

[thany]

Sorry, I must have misinterpreted indeed.

I'll try the macro solution.

[zprjk]

Can you please report if the macro solution worked for you? Thank you.

[agilgur5]

Ok, so I added an integration test in #627 that indeed fails to show an impact with this plugin (comments aren't removed). It seems that the docs even say that "plugin order matters" and to put it first, but TSDX doesn't quite let you control that order right now.

Will be looking to improve that with presets, but it's a tough problem in general (it's even mentioned in the babel-plugin-macros rationale). Changing the order to put user plugins first may also break things.

Also, looking at the babel-plugin-styled-components code, docs, and output in detail with tests, I have a feeling the conflict may be with babel-plugin-annotate-pure-calls that TSDX uses, but I'm not sure. The integration tests should at least help investigate these types of problems more easily.

I might be able to change babel-plugin-macros to go first, and that might make styled-components/macro a usable workaround, but currently it doesn't work either.

[agilgur5]

So changing babel-plugin-macros to go first indeed enables styled-components/macro to work. Gonna make that change as a workaround for this and hopefully changing that ordering doesn't break any other plugins 😐

[thany]

Sorry I haven't come around to it yet. It's not super important, so we haven't given this much priority.

Glad to see you're making progress regardless 😎

[agilgur5]

Workaround making styled-components/macro work is in #644
Will probably hold off on merging till a minor release though as the plugin order change is potentially breaking (though highly unlikely)

[agilgur5]

#644 has been merged and will be available soon with the release of v0.14.0.
Per comments above, this creates a workaround for babel-plugin-styled-components that allows you to use styled-components/macro instead. Using babel-plugin-styled-components in a babelrc is still unsupported though.

[agilgur5]

@allcontributors please add @thany for bug (it's not entirely a bug, as it's not in core, but a bug with an integration, but closest thing)

[allcontributors]

@agilgur5

I've put up a pull request to add @thany! 🎉

[hhedger-ae]

I can't seem to get styled-components css prop feature to work when using their macro in tsdx. I am able to get it to work in a new create-react-app, though.

Steps:

• tsdx create csstest
• yarn add styled-components
• import 'styled-components/macro in top of index.tsx
• render an h1 <h1 css={{ color: 'red' }}>Hello World</h1>

When I check it in the example parcel app, it doesn't seem to be respecting the css prop. Would appreciate it if anyone knows what's going on here. I thought it may be related to parcel, but can't figure it out.

[ivan-kleshnin]

Same problem with Styled-JSX library 😞
The styled-jsx/babel plugin (manually added to .babelrc) is not called at a proper phase.