Plugin does not desugar array syntax

[ryardley]

It appears this plugin breaks when styled components is used in array mode:

const Comp = styled.div`${func1}${func2}`; // This gets desugared

const funcs = [func1, func2]
const Comp = styled.div([], ...funcs); // This does not get de-sugared

This means that some libs break as they have to provide dynamic decorator functions to sc.

Can this be fixed or can you suggest a work around that libs such as https://github.com/jxnblk/styled-system/tree/master/system-components can do to fix this?

[wmertens]

const Comp = styled.div([...funcs.map(_ => ""), ""], funcs)

On Tue, Mar 20, 2018, 3:23 AM Rudi Yardley, notifications@github.com wrote:

It appears this plugin breaks when styled components is used exploded to provide dynamic styles decorators to a component:

const Comp = styled.div${func1}${func2}; // This gets desugared (but cannot be dynamic)

const funcs = [func1, func2]const Comp = styled.div([], ...funcs); // This does not get de-sugared

This means that libs like system-components within styled-system break as they have to provide dynamic decorator functions to sc.

Can this be fixed or can you suggest a work around that libs such as https://github.com/jxnblk/styled-system/tree/master/system-components can do to fix this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/styled-components/babel-plugin-styled-components/issues/133, or mute the thread https://github.com/notifications/unsubscribe-auth/AADWlhVePlVlJWh8cNGyO7EBEfM6YsCuks5tgGgagaJpZM4SxMfc .

[kitten]

@ryardley I'm not sure where you're going with this as this seems to be a problem with your transpilation setup possibly?

We do have some basic transpilation of our tagged template literals, but if you're seeing the above, you might not have the plugin perform its tasks before your other babel presets / plugins https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/visitors/templateLiterals/transpile.js

[ryardley]

@wmertens tried that and it isn’t picked up. The issue is that all calls to styled.div should be transpiled to include the configuration but they are not:

const Comp = styled.div.withConfig({
  displayName: 'error__Comp',
  componentId: 's11omq17-0'
})(['','',''], func1, func2);

[ryardley]

@kitten have a look at this repository i used to post the same bug to styled-system. They may be able to work out a way to mitigate it by providing the configuration themselves however the real problem is with this plugin: https://github.com/ryardley/isomorphic-bug-in-system-components this causes the error https://github.com/ryardley/isomorphic-bug-in-system-components/blob/master/pages/error.js and this is the fix: https://github.com/ryardley/isomorphic-bug-in-system-components/blob/master/pages/error_with_config.js

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [["babel-plugin-styled-components", {
    "ssr": true
  }]]
}