Stylighter

This extension allows you to highlight styled-components such as <S.Component /> in your code.

NOTICE:

We have two variations of this extension:

Stylighter for JavaScript files (current one)

Stylighter for TypeScript files

You can install only one of them, or both in case if you want styled-components highlighted in both JavaScript and TypeScript files.

Preview

As you can see on the preview below, this extension only changes the styles of styled-components tags, and your theme colors wont be touched, you can set any color or others types of styles for styled-components tags, see Settings section below (initially there are no color at all, so you have to set it manually).

Requirements

1) For this extension to work, you will need to import your styled-components using naming conventions: *you don't have to import your styled-components exactly this way, but in the end you should use them in JSX as object values, for example <Styled.Title />

learn more about advantages of such naming convention here, here and here

2) Set highlight styles of your choice (see next section).

Settings

To set styles for your styled-components tags, navigate to settings.json.

You can:

 1) Set styles separately for all prefixes: S, SS, Styled, SharedStyled.

 2) Set styles globally and/or specifically for theme.

Examples below are self-explanatory

Global settings Theme-specific settings learn more about token customizations.