styled-components with stylelint & babel-proposal-optional-chaining

[chrishelgert]

I am trying to use styled-components with stylelint and babel-proposal-optional-chaining.
As soon as a styled-components uses optional-chaining, stylelint will skip the whole file.

// package.json
"stylelint": "9.1.3",
"stylelint-config-standard": "^18.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.3.1"

// .stylelintrc
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components"
  ],
  "processors": ["stylelint-processor-styled-components"],
  "syntax": "scss"
}

Will not be linted:

const button = styled.button`
  background-color: ${backgroundColor};
  border-color: ${props => props.theme.button?.borderColor || 'transparent'};
  border-style: solid;
  border-width: ${props => props.theme.button?.borderWidth || '1px'};
  border-radius: ${props => props.theme.button?.borderRadius || '0.25rem'};
  color: ${props => props.theme.button?.color || '#fff'};
  cursor: pointer;
  font-family: ${props => props.theme.fonts.primary};
  font-size: ${props => props.theme.button?.fontSize || '1rem'};
  line-height: ${props => props.theme.button?.lineHeight || '1.5'};
  padding: ${props => props.theme.button?.padding || '0.375rem 0.75rem'};
  width: ${props => props.theme.button?.width || '100%'};
  &:hover {
    background-color: ${backgroundColorHover};
  }
  ${props => props.theme.button?.custom}
`

Will be linted:

const Container = styled.div`
  display: flex;
  margin-bottom: 30px;
`

Demo Test:

// fixture
import styled from 'styled-components'

export default styled.button`
  background-color: ${backgroundColor};
  border-color: ${props => props.theme.button?.borderColor || 'transparent'};
  border-style: solid // there is the error
  border-width: ${props => props.theme.button?.borderWidth || '1px'};
  border-radius: ${props => props.theme.button?.borderRadius || '0.25rem'};
  color: ${props => props.theme.button?.color || '#fff'};
  cursor: pointer;
  font-family: ${props => props.theme.fonts.primary};
  font-size: ${props => props.theme.button?.fontSize || '1rem'};
  line-height: ${props => props.theme.button?.lineHeight || '1.5'};
  padding: ${props => props.theme.button?.padding || '0.375rem 0.75rem'};
  width: ${props => props.theme.button?.width || '100%'};
  &:hover {
    background-color: ${backgroundColorHover};
  }
  ${props => props.theme.button?.custom}
`

// test
describe('lints with optional chainging', () => {
  it('should not have errored', () => {
    expect(data.errored).toEqual(true)
  })
})

see also: https://spectrum.chat/?t=ff611509-9b98-4601-bfae-bc210675a069

[chinesedfan]

@chrishelgert According to src/parsers/babylon-parser.js, I think optionalChaining is not enabled by our processor.

@emilgoldsmith If it doesn't introduce too much extra burden, we can simply add optionalChaining to the list. Or we need consider to provide a way for users to config the babylon parser.

[chrishelgert]

I think it would be great it the users could extend the configuration for the parser 👍
I am pretty sure there will come another plugins/proposals that will change the JS syntax.

[emilgoldsmith]

@chinesedfan both sound good to me. The first one is of course a quicker fix, but if @chrishelgert or someone else wants to expose a config option for additional parser options that would be awesome. optionalChaining is a beautiful feature as are many other experimental babel transforms, so I definitely see the point of it

[chrishelgert]

@emilgoldsmith it would be great if all plugins from an .babelrc or babel in package.json would be considered or what do you think?

maybe i could try to implement that