Skip to content

Commit 9faeb4e

Browse files
jeremenichellijeremenichelli
committed
fix: correct named export
1 parent 71d7087 commit 9faeb4e

3 files changed

Lines changed: 116 additions & 115 deletions

File tree

‎src/css.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* Fallback function
3+
* @method noop
4+
* @returns {undefined}
5+
*/
6+
const noop = () => {}
7+
8+
/**
9+
* Method called when a stylesheet is loaded
10+
* @method __onload__
11+
* @param {Object} config
12+
*/
13+
function __onload__(media, storage, logger) {
14+
this.onload = null
15+
this.media = media || 'all'
16+
17+
logger(null, `${this.href} loaded asynchronously`)
18+
19+
if (storage) {
20+
try {
21+
const rules = this.sheet ? this.sheet.cssRules : this.styleSheet.rules
22+
let styles = rules.reduce((acc, rule) => {
23+
return (acc += rule.cssText)
24+
}, '')
25+
26+
// wrap rules with @media statement if necessary
27+
if (media) styles = `@media ${media} {${styles}}`
28+
29+
// save on web storage
30+
window[`${storage}Storage`].setItem(this.href, styles)
31+
} catch (e) {
32+
logger(e, 'Stylesheet could not be saved for future visits')
33+
}
34+
}
35+
}
36+
37+
/**
38+
* Loads stylesheet asynchronously or retrieves it from web storage
39+
* @method css
40+
* @param {Object} config
41+
*/
42+
function css(config = {}) {
43+
const script = document.getElementsByTagName('script')[0]
44+
const ref = config.ref || script
45+
const logger = config.logger || noop
46+
const link = document.createElement('link')
47+
let storedStyles
48+
let el
49+
50+
// create link element to extract correct href path
51+
link.rel = 'stylesheet'
52+
link.href = config.url
53+
54+
/*
55+
* Detect stored stylesheet content only when storage option is present
56+
* and expose an error in console in case web storage is not supported
57+
*/
58+
if (config.storage) {
59+
try {
60+
storedStyles = window[`${config.storage}Storage`].getItem(link.href)
61+
} catch (error) {
62+
logger(
63+
error,
64+
`${link.href} could not be retrieved from ${config.storage}Storage`
65+
)
66+
}
67+
}
68+
69+
/*
70+
* if stylesheet is in web storage inject a style tag with its
71+
* content, else load it using the link tag
72+
*/
73+
if (storedStyles) {
74+
el = document.createElement('style')
75+
76+
el.textContent = storedStyles
77+
78+
logger(null, `${link.href} retrieved from ${config.storage}Storage`)
79+
} else {
80+
/*
81+
* Filament Group approach to prevent stylesheet to block rendering
82+
* https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js#L26
83+
*/
84+
link.media = 'only x'
85+
86+
/*
87+
* Add crossOrigin attribute for external stylesheets, take in count this
88+
* attribute is not widely supported. In those cases CSS rules will not be
89+
* saved in web storage but stylesheet will be loaded
90+
*/
91+
if (config.crossOrigin) link.crossOrigin = config.crossOrigin
92+
93+
link.onload = __onload__.bind(link, config.media, config.storage, logger)
94+
el = link
95+
}
96+
97+
/*
98+
* Node insert approach taken from Paul Irish's 'Surefire DOM Element Insertion'
99+
* http://www.paulirish.com/2011/surefire-dom-element-insertion/
100+
*/
101+
ref.parentNode.insertBefore(el, ref)
102+
}
103+
104+
export default css

‎src/index.js‎

Lines changed: 1 addition & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1 @@
1-
/**
2-
* Fallback function
3-
* @method noop
4-
* @returns {undefined}
5-
*/
6-
const noop = () => {}
7-
8-
/**
9-
* Method called when a stylesheet is loaded
10-
* @method __onload__
11-
* @param {Object} config
12-
*/
13-
function __onload__(media, storage, logger) {
14-
this.onload = null
15-
this.media = media || 'all'
16-
17-
logger(null, `${this.href} loaded asynchronously`)
18-
19-
if (storage) {
20-
try {
21-
const rules = this.sheet ? this.sheet.cssRules : this.styleSheet.rules
22-
let styles = rules.reduce((acc, rule) => {
23-
return (acc += rule.cssText)
24-
}, '')
25-
26-
// wrap rules with @media statement if necessary
27-
if (media) styles = `@media ${media} {${styles}}`
28-
29-
// save on web storage
30-
window[`${storage}Storage`].setItem(this.href, styles)
31-
} catch (e) {
32-
logger(e, 'Stylesheet could not be saved for future visits')
33-
}
34-
}
35-
}
36-
37-
/**
38-
* Loads stylesheet asynchronously or retrieves it from web storage
39-
* @method css
40-
* @param {Object} config
41-
*/
42-
function css(config = {}) {
43-
const script = document.getElementsByTagName('script')[0]
44-
const ref = config.ref || script
45-
const logger = config.logger || noop
46-
const link = document.createElement('link')
47-
let storedStyles
48-
let el
49-
50-
// create link element to extract correct href path
51-
link.rel = 'stylesheet'
52-
link.href = config.url
53-
54-
/*
55-
* Detect stored stylesheet content only when storage option is present
56-
* and expose an error in console in case web storage is not supported
57-
*/
58-
if (config.storage) {
59-
try {
60-
storedStyles = window[`${config.storage}Storage`].getItem(link.href)
61-
} catch (error) {
62-
logger(
63-
error,
64-
`${link.href} could not be retrieved from ${config.storage}Storage`
65-
)
66-
}
67-
}
68-
69-
/*
70-
* if stylesheet is in web storage inject a style tag with its
71-
* content, else load it using the link tag
72-
*/
73-
if (storedStyles) {
74-
el = document.createElement('style')
75-
76-
el.textContent = storedStyles
77-
78-
logger(null, `${link.href} retrieved from ${config.storage}Storage`)
79-
} else {
80-
/*
81-
* Filament Group approach to prevent stylesheet to block rendering
82-
* https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js#L26
83-
*/
84-
link.media = 'only x'
85-
86-
/*
87-
* Add crossOrigin attribute for external stylesheets, take in count this
88-
* attribute is not widely supported. In those cases CSS rules will not be
89-
* saved in web storage but stylesheet will be loaded
90-
*/
91-
if (config.crossOrigin) link.crossOrigin = config.crossOrigin
92-
93-
link.onload = __onload__.bind(link, config.media, config.storage, logger)
94-
el = link
95-
}
96-
97-
/*
98-
* Node insert approach taken from Paul Irish's 'Surefire DOM Element Insertion'
99-
* http://www.paulirish.com/2011/surefire-dom-element-insertion/
100-
*/
101-
ref.parentNode.insertBefore(el, ref)
102-
}
103-
104-
export default { css }
1+
export { default as css } from './css'

‎src/index.test.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import store from '.'
1+
import { css } from '.'
22
import test from 'ava'
33
import sinon from 'sinon'
44
import clone from 'lodash.clonedeep'
@@ -69,7 +69,7 @@ test.afterEach(() => {
6969

7070
test('loads stylesheet', (t) => {
7171
const url = 'https://path.to/stylesheet.css'
72-
store.css({ url })
72+
css({ url })
7373

7474
// assigned link properties correctly
7575
t.is(ELEMENTS.link.href, url)
@@ -94,7 +94,7 @@ test('loads stylesheet', (t) => {
9494
test('accepts media in config object', (t) => {
9595
const url = 'https://path.to/stylesheet.css'
9696
const media = '(max-width: 739px'
97-
store.css({ url, media })
97+
css({ url, media })
9898

9999
ELEMENTS.link.onload()
100100
t.is(ELEMENTS.link.media, media)
@@ -103,15 +103,15 @@ test('accepts media in config object', (t) => {
103103
test('accepts cross origin attribute', (t) => {
104104
const url = 'https://path.to/stylesheet.css'
105105
const crossOrigin = 'anonymous'
106-
store.css({ url, crossOrigin })
106+
css({ url, crossOrigin })
107107

108108
t.is(ELEMENTS.link.crossOrigin, crossOrigin)
109109
})
110110

111111
test('accepts a reference element for link injection', (t) => {
112112
const url = 'https://path.to/stylesheet.css'
113113
const ref = { parentNode: { insertBefore: sinon.spy() } }
114-
store.css({ url, ref })
114+
css({ url, ref })
115115

116116
t.is(ref.parentNode.insertBefore.getCall(0).args[0], ELEMENTS.link)
117117
t.is(ref.parentNode.insertBefore.getCall(0).args[1], ref)
@@ -120,7 +120,7 @@ test('accepts a reference element for link injection', (t) => {
120120
test('stores result in localStorage', (t) => {
121121
const url = 'https://path.to/stylesheet.css'
122122
const storage = 'local'
123-
store.css({ url, storage })
123+
css({ url, storage })
124124

125125
// styles gets to local storage
126126
ELEMENTS.link.onload()
@@ -132,7 +132,7 @@ test('stores result in localStorage', (t) => {
132132
test('stores result in sessionStorage', (t) => {
133133
const url = 'https://path.to/stylesheet.css'
134134
const storage = 'session'
135-
store.css({ url, storage })
135+
css({ url, storage })
136136

137137
// styles gets to session storage
138138
ELEMENTS.link.onload()
@@ -146,7 +146,7 @@ test('retrieves already saved styles from localStorage', (t) => {
146146
const storage = 'local'
147147
const styles = `${firstRule}${secondRule}`
148148
window.localStorage[url] = styles
149-
store.css({ url, storage })
149+
css({ url, storage })
150150

151151
t.is(window.localStorage.getItem.getCall(0).args[0], url)
152152
t.is(ELEMENTS.style.textContent, styles)
@@ -157,7 +157,7 @@ test('retrieves already saved styles from sessionStorage', (t) => {
157157
const storage = 'session'
158158
const styles = `${firstRule}${secondRule}`
159159
window.sessionStorage[url] = styles
160-
store.css({ url, storage })
160+
css({ url, storage })
161161

162162
t.is(window.sessionStorage.getItem.getCall(0).args[0], url)
163163
t.is(ELEMENTS.style.textContent, styles)
@@ -168,7 +168,7 @@ test('wraps styles in media when storing', (t) => {
168168
const media = '(max-width: 739px)'
169169
const storage = 'session'
170170
const styles = `${firstRule}${secondRule}`
171-
store.css({ url, media, storage })
171+
css({ url, media, storage })
172172

173173
ELEMENTS.link.onload()
174174
t.is(
@@ -181,7 +181,7 @@ test('accepts logger method', (t) => {
181181
const url = 'https://path.to/stylesheet.css'
182182
const storage = 'session'
183183
const logger = sinon.spy()
184-
store.css({ url, storage, logger })
184+
css({ url, storage, logger })
185185

186186
ELEMENTS.link.onload()
187187
t.is(logger.getCall(0).args[0], null)

0 commit comments

Comments
 (0)