bernard-lin / babel-plugin-glamorous-displayname Goto Github PK

babel-macros is a new thing that I made and I think it's pretty great. I'm going to create glamorous.macro and port this over to that.

I'll have to provide more info later, but if you using this with the babel-plugin-istanbul first, then it inserts the displayName assignment before the component is created. Totally bonkers. But it means that you can't use this when using --coverage with jest... At least that's what I found in the glamorous-website project. Which is really odd because that seems to work fine in my work project. 🤔

For the readme
Before:

After:

Something like this:

import glamorous from 'glamorous'

const {Div} = glamorous

causes this plugin to fail with:

TypeError: e.js: Property value expected type of string but got null
    at Object.validate (my-app/node_modules/babel-types/lib/definitions/index.js:161:13)
    at validate (my-app/node_modules/babel-types/lib/index.js:505:9)
    at Object.builder (my-app/node_modules/babel-types/lib/index.js:466:7)
    at my-app/node_modules/babel-plugin-glamorous-displayname/dist/index.js:86:21
    at Array.forEach (native)
    at PluginPass.exit (my-app/node_modules/babel-plugin-glamorous-displayname/dist/index.js:61:45)
    at newFn (my-app/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (my-app/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (my-app/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (my-app/node_modules/babel-traverse/lib/path/context.js:117:8)

I would like it to use the displayName of my custom components since I rarely give the glamorous components names.

This example hopefully explains what I mean better:

const SideNav = (props) => {
  const { data: {
    merchant_logo: logo,
    merchant_name: name,
  } } = props

  return (
      <g.Div
        css={{
          backgroundColor: '#2B2C2C',
        }}
      >
        <g.Figure
          css={{
            margin: 0,
          }}
        >
        text
        </g.Figure>
      </g.Div>
  )
}

In the example above the first div would get the className of something like SideNav-div and the <g.Figure /> would get something like SideNav-div-figure

Hey there, I'm having an issue with the plugin when trying to import and destructure glamorous components. Here is some pseudo code I think will reproduce the issue.

MyComponent.js

import { Logo }  from './styles'
import glamorous from 'glamorous'

export default const MyComponent = () => (
    <div>
         <Logo />
    </div>
)

styles.js

import glamorous from 'glamorous'

export const Logo = glamorous.div({
    color: 'red'
})

.babelrc

{
    "presets": [
      'react', ["env", { "targets": { "browsers": ["last 2 versions"] }, "useBuiltIns": true }]
    ],
    "plugins": [
      "transform-class-properties",
      ["transform-object-rest-spread", { "useBuiltIns": true }],
      ["glamorous-displayname"]
    ]
}

Error
I've got a few different errors as I've messed with it.

Module build failed: Error: /Users/andrewdelprete/project/styles.js: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

Module build failed: TypeError: /Users/andrewdelprete/project/MyComponent.js: Property value expected type of string but got null

Perhaps it's something small, any help would be greatly appreciated.

We could use https://github.com/babel-utils/babel-plugin-tester :)

Its not too hard to make it configurable, lets not maintain the same thing over dozens of repositories and make one for all similar use cases.

Related issue cssinjs/styled-jss#25

Hello 👋
I know this is not the best place for this, but i don't know why, this plugin doesn't work with my code 😶.

• babel-plugin-glamorous-displayname version: "^2.1.0",
• node version: v8.7.0
• npm (or yarn) version: 1.2.1

Relevant code or config

// .babelrc
{
  "presets": ["env", "react"],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "glamorous-displayname",
    ["module-resolver", {
      "root": ["./app"]
    }]
  ],
  "env": {
    "production": {
      "plugins": ["transform-react-remove-prop-types"]
    }
  }
}

What you did:
For example, this code :

// style.js
import { div } from 'glamorous';

export const StyledApp = div({
  color: '#fffdd8',
  display: 'flex',
  height: '100%',
  position: 'relative',
});

What happened:
In my React DevTools, i don't have StyledApp, just glamorous(div)

Someone can help me ? 😶
Thanks..