/test/styleMock.js"
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/hash.js:
--------------------------------------------------------------------------------
1 | // murmurhash2 via https://gist.github.com/raycmorgan/588423
2 |
3 |
4 | export default function hashArray(arr) {
5 | let str = arr.join(',')
6 | return murmur2(str, str.length).toString(36)
7 | }
8 |
9 |
10 | export function murmur2(str, seed) {
11 | let m = 0x5bd1e995
12 | let r = 24
13 | let h = seed ^ str.length
14 | let length = str.length
15 | let currentIndex = 0
16 |
17 | while (length >= 4) {
18 | let k = UInt32(str, currentIndex)
19 |
20 | k = Umul32(k, m)
21 | k ^= k >>> r
22 | k = Umul32(k, m)
23 |
24 | h = Umul32(h, m)
25 | h ^= k
26 |
27 | currentIndex += 4
28 | length -= 4
29 | }
30 |
31 | switch (length) {
32 | case 3:
33 | h ^= UInt16(str, currentIndex)
34 | h ^= str.charCodeAt(currentIndex + 2) << 16
35 | h = Umul32(h, m)
36 | break
37 |
38 | case 2:
39 | h ^= UInt16(str, currentIndex)
40 | h = Umul32(h, m)
41 | break
42 |
43 | case 1:
44 | h ^= str.charCodeAt(currentIndex)
45 | h = Umul32(h, m)
46 | break
47 | }
48 |
49 | h ^= h >>> 13
50 | h = Umul32(h, m)
51 | h ^= h >>> 15
52 |
53 | return h >>> 0
54 | }
55 |
56 | function UInt32(str, pos) {
57 | return (str.charCodeAt(pos++)) +
58 | (str.charCodeAt(pos++) << 8) +
59 | (str.charCodeAt(pos++) << 16) +
60 | (str.charCodeAt(pos) << 24)
61 | }
62 |
63 | function UInt16(str, pos) {
64 | return (str.charCodeAt(pos++)) +
65 | (str.charCodeAt(pos++) << 8)
66 | }
67 |
68 | function Umul32(n, m) {
69 | n = n | 0
70 | m = m | 0
71 | let nlo = n & 0xffff
72 | let nhi = n >>> 16
73 | let res = ((nlo * m) + (((nhi * m) & 0xffff) << 16)) | 0
74 | return res
75 | }
76 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { StyleSheet } from './sheet'
2 | import hashArray from './hash'
3 |
4 | export const sheet = new StyleSheet()
5 | sheet.inject()
6 |
7 | let inserted = {}
8 |
9 | function values(cls, vars){
10 | let hash = hashArray([cls, ...vars])
11 | if(inserted[hash]) {
12 | return `vars-${hash}`
13 | }
14 | let fragvarcls = []
15 | let src = vars.map((val, i) =>
16 | `--${cls}-${i}: ${
17 | /^frag-/.exec(val) ?
18 | (fragvarcls.push(val), 'var(--' + val.split(' ')[0] + ')')
19 | : val
20 | }`).join('; ')
21 | sheet.insert(`.vars-${hash} {${src}}`)
22 | inserted[hash] = true
23 |
24 | if(fragvarcls.length > 0){
25 | return `vars-${hash} ${fragvarcls.join(' ')}`
26 | }
27 | return `vars-${hash}`
28 |
29 | }
30 |
31 | export function flush(){
32 | sheet.flush()
33 | inserted = {}
34 | sheet.inject()
35 | }
36 |
37 |
38 | export default function css(cls, vars, content){
39 | if(content){
40 | let fragvarcls = []
41 | // inline mode
42 | vars = vars.map(v => /^frag-/.exec(v) ? fragments[v] :
43 | v )
44 | let src = content(...vars) // returns an array
45 | let hash = hashArray(src)
46 |
47 | if(!inserted[hash]){
48 | inserted[hash] = true
49 | src.map(r => r.replace(new RegExp(cls, 'gm'), `${cls}-${hash}`)).forEach(r => sheet.insert(r))
50 | }
51 | return `${cls}-${hash}`
52 |
53 | }
54 | return cls + ((vars && vars.length > 0) ? (' ' + values(cls, vars)) : '')
55 | }
56 |
57 | const fragments = {}
58 |
59 | export function fragment(frag, vars, content){
60 | if(content){
61 | let fragvarcls = []
62 | vars = vars.map(v => /^frag-/.exec(v) ? fragments[v] :
63 | v )
64 | let src = content(...vars) // return array?
65 | if(src.length > 1){
66 | throw new Error('what up!')
67 | }
68 |
69 | let hash = hashArray(src)
70 | src = src.join('')
71 | fragments[`${frag}-${hash}`] = src.substring(src.indexOf('{') + 1, src.length -1)
72 | return `${frag}-${hash}`
73 |
74 | }
75 | return frag + ((vars && vars.length > 0) ? (' ' + values(frag, vars)) : '')
76 | }
77 |
78 |
79 |
80 | export function hydrate(ids){
81 | ids.forEach(id => inserted[id] = true)
82 | }
83 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # glam
2 |
3 | [](http://github.com/badges/stability-badges)
4 |
5 | `npm install glam`
6 |
7 | - super fast + small (<2k gz)
8 | - create real css files
9 | - future facing css : nested selectors, autoprefixing, etc
10 | - real dynamic props / `@apply`!
11 | - Make Alex Happy (tm)
12 |
13 | input -
14 | ```jsx
15 | // index.js
16 |
17 | import css from 'glam'
18 |
19 | let myColor = '#ab67ee'
20 | let radius = '20px'
21 |
22 | let myClass = css`
23 | color: red;
24 | &:hover {
25 | font-weight: bold;
26 | color: ${myColor};
27 | border-radius: ${radius};
28 | }
29 | `
30 | // ...
31 |
32 | what up homies
33 |
34 | `
35 |
36 | ```
37 |
38 | output -
39 | ```jsx
40 | // index.js
41 |
42 | import css from 'glam'
43 |
44 | let myColor = '#ab67ee'
45 | let radius = '20px'
46 |
47 | let myClass = css('css-1bh6s', [myColor, rad])
48 | // generates "css-1bh6s vars-h23psd"
49 | ```
50 |
51 | ```css
52 | /* index.js.css */
53 |
54 | .css-1bh6s {
55 | color: red
56 | }
57 | .css-1bh6s:hover {
58 | font-weight: bold;
59 | color: var(--css-1bh6s-0);
60 | border-radius: var(--css-1bh6s-1);
61 | }
62 | ```
63 |
64 | ```css
65 | /* dynamically added */
66 | .vars-h23psd {
67 | --css-1bh6s-0: #ab67ee;
68 | --css-1bh6s-1: 20px;
69 | }
70 |
71 | ```
72 |
73 | fragments
74 | ---
75 |
76 | glam lets you define reusable css `fragment`s that can be
77 | mixed in with `css` and `fragment` definitions
78 |
79 | ```jsx
80 | import css, {fragment} from 'glam'
81 | let huge = 100,
82 | tiny = 6
83 |
84 | let bold = fragment`
85 | display: flex;
86 | font-weight: bold;`
87 |
88 | let big = fragment`
89 | @apply ${bold};
90 | font-size: ${huge}`
91 |
92 | let small = fragment`
93 | font-size: ${tiny}`
94 |
95 |
99 | compose all your classes!
100 |
101 |
102 | ```
103 |
104 | debugging
105 | ---
106 |
107 | pass a `name` to generate readable classnames
108 |
109 | ```jsx
110 | let cls = css`
111 | name: big;
112 | font-size: 40px;
113 | `
114 | // big-f8xd3
115 | ```
116 |
117 | motivation
118 | ---
119 |
120 | this lib was designed to leverage compile-time to provide great DX,
121 | and ship only enough js as required for the interactive portions.
122 |
123 |
124 | nice things
125 | ---
126 |
127 | - extract out as much static css as possible, before delegating the dynamic bits to javascript
128 | - true composition with css vars / `@apply`
129 | - friendly with server side / static rendering
130 | - backward compatible with older browsers (serve the right bundle!)
131 | - free DCE/async loading/etc via webpack ecosystem
132 |
133 | how does it work?
134 | ---
135 |
136 | [like so](https://gist.github.com/threepointone/0ef30b196682a69327c407124f33d69a)
137 |
138 |
139 | caveats
140 | ---
141 |
142 | - interpolated property *values* can't be 'processed', which should be fine?
143 | - composition isn't as easy as other css-in-js systems
144 | - the `@apply` spec is stalled, and might never make it in.
145 |
146 | usage
147 | ---
148 |
149 | - add `glam/babel` to your babel plugins
150 | - add `glam/loader` to webpack's css loaders
151 | - ???
152 | - profit
153 |
154 |
155 | plugin options
156 | ---
157 |
158 | glam can 'polyfill' for browsers that don't support css vars and / or `@apply`.
159 | fancy! you could then generate separate bundles targeting different browsers.
160 |
161 | - `inline` - bool - default `false`
162 |
163 |
164 | loading css
165 | ---
166 |
167 | add `require('./path/to/file.js.css')` statements as required.
168 | some options to bundle and serve this css -
169 |
170 | - use a classic webpack combo: `style-loader`/`css-loader`
171 | - use `file-loader` and load it with link tags and/or `@import`
172 | - use `glam/loader`
173 | - (todo) - use `glam/server` to extract 'precise' css from html
174 |
175 | I hope to make this simpler.
176 |
177 |
178 | bonus - high perf react variant
179 | ---
180 |
181 | for stuff like animations, you could define your own `css` variant,
182 | further bringing down runtime cost
183 |
184 | (react@16.alpha-11 and above)
185 |
186 | ```jsx
187 | function css(cls, vars = []){
188 | return {
189 | className: cls,
190 | style: vars.reduce((o, v, i) =>
191 | (o[`--${cls}-${i}`] = v, o), {})
192 | }
193 | }
194 |
195 | // ...
196 |
197 |
198 | hello!
199 |
200 |
201 | ```
202 |
203 |
204 | todo
205 | ---
206 | - web components, shadow dom et al
207 | - keyframes, fonts, imports, globals
208 | - more features from cssnext
209 | - ssr
210 | - custom postcss pipeline
211 | - source maps?
212 | - typed om?
213 | - SC api?
214 | - unload styles?
215 | - hot loading support
216 | - test inheritance chains
217 |
218 | previous work
219 | ---
220 |
221 | - [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)
222 |
223 |
224 | thanks
225 | ---
226 |
227 | - to [@gregtatum](https://github.com/gregtatum) for the `glam` package name!
228 |
229 |
--------------------------------------------------------------------------------
/src/sheet.js:
--------------------------------------------------------------------------------
1 | // import assign from 'object-assign'
2 | /*
3 |
4 | high performance StyleSheet for css-in-js systems
5 |
6 | - uses multiple style tags behind the scenes for millions of rules
7 | - uses `insertRule` for appending in production for *much* faster performance
8 | - 'polyfills' on server side
9 |
10 |
11 | // usage
12 |
13 | import StyleSheet from 'glamor/lib/sheet'
14 | let styleSheet = new StyleSheet()
15 |
16 | styleSheet.inject()
17 | - 'injects' the stylesheet into the page (or into memory if on server)
18 |
19 | styleSheet.insert('#box { border: 1px solid red; }')
20 | - appends a css rule into the stylesheet
21 |
22 | styleSheet.flush()
23 | - empties the stylesheet of all its contents
24 |
25 |
26 | */
27 |
28 | function last(arr) {
29 | return arr[arr.length -1]
30 | }
31 |
32 | function sheetForTag(tag) {
33 | if(tag.sheet) {
34 | return tag.sheet
35 | }
36 |
37 | // this weirdness brought to you by firefox
38 | for(let i = 0; i < document.styleSheets.length; i++) {
39 | if(document.styleSheets[i].ownerNode === tag) {
40 | return document.styleSheets[i]
41 | }
42 | }
43 | }
44 |
45 | const isBrowser = typeof window !== 'undefined'
46 | const isDev = (process.env.NODE_ENV === 'development') || (!process.env.NODE_ENV) //(x => (x === 'development') || !x)(process.env.NODE_ENV)
47 | const isTest = process.env.NODE_ENV === 'test'
48 |
49 | const oldIE = (() => {
50 | if(isBrowser) {
51 | let div = document.createElement('div')
52 | div.innerHTML = ''
53 | return div.getElementsByTagName('i').length === 1
54 | }
55 | })()
56 |
57 | function makeStyleTag() {
58 | let tag = document.createElement('style')
59 | tag.type = 'text/css'
60 | tag.setAttribute('data-glam', '')
61 | tag.appendChild(document.createTextNode(''));
62 | (document.head || document.getElementsByTagName('head')[0]).appendChild(tag)
63 | return tag
64 | }
65 |
66 | export function StyleSheet({
67 | speedy = !isDev && !isTest,
68 | maxLength = (isBrowser && oldIE) ? 4000 : 65000
69 | } = {}) {
70 | this.isSpeedy = speedy // the big drawback here is that the css won't be editable in devtools
71 | this.sheet = undefined
72 | this.tags = []
73 | this.maxLength = maxLength
74 | this.ctr = 0
75 | }
76 |
77 | Object.assign(StyleSheet.prototype, {
78 | getSheet() {
79 | return sheetForTag(last(this.tags))
80 | },
81 | inject() {
82 | if(this.injected) {
83 | throw new Error('already injected!')
84 | }
85 | if(isBrowser) {
86 | this.tags[0] = makeStyleTag()
87 | }
88 | else {
89 | // server side 'polyfill'. just enough behavior to be useful.
90 | this.sheet = {
91 | cssRules: [],
92 | insertRule: rule => {
93 | // enough 'spec compliance' to be able to extract the rules later
94 | // in other words, just the cssText field
95 | this.sheet.cssRules.push({ cssText: rule })
96 | }
97 | }
98 | }
99 | this.injected = true
100 | },
101 | speedy(bool) {
102 | if(this.ctr !== 0) {
103 | // cannot change speedy mode after inserting any rule to sheet. Either call speedy(${bool}) earlier in your app, or call flush() before speedy(${bool})
104 | throw new Error(`cannot change speedy now`)
105 | }
106 | this.isSpeedy = !!bool
107 | },
108 | _insert(rule) {
109 | // this weirdness for perf, and chrome's weird bug
110 | // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule
111 | try {
112 | let sheet = this.getSheet()
113 | sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : sheet.cssRules.length)
114 | }
115 | catch(e) {
116 | if(isDev) {
117 | // might need beter dx for this
118 | console.warn('illegal rule', rule) //eslint-disable-line no-console
119 | }
120 | }
121 |
122 | },
123 | insert(rule) {
124 |
125 | if(isBrowser) {
126 | // this is the ultrafast version, works across browsers
127 | if(this.isSpeedy && this.getSheet().insertRule) {
128 | this._insert(rule)
129 | }
130 | // more browser weirdness. I don't even know
131 | // else if(this.tags.length > 0 && this.tags::last().styleSheet) {
132 | // this.tags::last().styleSheet.cssText+= rule
133 | // }
134 | else{
135 | if(rule.indexOf('@import') !== -1) {
136 | const tag = last(this.tags)
137 | tag.insertBefore(document.createTextNode(rule), tag.firstChild)
138 | } else {
139 | last(this.tags).appendChild(document.createTextNode(rule))
140 | }
141 | }
142 | }
143 | else{
144 | // server side is pretty simple
145 | this.sheet.insertRule(rule, rule.indexOf('@import') !== -1 ? 0 : this.sheet.cssRules.length)
146 | }
147 |
148 | this.ctr++
149 | if(isBrowser && this.ctr % this.maxLength === 0) {
150 | this.tags.push(makeStyleTag())
151 | }
152 | return this.ctr -1
153 | },
154 | delete(index) {
155 | // we insert a blank rule when 'deleting' so previously returned indexes remain stable
156 | return this.replace(index, '')
157 | },
158 | flush() {
159 | if(isBrowser) {
160 | this.tags.forEach(tag => tag.parentNode.removeChild(tag))
161 | this.tags = []
162 | this.sheet = null
163 | this.ctr = 0
164 | // todo - look for remnants in document.styleSheets
165 | }
166 | else {
167 | // simpler on server
168 | this.sheet.cssRules = []
169 | }
170 | this.injected = false
171 | },
172 | rules() {
173 | if(!isBrowser) {
174 | return this.sheet.cssRules
175 | }
176 | let arr = []
177 | this.tags.forEach(tag => arr.splice(arr.length, 0, ...Array.from(
178 | sheetForTag(tag).cssRules
179 | )))
180 | return arr
181 | }
182 | })
183 |
--------------------------------------------------------------------------------
/src/babel.js:
--------------------------------------------------------------------------------
1 | import parseCSS from './parseCSS'
2 |
3 | import * as babylon from 'babylon'
4 | import touch from 'touch'
5 | import fs from 'fs'
6 |
7 | import hashArray from './hash'
8 |
9 | function getName(str){
10 | let regex = /name\s*:\s*([A-Za-z0-9\-_]+)\s*/gm
11 | let match = regex.exec(str)
12 | if(match){
13 | return match[1]
14 | }
15 | }
16 |
17 | function parser(path) {
18 | let code = path.hub.file.code
19 | let strs = path.node.quasi.quasis.map(x => x.value.cooked)
20 | let hash = hashArray([...strs]) // todo - add current filename?
21 | let name = getName(strs.join('xxx')) || 'css'
22 |
23 | let stubs = path.node.quasi.expressions.map(x => code.substring(x.start, x.end))
24 | let ctr = 0
25 |
26 | let src = strs.reduce((arr, str, i) => {
27 | arr.push(str)
28 | if(i !== stubs.length) {
29 | // todo - test for preceding @apply
30 | let applyMatch = /@apply\s*$/gm.exec(str)
31 | if(applyMatch){
32 | arr.push(`--${name}-${hash}-${i}`)
33 | }
34 | else arr.push(`var(--${name}-${hash}-${i})`)
35 | }
36 | return arr
37 | }, []).join('').trim()
38 | let rules = parseCSS(`.${name}-${hash} { ${src} }`)
39 | let parsed = rules.join('\n')
40 |
41 | return { hash, parsed, stubs, name }
42 | }
43 |
44 | function inline(path){
45 | let code = path.hub.file.code
46 | let strs = path.node.quasi.quasis.map(x => x.value.cooked)
47 | let hash = hashArray([...strs]) // todo - add current filename?
48 | let name = getName(strs.join('xxx')) || 'css'
49 |
50 | let stubs = path.node.quasi.expressions.map(x => code.substring(x.start, x.end))
51 | let ctr = 0
52 |
53 | let src = strs.reduce((arr, str, i) => {
54 | arr.push(str)
55 | if(i !== stubs.length) {
56 | // todo - test for preceding @apply
57 | let applyMatch = /@apply\s*$/gm.exec(str)
58 | if(applyMatch){
59 | arr.push(`--${name}-${hash}-${i}`)
60 | }
61 | else arr.push(`var(--${name}-${hash}-${i})`)
62 | }
63 | return arr
64 | }, []).join('').trim()
65 |
66 | let rules = parseCSS(`.${name}-${hash} { ${src} }`)
67 | rules = rules.map(rule => rule.replace(/@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm, (match, p1) => `$\{x${p1}}` ))
68 | rules = rules.map(rule => rule.replace(/var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm, (match, p1) => `$\{x${p1}}` ))
69 |
70 |
71 | let parsed = `(${stubs.map((x, i) => `x${i}`).join(', ')}) => [${rules.map(x => '`' + x + '`').join(',\n')}]`
72 | return { hash, parsed, stubs, name }
73 | }
74 |
75 | function fragment(path){
76 | let code = path.hub.file.code
77 | let strs = path.node.quasi.quasis.map(x => x.value.cooked)
78 | let hash = hashArray([...strs]) // todo - add current filename?
79 | let name = getName(strs.join('xxx')) || 'frag'
80 |
81 | let stubs = path.node.quasi.expressions.map(x => code.substring(x.start, x.end))
82 | let ctr = 0
83 |
84 | let src = strs.reduce((arr, str, i) => {
85 | arr.push(str)
86 | if(i !== stubs.length) {
87 | // todo - test for preceding @apply
88 | let applyMatch = /@apply\s*$/gm.exec(str)
89 | if(applyMatch){
90 | arr.push(`--${name}-${hash}-${i}`)
91 | }
92 | else {
93 | arr.push(`var(--${name}-${hash}-${i})`)
94 | }
95 |
96 | }
97 | return arr
98 | }, []).join('').trim()
99 | let rules = parseCSS(`.${name}-${hash} { --${name}-${hash}: { ${src} }; }`, {nested: false})
100 | let parsed = rules.join('\n')
101 |
102 | return { hash, parsed, stubs, name }
103 | }
104 |
105 | function fragmentinline(path){
106 | let code = path.hub.file.code
107 | let strs = path.node.quasi.quasis.map(x => x.value.cooked)
108 | let hash = hashArray([...strs]) // todo - add current filename?
109 | let name = getName(strs.join('xxx')) || 'frag'
110 |
111 | let stubs = path.node.quasi.expressions.map(x => code.substring(x.start, x.end))
112 | let ctr = 0
113 |
114 | let src = strs.reduce((arr, str, i) => {
115 | arr.push(str)
116 | if(i !== stubs.length) {
117 | // todo - test for preceding @apply
118 | let applyMatch = /@apply\s*$/gm.exec(str)
119 | if(applyMatch){
120 | arr.push(`--${name}-${hash}-${i}`)
121 | }
122 | else arr.push(`var(--${name}-${hash}-${i})`)
123 | }
124 | return arr
125 | }, []).join('').trim()
126 |
127 | let rules = parseCSS(`.${name}-${hash} { ${src} }`)
128 | rules = rules.map(rule => rule.replace(/@apply\s+--[A-Za-z0-9-_]+-([0-9]+)/gm, (match, p1) => `$\{x${p1}}` ))
129 | rules = rules.map(rule => rule.replace(/var\(--[A-Za-z0-9-_]+-([0-9]+)\)/gm, (match, p1) => `$\{x${p1}}` ))
130 |
131 |
132 | let parsed = `(${stubs.map((x, i) => `x${i}`).join(', ')}) => [${rules.map(x => '`' + x + '`').join(',\n')}]`
133 | return { hash, parsed, stubs, name }
134 | }
135 |
136 | module.exports = function({ types: t }){
137 | return {
138 | visitor: {
139 | Program: {
140 | enter(path, state){
141 | state.injected = false
142 | let inserted = {}
143 | state.toInsert = []
144 | let file = path.hub.file.opts.filename
145 | state.inject = function(){
146 | if(!state.injected){
147 | state.injected = true
148 |
149 | state.toInsert.push('/* do not edit this file */')
150 |
151 | // let src = (state.opts.sync && !state.opts.inline) ?
152 | // `import './${require('path').basename(file) + '.css'}';` :
153 | // `import('./${require('path').basename(file) + '.css'}');`
154 | // if(!state.opts.inline){
155 | // let impNode = babylon.parse(src, {sourceType: 'module', plugins: ['*']}).program.body[0]
156 | // path.node.body.unshift(impNode)
157 | // }
158 |
159 | }
160 | }
161 | state.insert = function(hash, css){
162 | if(!inserted[hash]){
163 | inserted[hash] = true
164 | state.toInsert.push(css)
165 | }
166 | }
167 | },
168 | exit(path, state){
169 | let file = path.hub.file.opts.filename
170 |
171 | let toWrite = state.toInsert.join('\n').trim()
172 | if(!state.opts.inline && state.injected && (fs.existsSync(file + '.css') ? (fs.readFileSync(file + '.css', 'utf8') !== toWrite) : true) ){
173 | if(!fs.existsSync(file + '.css')) {
174 | touch.sync(file + '.css')
175 | }
176 |
177 | fs.writeFileSync(file + '.css', toWrite)
178 | }
179 | }
180 | },
181 | TaggedTemplateExpression(path, state){
182 | let { tag } = path.node
183 | let code = path.hub.file.code
184 |
185 | if(tag.name === 'css') {
186 |
187 | state.inject()
188 |
189 |
190 | let newSrc
191 |
192 | if(state.opts.inline){
193 | let { hash, parsed, stubs, name } = inline(path)
194 | let cls = `'${name}-${hash}'`
195 | let vars = `[${stubs.join(', ')}]`
196 | newSrc = `css(${cls}, ${vars}, ${parsed})`
197 |
198 | }
199 | else {
200 | let { hash, parsed, stubs, name } = parser(path)
201 | state.insert(hash, parsed)
202 | let cls = `'${name}-${hash}'`
203 | let vars = `[${stubs.join(', ')}]`
204 | newSrc = stubs.length > 0 ? `css(${cls}, ${vars})` : `css(${cls})`
205 | }
206 |
207 | path.replaceWith(babylon.parse(newSrc, {plugins: ['*']}).program.body[0].expression)
208 |
209 | }
210 | if(tag.name === 'fragment'){
211 |
212 | state.inject()
213 | let newSrc
214 | // fragment('frag-[hash]', vars, () => [``])
215 | if(state.opts.inline){
216 | let { hash, parsed, stubs, name } = fragmentinline(path)
217 | let cls = `'${name}-${hash}'`
218 | let vars = `[${stubs.join(', ')}]`
219 | newSrc = `fragment(${cls}, ${vars}, ${parsed})`
220 |
221 | }
222 | else {
223 | let { hash, parsed, stubs, name } = fragment(path, {name: 'frag'})
224 | state.insert(hash, parsed)
225 | let cls = `'${name}-${hash}'`
226 | let vars = `[${stubs.join(', ')}]`
227 | newSrc = stubs.length > 0 ? `fragment(${cls}, ${vars})` : `fragment(${cls})`
228 | }
229 |
230 | path.replaceWith(babylon.parse(newSrc, {plugins: ['*']}).program.body[0].expression)
231 |
232 | }
233 | }
234 | }
235 | }
236 | }
--------------------------------------------------------------------------------