@@ -147,6 +147,9 @@ It allows to optionally pass options that allow to tweak transformer's behavior.
147147``` ts
148148interface Options {
149149 getDisplayName(filename : string , bindingName : string | undefined ): string | undefined ;
150+ identifiers: CustomStyledIdentifiers ;
151+ ssr: boolean ;
152+ displayName: boolean ;
150153}
151154```
152155
@@ -167,6 +170,53 @@ function getStyledComponentDisplay(filename, bindingName) {
167170}
168171```
169172
173+ ### ` ssr `
174+
175+ By adding a unique identifier to every styled component, this plugin avoids checksum mismatches
176+ due to different class generation on the client and on the server.
177+
178+ This option allows to disable component id generation by setting it to ` false ` .
179+
180+ Default value is ` true ` which means that component id is being injected.
181+
182+ ### ` displayName `
183+
184+ This option enhances the attached CSS class name on each component with richer output
185+ to help identify your components in the DOM without React DevTools.
186+
187+ It also adds allows you to see the component's ` displayName ` in React DevTools.
188+
189+ To disable ` displayName ` generation set this option to ` false `
190+
191+ Default value is ` true ` which means that display name is being injected.
192+
193+ ### ` identifiers `
194+
195+ This option allows to customize identifiers used by ` styled-components ` API functions.
196+
197+ > ** Warning** . By providing custom identifiers, predefined ones are not added automatically.
198+ > Make sure you add standard APIs in case you meant to use them.
199+
200+ ``` ts
201+ interface CustomStyledIdentifiers {
202+ styled: string [];
203+ attrs: string [];
204+ }
205+ ```
206+
207+ - ` styled ` - list of identifiers of ` styled ` API (default `[ 'styled'] )
208+ - ` attrs ` - list of identifiers of ` attrs ` API (default `[ 'attrs'] )
209+
210+ Example
211+
212+ ``` ts
213+ const styledComponentsTransformer = createStyledComponentsTransformer ({
214+ identifiers: {
215+ styled: [' styled' , ' typedStyled' ] // typedStyled is an additional identifier of styled API
216+ }
217+ });
218+ ```
219+
170220# Notes
171221
172222Technically, ` typescript-plugin-styled-components ` is not a TypeScript plugin, since it is only exposed as a TypeScript transformer.
0 commit comments