Babel Macros - not working #44

yairEO · 2019-08-07T08:37:34Z

Hi, it would seem I cannot import the macro version of styled-components:

https://www.styled-components.com/docs/tooling#babel-macro

import styled from '@xstyled/styled-components/macro';

Failed to compile.
Error: Cannot find module '@xstyled/styled-components/macro'

Thought trying also importing from @xstyled/macro but no luck.

Importing directly from styled-components does work well:

import styled from 'styled-components/macro';

Background:

We have an app based on create-react-app, not ejected, and not using rewire, because CRA supports babel macros, and I wish to utilize that ability to be able to use the babel-plugin-styled-components plugin.

I need this so my styled-components will be generated with a real display name, to be able to access components in enzyme unit tests.

Related thread

The text was updated successfully, but these errors were encountered:

gregberge · 2019-08-07T13:39:10Z

Hello, yes it is not yet supported. If someone want to work on it, feel free. Else I will probably do it in september.

yairEO · 2019-08-12T07:19:40Z

I've implemented xstyled in dozens of files in a large app thinking I could use the Babel macro later (for testing) but was surprised it did not work.

Sadly, I do not have the time to look into this, because I am working full time, plus have my own Github open-source projects to maintain, with plenty of open issues to address

Enjoy your summer holiday!
I highly appreciate your major contribution to the styled-component community.

jmlweb · 2019-08-29T15:19:40Z

@neoziro Shall I work on this?

gregberge · 2019-08-29T15:32:51Z

@jmlweb yes you can!

jmlweb · 2019-08-30T15:02:09Z

@neoziro My idea is to create Higher Order Functions over the current logic so that you can pass the utils from the styled-components version required (standalone or macro). Something like this:

export const buildCss = scCss => {
  return function css(...rawArgs) {
    const scCssArgs = scCss(...rawArgs)
    const flattenedArgs = flattenStrings(scCssArgs)
    return flattenedArgs.map(transform)
  }
}

and then, you use it like this:

import { css as scCss } from 'styled-components'
import { buildCss } from './_internal'

export const css = buildCss(scCss)

or

import { css as scCss } from 'styled-components/macro'
import { buildCss } from './_internal'

export const css = buildCss(scCss)

Does it looks good, or do you have a better implementation idea?

gregberge · 2019-08-30T15:27:21Z

It should work yes. No I don't have better idea.

jmlweb · 2019-09-02T07:30:29Z

It seems it is not that simple...
It seems we need to export the enhanced version of the Styled Components macro, but I still had no luck.
We'll try to learn a bit about macros before taking this task.

yairEO · 2019-09-19T14:23:09Z

Hi, anyone knows if there is active development on this?

jmlweb · 2019-09-19T14:56:31Z

I took a look, but I don't have any idea about how babel macros work, so I got no success... Feel free to take it :)

yairEO · 2019-09-19T15:16:26Z

@jmlweb - I know even less 😝

Are we stuck with nobody that knows and can help?
Are we doomed refreshing this issue once a month to see no activity?

gregberge · 2019-09-22T15:42:49Z

I am afraid I am the only one involved who knows how to do it. Unfortunately it is not a required feature for me, so I can't give you a date for that feature.

Wizyma · 2019-09-22T17:45:05Z

Hey @neoziro
I started to work on this issue today, but actually i think there is some issues between babel-plugin-macro and rollup.
The umd version don't even build at all :D
cf:
most recent one : related issue
oldest: oldest issues
And it doesnt seem to be solved...

My work around on this was to remove the name from the rollup config of the package styled-components to build only the cjs and esm version.

And still there is some issues
when files are builded instead of having the import as:

... = require('styled-components/macro')
// we have
... = require('styled-components')

so i used the plugin babel-plugin-transform-rename-import, but still when i test it with a yarn link it throw an error so i am like 🤯! the error is probably related to this issue

gregberge · 2019-09-24T08:18:05Z

@Wizyma you have to create a specific folder inside the styled-components folder with a package.json and create a specific rollup build for that. So the macro will not have umd. It is like a package inside another.

Wizyma · 2019-09-24T09:24:12Z

@neoziro yeah i thinked about that but i didnt knew how much liberty i could take to do what i need for that :D
And then we should expose a @xstyled/styled-components/macro i think
but still, it doesnt change this fact...

yairEO · 2019-11-03T13:01:16Z

Any progress in this? This is mega important because I cannot eject my React app and I need automatic classnames for my styled-components for Selenium E2E tests.. Thanks.. This package is deeply integrated in our app in hundred+ files..

