@@ -8,53 +8,79 @@ const {
8
8
const getTemplate = require ( "./get-template" ) ;
9
9
const loadSyntax = require ( "postcss-syntax/load-syntax" ) ;
10
10
11
+ const isStyleSheetCreate = expectAdjacentSibling ( [ "create" ] ) ;
11
12
const supports = {
12
- // https://github.com/Khan/aphrodite
13
- // https://github.com/necolas/react-native-web
14
- StyleSheet : true ,
15
-
16
- // https://github.com/emotion-js/emotion
17
13
// import styled from '@emotion/styled'
18
- // https://github.com/threepointone/glamor
19
14
// import { styled } from 'glamor/styled'
20
- // https://github.com/rtsao/styletron
21
15
// import { styled } from "styletron-react";
16
+ // import { styled } from 'linaria/react';
22
17
styled : true ,
23
18
24
- // https://github.com/typestyle/typestyle
25
19
// import { style } from "typestyle";
26
20
style : true ,
27
21
28
- // https://github.com/4Catalyzer/astroturf
29
- // import { css } from 'astroturf';
30
- // https://github.com/bashmish/lit-css
22
+ // import { StyleSheet, css } from 'aphrodite';
23
+ // import styled, { css } from 'astroturf';
31
24
// import { css } from 'lit-css';
32
- // https://github.com/threepointone/glamor
33
25
// import { css } from 'glamor'
26
+ // require('css-light').css({color: 'red'});
27
+ // import { css } from 'linaria';
34
28
css : true ,
35
29
36
- // https://github.com/emotion-js/emotion
30
+ // import { StyleSheet, css } from 'aphrodite';
31
+ // import { AppRegistry, StyleSheet, Text, View } from 'react-native';
32
+ StyleSheet : isStyleSheetCreate ,
33
+
34
+ // import styled, { css } from 'astroturf';
35
+ astroturf : true ,
36
+
37
+ // require('csjs')`css`;
38
+ csjs : true ,
39
+
40
+ // require('cssobj')({color: 'red'})
41
+ cssobj : true ,
42
+
43
+ // require('electron-css')({color: 'red'})
44
+ "electron-css" : true ,
45
+
37
46
// import styled from "react-emotion";
38
- emotion : true ,
39
47
"react-emotion" : true ,
48
+
49
+ // import styled from 'preact-emotion'
40
50
"preact-emotion" : true ,
41
51
52
+ // https://github.com/streamich/freestyler
53
+ freestyler : true ,
54
+
42
55
// https://github.com/paypal/glamorous
43
56
glamorous : true ,
44
57
45
- // https://github.com/js-next/react-style
46
- "react-style" : true ,
58
+ // https://github.com/irom-io/i-css
59
+ // "i-css": (i, nameSpace) => nameSpace[i + 1] === "addStyles" && nameSpace[i + 2] === "wrapper",
60
+
61
+ // https://github.com/j2css/j2c
62
+ j2c : expectAdjacentSibling ( [ "inline" , "sheet" ] ) ,
47
63
48
- // https://github.com/casesandberg/reactcss
64
+ // var styles = StyleSheet.create({color: 'red'})
65
+ "react-inline" : isStyleSheetCreate ,
66
+ "react-style" : isStyleSheetCreate ,
67
+
68
+ // import reactCSS from 'reactcss'
49
69
reactcss : true ,
50
70
51
- // https://github.com/styled-components/styled-components
71
+ // const StyledButton = injectSheet(styles)(Button)
72
+ "react-jss" : true ,
73
+
74
+ // import styled from 'styled-components';
52
75
"styled-components" : true ,
53
76
54
- // https://github.com/rtsao/styletron
55
- // import {styled} from "styletron-react";
56
77
// import {withStyle} from "styletron-react";
57
- "styletron-react" : true ,
78
+ "styletron-react" : expectAdjacentSibling ( [ "withStyle" ] ) ,
79
+
80
+ "styling" : true ,
81
+
82
+ // const rule = superstyle({ color: 'blue' })
83
+ "superstyle" : true ,
58
84
} ;
59
85
60
86
const plugins = [
@@ -71,38 +97,45 @@ const plugins = [
71
97
"optionalCatchBinding" ,
72
98
] ;
73
99
74
- function getSourceType ( filename ) {
75
- if ( filename && / \. m [ t j ] s x ? $ / . test ( filename ) ) {
76
- return "module" ;
77
- }
78
- try {
79
- return loadOptions ( {
80
- filename,
81
- } ) . sourceType ;
82
- } catch ( ex ) {
83
- //
84
- }
100
+ function expectAdjacentSibling ( names ) {
101
+ return ( i , nameSpace ) => (
102
+ names . some ( name => nameSpace [ i + 1 ] === name )
103
+ ) ;
85
104
}
86
105
87
- function getOptions ( opts ) {
106
+ function loadBabelOpts ( opts ) {
88
107
const filename = opts . from && opts . from . replace ( / \? .* $ / , "" ) ;
89
-
90
- return {
108
+ opts = {
91
109
sourceFilename : filename ,
92
- sourceType : getSourceType ( filename ) || "unambiguous" ,
110
+ sourceType : filename && / \. m [ t j ] s x ? $ / . test ( filename ) ? "module" : "unambiguous" ,
93
111
plugins,
94
112
allowImportExportEverywhere : true ,
95
113
allowAwaitOutsideFunction : true ,
96
114
allowReturnOutsideFunction : true ,
97
115
allowSuperOutsideMethod : true ,
98
116
} ;
117
+ let fileOpts ;
118
+ try {
119
+ fileOpts = filename && loadOptions ( {
120
+ filename,
121
+ } ) ;
122
+ } catch ( ex ) {
123
+ //
124
+ }
125
+ for ( const key in fileOpts ) {
126
+ if ( Array . isArray ( fileOpts [ key ] ) && ! fileOpts [ key ] . length ) {
127
+ continue ;
128
+ }
129
+ opts [ key ] = fileOpts [ key ] ;
130
+ }
131
+ return opts ;
99
132
}
100
133
101
134
function literalParser ( source , opts , styles ) {
102
135
let ast ;
103
136
try {
104
137
ast = parse ( source , {
105
- parserOpts : getOptions ( opts ) ,
138
+ parserOpts : loadBabelOpts ( opts ) ,
106
139
} ) ;
107
140
} catch ( ex ) {
108
141
// console.error(ex);
@@ -113,6 +146,7 @@ function literalParser (source, opts, styles) {
113
146
const variableDeclarator = new Map ( ) ;
114
147
let objLiteral = new Set ( ) ;
115
148
let tplLiteral = new Set ( ) ;
149
+ const tplCallee = new Set ( ) ;
116
150
const jobs = [ ] ;
117
151
118
152
function addObjectJob ( path ) {
@@ -200,7 +234,18 @@ function literalParser (source, opts, styles) {
200
234
}
201
235
202
236
function isStylePath ( path ) {
203
- return getNameSpace ( path , [ ] ) . some ( name => name && supports [ name ] ) ;
237
+ return getNameSpace ( path , [ ] ) . some ( function ( name ) {
238
+ let result = name && ( ( supports . hasOwnProperty ( name ) && supports [ name ] ) || ( opts . syntax . config . hasOwnProperty ( name ) && opts . syntax . config [ name ] ) ) ;
239
+ switch ( typeof result ) {
240
+ case "function" : {
241
+ result = result . apply ( this , Array . prototype . slice . call ( arguments , 1 ) ) ;
242
+ }
243
+ // eslint-disable-next-line no-fallthrough
244
+ case "boolean" : {
245
+ return result ;
246
+ }
247
+ }
248
+ } ) ;
204
249
}
205
250
206
251
const visitor = {
@@ -215,7 +260,7 @@ function literalParser (source, opts, styles) {
215
260
} ) ;
216
261
} ,
217
262
JSXAttribute : ( path ) => {
218
- if ( supports [ path . node . name . name ] ) {
263
+ if ( / ^ (?: c s s | s t y l e ) $ / . test ( path . node . name . name ) ) {
219
264
addObjectJob ( path . get ( "value.expression" ) ) ;
220
265
}
221
266
} ,
@@ -259,7 +304,7 @@ function literalParser (source, opts, styles) {
259
304
break ;
260
305
} while ( currPath ) ;
261
306
} ) ;
262
- } else if ( isStylePath ( path . get ( "callee" ) ) ) {
307
+ } else if ( ! tplCallee . has ( callee ) && isStylePath ( path . get ( "callee" ) ) ) {
263
308
path . get ( "arguments" ) . forEach ( ( arg ) => {
264
309
addObjectJob ( arg . isFunction ( ) ? arg . get ( "body" ) : arg ) ;
265
310
} ) ;
@@ -268,6 +313,9 @@ function literalParser (source, opts, styles) {
268
313
TaggedTemplateExpression : ( path ) => {
269
314
if ( isStylePath ( path . get ( "tag" ) ) ) {
270
315
tplLiteral . add ( path . node . quasi ) ;
316
+ if ( path . node . tag . callee ) {
317
+ tplCallee . add ( path . node . tag . callee ) ;
318
+ }
271
319
}
272
320
} ,
273
321
} ;
0 commit comments