Problems with syntax highlight when using `css`
present-g opened this issue · comments
present-g commented
When using css
, the syntax highlighting breaks.
Example code:
const StylesWithCss = css`
margin: 0;
background: red;
& > * {
/* valid highlight */
margin: 10px;
}
`;
const StylesWithTopLevel = styled.div<{ $margin?: string; $isActive: boolean | undefined }>(
({ $margin, $isActive }) => css`
display: flex;
flex-direction: column;
margin: ${$margin};
width: 100%;
overflow: hidden;
position: relative;
${$isActive
? css`
margin: 0;
background: red;
`
: ''}
`
);
const StylesWithCondition = styled.div<{ $isActive: boolean | undefined }>`
/* valid highlight */
overflow-x: auto;
scroll-snap-type: x mandatory;
${({ $isActive }) =>
$isActive
? css`
overflow-x: unset;
scroll-snap-type: unset;
`
: ''}
`;
Screenshot from VSCode: