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!

[eddie0329]

Hello @brendanmorrell :) thanks for wonderful package!

Do you mind If i take a look on this issue?

[brendanmorrell]

Absolutely. I had completely forgotten about this, so that would be very much appreciated

On Thu, Apr 25, 2024 at 3:35 AM Eddie @.***> wrote:

Hello @brendanmorrell https://github.com/brendanmorrell :) thanks for wonderful package!

Do you mind If i take a look on this issue?

— Reply to this email directly, view it on GitHub https://github.com/brendanmorrell/eslint-plugin-styled-components-a11y/issues/26#issuecomment-2076770395, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADRNADPT7EAPPJB7THRXW7TY7DE63AVCNFSM4725GVFKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBXGY3TOMBTHE2Q . You are receiving this because you were mentioned.Message ID: <brendanmorrell/eslint-plugin-styled-components-a11y/issues/26/2076770395@ github.com>