Pass dynamic components in the as prop

[satya164]

trafficstars

I haven't tried this in a real app :)

[satya164]

This won't work if the variable is re-assigned. Maybe we should always use the as prop?

[stevensacks]

Please let me know when I can pull and test this PR in my app and I'll let you know how it works! 👍

[satya164]

@stevensacks you can give it a try now and let us know

[stevensacks]

Will do. Happy new year!

[stevensacks]

@satya164 I've been trying to test this pull request but I'm getting an error:

npm i -S "git://github.com/styled-components/babel-plugin-styled-components.git#fd610c1e083f92678e8133fe807192d0d7cfba7c"

"babel-plugin-styled-components": "git://github.com/styled-components/babel-plugin-styled-components.git#fd610c1e083f92678e8133fe807192d0d7cfba7c"

./src/components/App/index.js
Error: Cannot find module 'babel-plugin-styled-components'

App/index.js has these imports

import {css, keyframes} from 'styled-components';
import React from 'react';
import styled from 'styled-components/macro';

[stevensacks]

@satya164 can you please let me know how to npm install this pull request? Thanks!

[satya164]

I think you need to install it from my fork. Anyway, isntalling with npm doesn't seem to work for me either. I tried with yarn and it doesn't run prepublish script (I think it should be prepare @mxstbr).

The following worked for me:

yarn add "styled-components@github:satya164/babel-plugin-styled-components#fd610c1e083f92678e8133fe807192d0d7cfba7c" && yarn --cwd node_modules/babel-plugin-styled-components run prepublish

[stevensacks]

@satya164 I tried that and I got the following error.

Error: Cannot find module 'styled-components/macro' from '/Users/steven/Development/project/src/components/App'

Both of the libs are showing up as not installed.

[satya164]

I've no idea why this will happen. Maybe @mxstbr has encountered it?

Worst case, you could clone the branch, run npm build and copy it to your node_modules for trying.

[stevensacks]

@mxstbr Would you be willing to merge this into a release candidate to make things easier?

[mxstbr]

I'll publish this under a tag—one second...

[mxstbr]

yarn add --dev babel-plugin-styled-components@experimental

[stevensacks]

Thanks! I’ll give it a shot.

[stevensacks]

I'm hoping I have the correct version.

{
  "babel-plugin-styled-components": "^1.10.1-0",
}

It doesn't work, though.

@satya164 here's how you can test it yourself in a simple way. The below code throws the error.

import React from 'react';

const UI = {
  View: ({className, children}) => (
    <div className={className}>{children}</div>
  ),
};

const App = () => {
  const {View} = UI;
  return (
    <View css={viewStyle}>
      <p>Testing 1 2 3</p>
    </View>
  );
}

// From create-react-app's default css
const viewStyle = `
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
`;

Let me know how that works!

[stevensacks]

@satya164 any luck?

[satya164]

@stevemao sorry, I didn't have much time to investigate. will try this weekend.

[stevensacks]

@satya164 Anything I can do to make working on this easier?