Missed semicolon CssSyntaxError in shadow-offset property

[carloslibardo]

What minimal example or steps are needed to reproduce the bug?

my component in styles.ts:

export const ButtonContainer = styled.View.attrs({ elevation: 15 })`
  background-color: ${({ theme: { COLORS } }) => COLORS.BACKGROUND};
  padding-horizontal: 24px;
  padding-vertical: 30px;
  shadow-offset: {width: 0, height: 2};
  shadow-opacity: 0.3;
  shadow-radius: 2px;
  shadow-color: #0000004D;
`;

The problem is at shadow-offset: {width: 0, height: 2};

What minimal configuration is needed to reproduce the bug?

my .stylelintrc:

{
    "processors": ["stylelint-processor-styled-components"],
    "extends": ["stylelint-config-react-native-styled-components"],
    "plugins": ["stylelint-react-native"],
    "customSyntax": "postcss-styled-syntax"
}

How did you run Stylelint?

stylelint './src/**/*.ts

Which Stylelint-related dependencies are you using?

    "stylelint": "^16.2.1",
    "stylelint-config-react-native-styled-components": "^0.7.0",
    "stylelint-processor-styled-components": "^1.10.0",
    "stylelint-react-native": "^2.7.0",
    "postcss-styled-syntax": "^0.6.4",

What did you expect to happen?

stylelint works without error.

What actually happened?

I'm getting this error: Missed semicolon CssSyntaxError

[hudochenkov]

It's a tough one, as it's React Native specific. This parser targets standard CSS syntax with some Styled Components features. {width: 0, height: 2} does not fall in any of these categories.

I will see what I can do, but I'm not optimistic.

For time being one workaround I could came up with is wrap this object syntax in interpolation:

export const ButtonContainer = styled.View`
  shadow-offset: ${`{width: 0, height: 2}`};
`;

[carloslibardo]

It's a tough one, as it's React Native specific. This parser targets standard CSS syntax with some Styled Components features. {width: 0, height: 2} does not fall in any of these categories.

I will see what I can do, but I'm not optimistic.

For time being one workaround I could came up with is wrap this object syntax in interpolation:

export const ButtonContainer = styled.View`
  shadow-offset: ${`{width: 0, height: 2}`};
`;

This workaround solve my problem.