weyert · 2020-01-03T02:53:41Z

Looks like the styled-components issue has been fixed in CRA:
styled-components/styled-components#2713 (comment)

I would suggest roll your own babel macro if the problem persists.

gregberge · 2021-01-03T19:26:40Z

Still an issue for v2.

agriffis · 2021-02-15T16:53:13Z

I know that people would like the macro to work, but for reference in the meantime, here is the formula for using the plugin with xstyled and CRA

Install rescripts (replacement for rewire) and the plugin

yarn add -D @rescripts/cli @rescripts/rescript-env babel-plugin-styled-components

Apply this change to package.json

--- a/package.json
+++ b/package.json
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test"
+  },
+  "rescripts": [
+    "env"
+  ],
+  "babel": {
+    "presets": [
+      "react-app"
+    ],
+    "plugins": [
+      [
+        "babel-plugin-styled-components",
+        {
+          "topLevelImportPaths": [
+            "@xstyled/styled-components",
+            "@xstyled/styled-components/no-tags",
+            "@xstyled/styled-components/native",
+            "@xstyled/styled-components/primitives"
+          ]
+        }
+      ]
+    ]
   },

If you don't already import React at the top of your components, you'll get a build error, so you'll need to add to each one:
```
import React from 'react'
```

@gregberge It would be super cool if the classes generated by <x.div ...> also had classes for debugging, e.g. Filename__LineNo but I haven't looked at what would be involved for that. This kind of debuggability is the biggest concern that I hear from devs working on our projects internally.

gregberge · 2021-02-17T07:04:32Z

@agriffis it is not related to Babel Macro, but I agree with you! #190

agriffis · 2021-03-05T14:23:58Z

There are two things preventing the macro from working:

It is hard-coded to 'styled-components', see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/macro/index.js#L18-L21
The macro bundles an older version of the plugin, before topLevelImportPaths was supported. Even if you have the newer version installed, or if you use "resolutions" to try to force it, it won't work. The upstream repo needs to be rebuilt and released with the updated plugin.

Anyway, all of this needs to become an issue and PR upstream. I'll work on that soon

If `styled` should come from a wrapper instead of directly from styled-components, this enables users of the macro to customize the import by configuring in `packages.json`: "babelMacros": { "styledComponents": { "importModuleName": "my-styled-components" } } Previously similar functionality landed in babel-plugin-styled-components so users of the plugin could use a wrapper at that level, but it wasn't available to users of the macro. This builds on that work by passing the customized module name through to the plugin. Consequently we also update the dependency to ensure the plugin supports `topLevelImportPaths` See styled-components/babel-plugin-styled-components@325167b Fixes styled-components/xstyled#44

agriffis · 2021-03-06T13:42:41Z

Pull request is in! Unfortunately it also looks like styled-components upstream is on hiatus, so it could take a while.

Also, the PR is against v6 in development, and then it would need to be backported to the legacy-v5 branch. I have a lot of uncertainty about how quickly this will move forward.

If you want to give it a thumbs up, head over to styled-components/styled-components#3422

If you need something earlier, you can yarn add -D @scampersand/styled-components.macro and then add to your package.json

  "babelMacros": {
    "styledComponents": {
      "importModuleName": "@xstyled/styled-components"
    }
  },

then you can import styled from '@scampersand/styled-components.macro' and it should work.

If `styled` should come from a wrapper instead of directly from styled-components, this enables users of the macro to customize the import by configuring in `packages.json`: "babelMacros": { "styledComponents": { "importModuleName": "my-styled-components" } } Previously similar functionality landed in babel-plugin-styled-components so users of the plugin could use a wrapper at that level, but it wasn't available to users of the macro. This builds on that work by passing the customized module name through to the plugin. Consequently we also update the dependency to ensure the plugin supports `topLevelImportPaths` See styled-components/babel-plugin-styled-components@325167b Fixes styled-components/xstyled#44

If `styled` should come from a wrapper instead of directly from styled-components, this enables users of the macro to customize the import by configuring in `packages.json`: "babelMacros": { "styledComponents": { "importModuleName": "my-styled-components" } } Previously similar functionality landed in babel-plugin-styled-components so users of the plugin could use a wrapper at that level, but it wasn't available to users of the macro. This builds on that work by passing the customized module name through to the plugin. Consequently we also update the dependency to ensure the plugin supports `topLevelImportPaths` See styled-components/babel-plugin-styled-components@325167b Fixes styled-components/xstyled#44 Cherry picked from styled-components@83c8b0c

