Babel Macros - not working about xstyled HOT 23 CLOSED

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

from xstyled.

@jmlweb yes you can!

from xstyled.

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

from xstyled.

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

from xstyled.

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.

from xstyled.

@neoziro Shall I work on this?

from xstyled.

@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?

from xstyled.

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.

from xstyled.

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

from xstyled.

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 :)

from xstyled.

@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?

from xstyled.

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.

from xstyled.

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

from xstyled.

@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.

from xstyled.

@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...

from xstyled.

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..

from xstyled.

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.

from xstyled.

Still an issue for v2.

from xstyled.

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

1. Install rescripts (replacement for rewire) and the plugin

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

2. 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"
   +          ]
   +        }
   +      ]
   +    ]
      },

3. 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.

from xstyled.

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

from xstyled.

There are two things preventing the macro from working:

1. 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

2. 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

from xstyled.

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.

from xstyled.

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.

from xstyled.