;
21 |
22 | function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): () => string {
23 | let value: string | undefined;
24 | return () => value || (value = keyframesOriginal(strings, ...interpolations));
25 | }
26 |
27 | export type StyledProps = ThemedStyledProps;
28 | export default styled;
29 | export { css, injectGlobal, keyframes, withTheme, ThemeProvider };
30 |
--------------------------------------------------------------------------------
/src/createTransformer.ts:
--------------------------------------------------------------------------------
1 | import * as path from 'path';
2 | import * as ts from 'typescript';
3 | import {
4 | isPropertyAccessExpression,
5 | isCallExpression,
6 | isIdentifier,
7 | isVariableDeclaration,
8 | isExportAssignment,
9 | isTaggedTemplateExpression,
10 | } from './ts-is-kind';
11 |
12 | import { Options, CustomStyledIdentifiers } from './models/Options';
13 | import { hash } from './hash';
14 | import { minifyTemplate } from './minify';
15 |
16 | /** Detects that a node represents a styled function
17 | * Recognizes the following patterns:
18 | *
19 | * styled.tag
20 | * Component.extend
21 | * styled(Component)
22 | * styled('tag')
23 | * styledFunction.attrs(attributes)
24 | */
25 | function isStyledFunction(
26 | node: ts.Node,
27 | identifiers: CustomStyledIdentifiers
28 | ): node is ts.PropertyAccessExpression | ts.CallExpression {
29 | if (isPropertyAccessExpression(node)) {
30 | if (isStyledObject(node.expression, identifiers)) {
31 | return true;
32 | }
33 |
34 | if (isStyledExtendIdentifier(node.name.text, identifiers) && isValidComponent(node.expression)) {
35 | return true;
36 | }
37 |
38 | return false;
39 | }
40 |
41 | if (isCallExpression(node) && node.arguments.length === 1) {
42 | if (isStyledObject(node.expression, identifiers)) {
43 | return true;
44 | }
45 |
46 | if (isStyledAttrs(node.expression, identifiers)) {
47 | return true;
48 | }
49 | }
50 |
51 | return false;
52 | }
53 |
54 | function isStyledObjectIdentifier(name: string, { styled: styledIdentifiers = ['styled'] }: CustomStyledIdentifiers) {
55 | return styledIdentifiers.indexOf(name) >= 0;
56 | }
57 |
58 | function isStyledObject(node: ts.Node, identifiers: CustomStyledIdentifiers) {
59 | return node && isIdentifier(node) && isStyledObjectIdentifier(node.text, identifiers);
60 | }
61 |
62 | function isValidComponent(node: ts.Node) {
63 | return node && isIdentifier(node) && isValidComponentName(node.text);
64 | }
65 |
66 | function isLetter(ch: string) {
67 | return ch.toLowerCase() !== ch.toUpperCase();
68 | }
69 |
70 | function isValidTagName(name: string) {
71 | return isLetter(name[0]) && name[0] === name[0].toLowerCase();
72 | }
73 |
74 | function isValidComponentName(name: string) {
75 | return isLetter(name[0]) && name[0] === name[0].toUpperCase();
76 | }
77 |
78 | function isStyledAttrsIdentifier(name: string, { attrs: attrsIdentifiers = ['attrs'] }: CustomStyledIdentifiers) {
79 | return attrsIdentifiers.indexOf(name) >= 0;
80 | }
81 |
82 | function isStyledAttrs(node: ts.Node, identifiers: CustomStyledIdentifiers) {
83 | return (
84 | node &&
85 | isPropertyAccessExpression(node) &&
86 | isStyledAttrsIdentifier(node.name.text, identifiers) &&
87 | isStyledFunction((node as ts.PropertyAccessExpression).expression, identifiers)
88 | );
89 | }
90 |
91 | function isStyledKeyframesIdentifier(name: string, { keyframes = ['keyframes'] }: CustomStyledIdentifiers) {
92 | return keyframes.indexOf(name) >= 0;
93 | }
94 |
95 | function isStyledCssIdentifier(name: string, { css = ['css'] }: CustomStyledIdentifiers) {
96 | return css.indexOf(name) >= 0;
97 | }
98 |
99 | function isStyledCreateGlobalStyleIdentifier(
100 | name: string,
101 | { createGlobalStyle = ['createGlobalStyle'] }: CustomStyledIdentifiers
102 | ) {
103 | return createGlobalStyle.indexOf(name) >= 0;
104 | }
105 |
106 | function isStyledExtendIdentifier(name: string, { extend = [] }: CustomStyledIdentifiers) {
107 | return extend.indexOf(name) >= 0;
108 | }
109 |
110 | function isMinifyableStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers) {
111 | return (
112 | isStyledFunction(node, identifiers) ||
113 | (isIdentifier(node) &&
114 | (isStyledKeyframesIdentifier(node.text, identifiers) ||
115 | isStyledCssIdentifier(node.text, identifiers) ||
116 | isStyledCreateGlobalStyleIdentifier(node.text, identifiers)))
117 | );
118 | }
119 |
120 | function defaultGetDisplayName(filename: string, bindingName: string | undefined): string | undefined {
121 | return bindingName;
122 | }
123 |
124 | export function createTransformer(options?: Partial): ts.TransformerFactory;
125 | export function createTransformer({
126 | getDisplayName = defaultGetDisplayName,
127 | identifiers = {},
128 | ssr = true,
129 | displayName = true,
130 | minify = false,
131 | componentIdPrefix = ''
132 | }: Partial = {}) {
133 | /**
134 | * Infers display name of a styled component.
135 | * Recognizes the following patterns:
136 | *
137 | * (const|var|let) ComponentName = styled...
138 | * export default styled...
139 | */
140 | function getDisplayNameFromNode(node: ts.Node, sourceFile: ts.SourceFile): string | undefined {
141 | if (isVariableDeclaration(node) && isIdentifier(node.name)) {
142 | return (componentIdPrefix ? componentIdPrefix + '-' : '') + getDisplayName(sourceFile.fileName, node.name.text);
143 | }
144 |
145 | if (isExportAssignment(node)) {
146 | return getDisplayName(sourceFile.fileName, undefined);
147 | }
148 |
149 | return undefined;
150 | }
151 |
152 | function getIdFromNode(
153 | node: ts.Node,
154 | sourceRoot: string | undefined,
155 | position: number,
156 | sourceFile: ts.SourceFile
157 | ): string | undefined {
158 | if ((isVariableDeclaration(node) && isIdentifier(node.name)) || isExportAssignment(node)) {
159 | const fileName = sourceFile.fileName;
160 | const filePath = sourceRoot
161 | ? path.relative(sourceRoot, fileName).replace(path.sep, path.posix.sep)
162 | : fileName;
163 | return (componentIdPrefix || 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
164 | }
165 | return undefined;
166 | }
167 |
168 | const transformer: ts.TransformerFactory = (context) => {
169 | const { sourceRoot } = context.getCompilerOptions();
170 |
171 | return (sourceFile) => {
172 | let lastComponentPosition = 0;
173 |
174 | const withConfig = (node: ts.Expression, properties: ts.PropertyAssignment[]) =>
175 | properties.length > 0
176 | ? context.factory.createCallExpression(
177 | context.factory.createPropertyAccessExpression(node, 'withConfig'),
178 | undefined,
179 | [context.factory.createObjectLiteralExpression(properties)]
180 | )
181 | : node;
182 |
183 | const createDisplayNameConfig = (displayNameValue: string | undefined) =>
184 | displayNameValue
185 | ? [
186 | context.factory.createPropertyAssignment(
187 | 'displayName',
188 | context.factory.createStringLiteral(displayNameValue)
189 | ),
190 | ]
191 | : [];
192 | const createIdConfig = (componentId: string | undefined) =>
193 | componentId
194 | ? [
195 | context.factory.createPropertyAssignment(
196 | 'componentId',
197 | context.factory.createStringLiteral(componentId)
198 | ),
199 | ]
200 | : [];
201 |
202 | const transformStyledFunction = (
203 | binding: ts.VariableDeclaration | ts.ExportAssignment,
204 | node: ts.Expression
205 | ) =>
206 | withConfig(node, [
207 | ...(displayName ? createDisplayNameConfig(getDisplayNameFromNode(binding, sourceFile)) : []),
208 | ...(ssr
209 | ? createIdConfig(getIdFromNode(binding, sourceRoot, ++lastComponentPosition, sourceFile))
210 | : []),
211 | ]);
212 |
213 | const transformTemplateLiteral = (templateLiteral: ts.TemplateLiteral) =>
214 | minify ? minifyTemplate(templateLiteral, context.factory) : templateLiteral;
215 |
216 | const transformTaggedTemplateExpression = (node: ts.TaggedTemplateExpression) =>
217 | isMinifyableStyledFunction(node.tag, identifiers)
218 | ? context.factory.updateTaggedTemplateExpression(
219 | node,
220 | node.tag,
221 | node.typeArguments,
222 | transformTemplateLiteral(node.template)
223 | )
224 | : node;
225 |
226 | const transformBindingExpression = (
227 | binding: ts.VariableDeclaration | ts.ExportAssignment,
228 | node: ts.Expression
229 | ) => {
230 | if (isTaggedTemplateExpression(node) && isStyledFunction(node.tag, identifiers)) {
231 | return context.factory.updateTaggedTemplateExpression(
232 | node,
233 | transformStyledFunction(binding, node.tag),
234 | node.typeArguments,
235 | transformTemplateLiteral(node.template)
236 | );
237 | }
238 | if (isCallExpression(node) && isStyledFunction(node.expression, identifiers)) {
239 | return context.factory.updateCallExpression(
240 | node,
241 | transformStyledFunction(binding, node.expression),
242 | node.typeArguments,
243 | node.arguments
244 | );
245 | }
246 | };
247 |
248 | const updateNode = (
249 | node: T,
250 | data: D | undefined,
251 | updateFn: (node: T, data: D) => T
252 | ) => (data ? updateFn(node, data) : undefined);
253 |
254 | const updateVariableDeclarationInitializer = (node: ts.VariableDeclaration, initializer: ts.Expression) =>
255 | context.factory.updateVariableDeclaration(
256 | node,
257 | node.name,
258 | node.exclamationToken,
259 | node.type,
260 | initializer
261 | );
262 |
263 | const updateExportAssignmentExpression = (node: ts.ExportAssignment, expression: ts.Expression) =>
264 | context.factory.updateExportAssignment(node, node.modifiers, expression);
265 |
266 | const transformNode = (node: ts.Node) =>
267 | isVariableDeclaration(node) && node.initializer
268 | ? updateNode(
269 | node,
270 | transformBindingExpression(node, node.initializer),
271 | updateVariableDeclarationInitializer
272 | )
273 | : isExportAssignment(node)
274 | ? updateNode(
275 | node,
276 | transformBindingExpression(node, node.expression),
277 | updateExportAssignmentExpression
278 | )
279 | : minify && isTaggedTemplateExpression(node)
280 | ? transformTaggedTemplateExpression(node)
281 | : undefined;
282 |
283 | const visitNode: ts.Visitor = (node) => transformNode(node) || ts.visitEachChild(node, visitNode, context);
284 |
285 | return ts.visitNode(sourceFile, visitNode) as ts.SourceFile;
286 | };
287 | };
288 |
289 | return transformer;
290 | }
291 |
292 | export default createTransformer;
293 |
--------------------------------------------------------------------------------
/src/hash.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * JS Implementation of MurmurHash2
3 | *
4 | * @author Gary Court
5 | * @see http://github.com/garycourt/murmurhash-js
6 | * @author Austin Appleby
7 | * @see http://sites.google.com/site/murmurhash/
8 | *
9 | * @param str ASCII only
10 | * @param seed Positive integer only
11 | * @return 32-bit positive integer hash
12 | */
13 | function murmurhash2_32_gc(str: string, seed: number = 0) {
14 | var l = str.length,
15 | h = seed ^ l,
16 | i = 0,
17 | k;
18 |
19 | while (l >= 4) {
20 | k =
21 | (str.charCodeAt(i) & 0xff) |
22 | ((str.charCodeAt(++i) & 0xff) << 8) |
23 | ((str.charCodeAt(++i) & 0xff) << 16) |
24 | ((str.charCodeAt(++i) & 0xff) << 24);
25 |
26 | k =
27 | (k & 0xffff) * 0x5bd1e995 +
28 | ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
29 | k ^= k >>> 24;
30 | k =
31 | (k & 0xffff) * 0x5bd1e995 +
32 | ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16);
33 |
34 | h =
35 | ((h & 0xffff) * 0x5bd1e995 +
36 | ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^
37 | k;
38 |
39 | l -= 4;
40 | ++i;
41 | }
42 |
43 | switch (l) {
44 | case 3:
45 | h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
46 | case 2:
47 | h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
48 | case 1:
49 | h ^= str.charCodeAt(i) & 0xff;
50 | h =
51 | (h & 0xffff) * 0x5bd1e995 +
52 | ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
53 | }
54 |
55 | h ^= h >>> 13;
56 | h =
57 | (h & 0xffff) * 0x5bd1e995 +
58 | ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16);
59 | h ^= h >>> 15;
60 |
61 | return h >>> 0;
62 | }
63 |
64 | export function hash(str: string) {
65 | return murmurhash2_32_gc(str).toString(36);
66 | }
67 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import createTransformer from './createTransformer';
2 |
3 | export { createTransformer };
4 | export default createTransformer;
5 |
--------------------------------------------------------------------------------
/src/minify.ts:
--------------------------------------------------------------------------------
1 | import * as ts from 'typescript';
2 | import { isNoSubstitutionTemplateLiteral, isTemplateExpression } from './ts-is-kind';
3 |
4 | type State = ';' | ';$' | 'x' | ' ' | '\n' | '"' | '(' | '\'' | '/' | '//' | ';/' | ';//' | '/$' | '//$' | '/*' | '/**' | ';/*' | ';/**' | '/*$' | '/*$*';
5 | type StateDataDef = {
6 | ['(']: { count: number }
7 | }
8 | type StateData = K extends keyof StateDataDef ? StateDataDef[K] : void
9 | type StateResult = { [K in State]: K extends keyof StateDataDef ? [K, StateDataDef[K]] : K }[State]
10 | type ReducerResult = { emit?: string; skipEmit?: boolean; state?: StateResult; } | void;
11 | type StateMachine = {
12 | [K in State]: {
13 | next?(ch: string, data: StateData): ReducerResult;
14 | flush?(last: boolean): ReducerResult;
15 | }
16 | };
17 |
18 | function isSymbol(ch: string) {
19 | return ch == ';' || ch == ':' || ch == '{' || ch == '}' || ch == ',';
20 | }
21 |
22 | function isSpace(ch: string) {
23 | return ch == ' ' || ch == '\n' || ch == '\r' || ch == '\t';
24 | }
25 |
26 | const stateMachine: StateMachine = {
27 | ';': {
28 | next(ch) {
29 | if (ch == '(') return { state: ['(', {count: 1}]}
30 | if (ch == '\'' || ch == '"') return { state: ch }
31 | if (isSpace(ch)) return { skipEmit: true }
32 | if (ch == '/') return { state: ';/', skipEmit: true }
33 | if (isSymbol(ch)) return;
34 | return { state: 'x' }
35 | },
36 | flush() {
37 | return { state: ';$' }
38 | }
39 | },
40 | ';$': { // after placeholder
41 | next(ch) {
42 | if (ch == '(') return { state: ['(', {count: 1}]}
43 | if (ch == '\'' || ch == '"') return { state: ch }
44 | if (isSpace(ch)) return { skipEmit: true, state: ' ' } // we may need a space
45 | if (ch == '/') return { state: '/', skipEmit: true }
46 | if (isSymbol(ch)) return { state: ';' };
47 | return { state: 'x' }
48 | }
49 | },
50 | 'x': {
51 | next(ch) {
52 | if (ch == '(') return { state: ['(', {count: 1}]}
53 | if (ch == '\'' || ch == '"') return { state: ch }
54 | if (isSpace(ch)) return { state: ' ', skipEmit: true }
55 | if (ch == '/') return { state: '/', skipEmit: true }
56 | if (isSymbol(ch)) return { state: ';' };
57 | }
58 | },
59 | ' ': { // may need space
60 | next(ch) {
61 | if (ch == '(') return { state: ['(', {count: 1}], emit: ' ' + ch}
62 | if (ch == '\'' || ch == '"') return { state: ch, emit: ' ' + ch }
63 | if (isSpace(ch)) return { state: ' ', skipEmit: true }
64 | if (ch == '/') return { state: '/', skipEmit: true }
65 | if (isSymbol(ch)) return { state: ';' };
66 | return { state: 'x', emit: ' ' + ch };
67 | },
68 | flush(last) {
69 | if (!last) return { emit: ' ', state: ';$' };
70 | }
71 | },
72 | '\n': { // may need new line
73 | next(ch) {
74 | if (ch == '(') return { state: ['(', {count: 1}], emit: '\n' + ch}
75 | if (ch == '\'' || ch == '"') return { state: ch, emit: '\n' + ch }
76 | if (isSpace(ch)) return { state: '\n', skipEmit: true }
77 | if (ch == '/') return { state: '/', emit: '\n' }
78 | if (isSymbol(ch)) return { state: ';', emit: '\n' + ch };
79 | return { state: 'x', emit: '\n' + ch };
80 | }
81 | },
82 | "'": {
83 | next(ch) {
84 | if (ch == '\'') return { state: ';' };
85 | }
86 | },
87 | '"': {
88 | next(ch) {
89 | if (ch == '"') return { state: ';' };
90 | }
91 | },
92 | '(': {
93 | next(ch, { count }) {
94 | if (ch == '(') return { state: ['(', { count: count+1 }] }
95 | if (ch == ')')
96 | if (count > 1)
97 | return { state: ['(', { count: count-1 }] }
98 | else
99 | return { state: ';' }; // maybe return ' '? then it'd always add space after
100 | }
101 | },
102 | '/': {
103 | next(ch) {
104 | if (ch == '/') return { state: '//', skipEmit: true }
105 | if (ch == '*') return { state: '/*', skipEmit: true }
106 | return { state: ';', emit: '/' + ch }
107 | },
108 | flush() {
109 | return { state: '/$', emit: '/' }
110 | }
111 | },
112 | '//': {
113 | next(ch) {
114 | if (ch == '\n') return { state: ' ', skipEmit: true }
115 | return { skipEmit: true };
116 | },
117 | flush(last) {
118 | if (last) return { skipEmit: true }
119 | return { state: '//$', emit: '//' }
120 | }
121 | },
122 | ';/': {
123 | next(ch) {
124 | if (ch == '/') return { state: ';//', skipEmit: true }
125 | if (ch == '*') return { state: ';/*', skipEmit: true }
126 | return { state: ';', emit: '/' + ch }
127 | },
128 | flush() {
129 | return { state: '/$', emit: '/' }
130 | }
131 | },
132 | ';//': {
133 | next(ch) {
134 | if (ch == '\n') return { state: ';', skipEmit: true }
135 | return { skipEmit: true };
136 | },
137 | flush(last) {
138 | if (last) return { skipEmit: true }
139 | return { state: '//$', emit: '//' }
140 | }
141 | },
142 | '/$': { },
143 | '//$': {
144 | next(ch) {
145 | if (ch == '\n') return { state: '\n', skipEmit: true }
146 | return { skipEmit: true };
147 | }
148 | },
149 | '/*': {
150 | next(ch) {
151 | if (ch == '*') return { state: '/**', skipEmit: true }
152 | return { skipEmit: true };
153 | },
154 | flush(last) {
155 | if (last) return { skipEmit: true }
156 | return { state: '/*$', emit: '/*' }
157 | }
158 | },
159 | '/**': {
160 | next(ch) {
161 | if (ch == '/') return { state: ' ', skipEmit: true }
162 | return { state: '/*', skipEmit: true }
163 | }
164 | },
165 | ';/*': {
166 | next(ch) {
167 | if (ch == '*') return { state: ';/**', skipEmit: true }
168 | return { skipEmit: true };
169 | },
170 | flush(last) {
171 | if (last) return { skipEmit: true }
172 | return { state: '/*$', emit: '/*' }
173 | }
174 | },
175 | ';/**': {
176 | next(ch) {
177 | if (ch == '/') return { state: ';', skipEmit: true }
178 | return { state: ';/*', skipEmit: true }
179 | }
180 | },
181 | '/*$': {
182 | next(ch) {
183 | if (ch == '*') return { state: '/*$*', skipEmit: true };
184 | return { skipEmit: true };
185 | }
186 | },
187 | '/*$*': {
188 | next(ch) {
189 | if (ch == '/') return { state: ';', emit: '*/' };
190 | return { state: '/*$', skipEmit: true }
191 | }
192 | }
193 | };
194 |
195 | export function createMinifier(): (next: string, last?: boolean) => string {
196 | let state: State = ';';
197 | let stateData: StateData = undefined as StateData<';'>
198 |
199 | return (next, last = false) => {
200 | let minified = '';
201 |
202 | function apply(result: ReducerResult, ch?: string) {
203 | if (!result) {
204 | if (ch !== undefined)
205 | minified += ch;
206 | } else {
207 | if (result.state !== undefined)
208 | {
209 | if (typeof result.state === 'string')
210 | state = result.state;
211 | else {
212 | state = result.state[0]
213 | stateData = result.state[1]
214 | }
215 | }
216 | if (result.emit !== undefined)
217 | minified += result.emit;
218 | else if (result.skipEmit !== true && ch !== undefined)
219 | minified += ch;
220 | }
221 | }
222 |
223 | let pos = 0;
224 | let len = next.length;
225 | while (pos < len) {
226 | const ch = next[pos++];
227 | const reducer = stateMachine[state];
228 | const prevState = state;
229 | const reducerResult = reducer.next && reducer.next(ch, stateData as any);
230 | apply(reducerResult, ch)
231 | // console.log('next(', { ch, state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
232 | }
233 |
234 | const reducer = stateMachine[state];
235 | const prevState = state;
236 | const reducerResult = reducer.flush && reducer.flush(last);
237 | apply(reducerResult);
238 | // console.log('flush', { state: prevState }, '): ', reducerResult, ' -> ', { state, minified });
239 |
240 | return minified;
241 | }
242 | }
243 |
244 | export function minifyTemplate(templateLiteral: ts.TemplateLiteral, factory: ts.NodeFactory) {
245 | const minifier = createMinifier();
246 |
247 | if (isNoSubstitutionTemplateLiteral(templateLiteral)) {
248 | const node = factory.createNoSubstitutionTemplateLiteral(minifier(templateLiteral.text, true));
249 | return node;
250 | } else if (isTemplateExpression(templateLiteral)) {
251 | const head = factory.createTemplateHead(minifier(templateLiteral.head.text));
252 | const templateSpans = templateLiteral.templateSpans.map(span => factory.createTemplateSpan(span.expression,
253 | span.literal.kind === ts.SyntaxKind.TemplateMiddle
254 | ? factory.createTemplateMiddle(minifier(span.literal.text))
255 | : factory.createTemplateTail(minifier(span.literal.text, true))));
256 | const node = factory.createTemplateExpression(head, templateSpans);
257 | return node;
258 | }
259 |
260 | return templateLiteral;
261 | }
262 |
--------------------------------------------------------------------------------
/src/models/Options.ts:
--------------------------------------------------------------------------------
1 | export interface Options {
2 | /**
3 | * This method is used to determine component display name from filename and its binding name.
4 | *
5 | * Default strategy is to use `bindingName` if it's defined and use inference algorithm from `filename` otherwise.
6 | */
7 | getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
8 |
9 | /**
10 | * This option allows to customize identifiers used by `styled-components` API functions.
11 | */
12 | identifiers: CustomStyledIdentifiers;
13 |
14 | /**
15 | * By adding a unique identifier to every styled component, this plugin avoids checksum mismatches
16 | * due to different class generation on the client and on the server.
17 | * This option allows to disable component id generation by setting it to `false`
18 | *
19 | * @defaultValue `true`
20 | */
21 | ssr: boolean;
22 |
23 | /**
24 | * This option enhances the attached CSS class name on each component with richer output
25 | * to help identify your components in the DOM without React DevTools.
26 | * It also adds allows you to see the component's `displayName` in React DevTools.
27 | *
28 | * To disable `displayName` generation set this option to `false`
29 | *
30 | * @defaultValue `true`
31 | */
32 | displayName: boolean;
33 |
34 | /**
35 | * Allow minifying of inline styles in styled functions.
36 | * The minification is an experimental feature, please use with care.
37 | *
38 | * @defaultValue `false`
39 | * @experimental The minification feature is experimental.
40 | */
41 | minify: boolean;
42 |
43 | /**
44 | * By adding a componentIdPrefix, running multiple instances of typescript-plugin-styled-components
45 | * will not result in clashes caused by the class generation hash.
46 | *
47 | * @defaultValue `''`
48 | */
49 | componentIdPrefix: string;
50 | }
51 |
52 | export interface CustomStyledIdentifiers {
53 | /**
54 | * Identifiers of `styled` function.
55 | *
56 | * @defaultValue `['styled']`
57 | */
58 | styled?: string[];
59 |
60 | /**
61 | * Identifiers of `attrs` function.
62 | *
63 | * @defaultValue `['attrs']`
64 | */
65 | attrs?: string[];
66 |
67 | /**
68 | * Identifiers of `keyframes` function.
69 | *
70 | * @defaultValue `['keyframes']`
71 | */
72 | keyframes?: string[];
73 |
74 | /**
75 | * Identifiers of `css` function.
76 | *
77 | * @defaultValue `['css']`
78 | */
79 | css?: string[];
80 |
81 | /**
82 | * Identifiers of `createGlobalStyle` function.
83 | *
84 | * @defaultValue `['createGlobalStyle']`
85 | */
86 | createGlobalStyle?: string[];
87 |
88 | /**
89 | * Identifiers of `extend` function.
90 | *
91 | * @defaultValue `[]`
92 | */
93 | extend?: string[];
94 | }
95 |
--------------------------------------------------------------------------------
/src/runner.ts:
--------------------------------------------------------------------------------
1 | import * as ts from 'typescript';
2 |
3 | import createTransformer from './';
4 |
5 | const sampleTransformer = createTransformer();
6 |
7 | function main(files: string[]) {
8 | // Normally these would be parsed from tsconfig.json
9 | const options: ts.CompilerOptions = {
10 | skipLibCheck: true,
11 | outDir: 'built',
12 | module: ts.ModuleKind.CommonJS,
13 | noEmitOnError: false,
14 | jsx: ts.JsxEmit.React
15 | };
16 |
17 | const beforeTransforms = [sampleTransformer];
18 | const afterTransforms: ts.TransformerFactory[] = [];
19 |
20 | // Do the normal compilation flow
21 | const compilerHost = ts.createCompilerHost(options);
22 | const program = ts.createProgram(files, options, compilerHost);
23 |
24 | const emitResult = program.emit(
25 | undefined, undefined, undefined, undefined,
26 | {before: beforeTransforms, after: afterTransforms});
27 | }
28 |
29 | const files = process.argv.slice(2);
30 | main(files);
31 |
--------------------------------------------------------------------------------
/src/ts-is-kind.ts:
--------------------------------------------------------------------------------
1 | // The source code is kindly borrowed from `ts-is-kind` npm module.
2 | // Original repo: https://github.com/mohsen1/ts-is-kind by @mohsen1
3 |
4 | import * as ts from 'typescript';
5 |
6 | /**
7 | * Return true if node is `PropertyAccessExpression`
8 | * @param node A TypeScript node
9 | */
10 | export function isPropertyAccessExpression(node: ts.Node): node is ts.PropertyAccessExpression {
11 | return node.kind === ts.SyntaxKind.PropertyAccessExpression;
12 | }
13 |
14 | /**
15 | * Return true if node is `CallExpression`
16 | * @param node A TypeScript node
17 | */
18 | export function isCallExpression(node: ts.Node): node is ts.CallExpression {
19 | return node.kind === ts.SyntaxKind.CallExpression;
20 | }
21 |
22 | /**
23 | * Return true if node is `Identifier`
24 | * @param node A TypeScript node
25 | */
26 | export function isIdentifier(node: ts.Node): node is ts.Identifier {
27 | return node.kind === ts.SyntaxKind.Identifier;
28 | }
29 |
30 | /**
31 | * Return true if node is `VariableDeclaration`
32 | * @param node A TypeScript node
33 | */
34 | export function isVariableDeclaration(node: ts.Node): node is ts.VariableDeclaration {
35 | return node.kind === ts.SyntaxKind.VariableDeclaration;
36 | }
37 |
38 | /**
39 | * Return true if node is `ExportAssignment`
40 | * @param node A TypeScript node
41 | */
42 | export function isExportAssignment(node: ts.Node): node is ts.ExportAssignment {
43 | return node.kind === ts.SyntaxKind.ExportAssignment;
44 | }
45 |
46 | /**
47 | * Return true if node is `TaggedTemplateExpression`
48 | * @param node A TypeScript node
49 | */
50 | export function isTaggedTemplateExpression(node: ts.Node): node is ts.TaggedTemplateExpression {
51 | return node.kind === ts.SyntaxKind.TaggedTemplateExpression;
52 | }
53 |
54 | /**
55 | * Return true if node is `TemplateExpression`
56 | * @param node A TypeScript node
57 | */
58 | export function isTemplateExpression(node: ts.Node): node is ts.TemplateExpression {
59 | return node.kind === ts.SyntaxKind.TemplateExpression;
60 | }
61 |
62 | /**
63 | * Return true if node is `NoSubstitutionTemplateLiteral`
64 | * @param node A TypeScript node
65 | */
66 | export function isNoSubstitutionTemplateLiteral(node: ts.Node): node is ts.NoSubstitutionTemplateLiteral {
67 | return node.kind === ts.SyntaxKind.NoSubstitutionTemplateLiteral;
68 | }
69 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Basic Options */
4 | "target": "es2015",
5 | /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
6 | "module": "commonjs",
7 | /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
8 | // "lib": [], /* Specify library files to be included in the compilation: */
9 | // "allowJs": true, /* Allow javascript files to be compiled. */
10 | // "checkJs": true, /* Report errors in .js files. */
11 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
12 | "declaration": true, /* Generates corresponding '.d.ts' file. */
13 | "sourceMap": true, /* Generates corresponding '.map' file. */
14 | // "outFile": "./", /* Concatenate and emit output to single file. */
15 | "outDir": "./dist", /* Redirect output structure to the directory. */
16 | "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17 | // "removeComments": true, /* Do not emit comments to output. */
18 | // "noEmit": true, /* Do not emit outputs. */
19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
22 |
23 | /* Strict Type-Checking Options */
24 | "strict": true, /* Enable all strict type-checking options. */
25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
26 | // "strictNullChecks": true, /* Enable strict null checks. */
27 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
28 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
29 |
30 | /* Additional Checks */
31 | // "noUnusedLocals": true, /* Report errors on unused locals. */
32 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
33 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
34 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
35 |
36 | /* Module Resolution Options */
37 | "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
38 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
39 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
40 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
41 | // "typeRoots": [], /* List of folders to include type definitions from. */
42 | // "types": [], /* Type declaration files to be included in compilation. */
43 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
44 |
45 | /* Source Map Options */
46 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
47 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
48 | //"inlineSourceMap": true,
49 | /* Emit a single file with source maps instead of having a separate file. */
50 | //"inlineSources": true
51 | /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
52 |
53 | /* Experimental Options */
54 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
55 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
56 | },
57 | "exclude": [
58 | "node_modules",
59 | "src/__tests__",
60 | "src/runner.ts",
61 | "example"
62 | ]
63 | }
64 |
--------------------------------------------------------------------------------