agriffis · 2021-03-11T18:49:20Z

Quick update

This has been merged now to styled-components v6 in development, see styled-components/styled-components#3422

I've also opened the PR to get it on v5 legacy, which is the current stable version, see styled-components/styled-components#3432

That's progress, but unfortunately we're still between releases. There haven't been any v6 development releases, and the last v5 release was in October 2020, so it's hard to say when this will be available for general use. Feel free to give the v5 PR a thumbs-up, it might help.

In the meantime you can use @scampersand/styled-components.macro as mentioned above, it's effectively the same as what I put the in the PR for styled-components

agriffis · 2021-03-30T17:18:49Z

Great news, styled-components 5.2.2 was released with this fix 🎉

https://github.com/styled-components/styled-components/releases/tag/v5.2.2

I think all we need now is an update to xstyled docs and we can close this.

Closes #44

gregberge added enhancement ✨ good first issue 🤙 help wanted 🆘 labels Aug 7, 2019

gregberge mentioned this issue Feb 17, 2021

Make x.div debug easier #190

Open

agriffis mentioned this issue Mar 6, 2021

feat: macro can customize importModuleName styled-components/styled-components#3422

Merged

agriffis mentioned this issue Mar 30, 2021

docs: babel macro works now #222

Closed

gregberge added a commit that referenced this issue Apr 1, 2021

docs(website): document babel-macros support

6811715

Closes #44

gregberge mentioned this issue Apr 1, 2021

docs(website): document babel-macros support #223

Merged

gregberge added a commit that referenced this issue Apr 1, 2021

docs(website): document babel-macros support

7fd67ab

Closes #44

gregberge closed this as completed in #223 Apr 1, 2021

gregberge added a commit that referenced this issue Apr 1, 2021

docs(website): document babel-macros support (#223)

1c35ef6

Closes #44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Babel Macros - not working #44

Babel Macros - not working #44

yairEO commented Aug 7, 2019 •

edited

gregberge commented Aug 7, 2019

yairEO commented Aug 12, 2019 •

edited

jmlweb commented Aug 29, 2019

gregberge commented Aug 29, 2019

jmlweb commented Aug 30, 2019 •

edited

gregberge commented Aug 30, 2019

jmlweb commented Sep 2, 2019

yairEO commented Sep 19, 2019

jmlweb commented Sep 19, 2019 •

edited

yairEO commented Sep 19, 2019

gregberge commented Sep 22, 2019

Wizyma commented Sep 22, 2019

gregberge commented Sep 24, 2019

Wizyma commented Sep 24, 2019 •

edited

yairEO commented Nov 3, 2019

weyert commented Jan 3, 2020

gregberge commented Jan 3, 2021

agriffis commented Feb 15, 2021 •

edited

gregberge commented Feb 17, 2021

agriffis commented Mar 5, 2021 •

edited

agriffis commented Mar 6, 2021

agriffis commented Mar 11, 2021

agriffis commented Mar 30, 2021

Babel Macros - not working #44

Babel Macros - not working #44

Comments

yairEO commented Aug 7, 2019 • edited

Background:

gregberge commented Aug 7, 2019

yairEO commented Aug 12, 2019 • edited

jmlweb commented Aug 29, 2019

gregberge commented Aug 29, 2019

jmlweb commented Aug 30, 2019 • edited

gregberge commented Aug 30, 2019

jmlweb commented Sep 2, 2019

yairEO commented Sep 19, 2019

jmlweb commented Sep 19, 2019 • edited

yairEO commented Sep 19, 2019

gregberge commented Sep 22, 2019

Wizyma commented Sep 22, 2019

gregberge commented Sep 24, 2019

Wizyma commented Sep 24, 2019 • edited

yairEO commented Nov 3, 2019

weyert commented Jan 3, 2020

gregberge commented Jan 3, 2021

agriffis commented Feb 15, 2021 • edited

gregberge commented Feb 17, 2021

agriffis commented Mar 5, 2021 • edited

agriffis commented Mar 6, 2021

agriffis commented Mar 11, 2021

agriffis commented Mar 30, 2021

yairEO commented Aug 7, 2019 •

edited

yairEO commented Aug 12, 2019 •

edited

jmlweb commented Aug 30, 2019 •

edited

jmlweb commented Sep 19, 2019 •

edited

Wizyma commented Sep 24, 2019 •

edited

agriffis commented Feb 15, 2021 •

edited

agriffis commented Mar 5, 2021 •

edited