Not working with "BEM" styled-components

[ntltd]

Hello, I recently had an issue with a new project I'm working on because we write our components as following:

// Component
import React from 'react'

import Styled from './MyComponent.styled'

const MyComponent = ({ className }) => {
  return (
    <Styled className={className}>
      <Styled.inner />
    </Styled>
  )
}

export default MyComponent

// Styles
import styled from 'styled-components'

const Styled = styled.main`...`
Styled.inner = styled.div`...`

export default Styled

This syntax/structure isn't supported yet by the plugin. Would it be easily added?

Thanks for your work and this amazing plugin!

[brendanmorrell]

Interesting. This is not a pattern I'm familiar with. So the issue is that you are adding on a property to the initial component and setting the value of that property to a separate component to be used later? I think it could be done. Level of effort is probably not too bad, although having to key off of both the main object/component and the nested one may add a little complexity. I will try to take a look in the next few weeks, but I will be honest that I am pretty swamped with work (and I'm getting married in a little over a month), so my time is limited, and I may not get around to actually spending a decent chunk of time on it for a while. I will try though. If you'd like to take a look, the main thing you'd be doing is basically adding more logic to the existing dictionary where I take all of the variable names which contain styled components ('Styled' in your example), and keep track of the tags they represent/any attributes added to them. To get this working, you'd need to keep track of the 'Styled' tag, and then also add onto that with a nested object ('inner' in this case), and then get the tag/attribute data for that and check against both the top level and the nested level when the component is actually used.

[ntltd]

Thanks for your answer and your time! I've tried to do something, but it wasn't conclusive... I will retry with your explanations. Congrats for your wedding! 😄

[brendanmorrell]

Thanks, Nicolas!