Skip to content

Commit 57b063f

Browse files
author
Bart Veneman
committed
WIP: fix minification issue
1 parent 4a85a18 commit 57b063f

15 files changed

+540
-43
lines changed

‎package-lock.json

Lines changed: 452 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"uvu": "0.5.3"
3030
},
3131
"dependencies": {
32+
"got": "11.8.3",
3233
"normalize-url": "6.1.0",
3334
"puppeteer": "13.7.0"
3435
}

‎src/index.js

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,22 +82,45 @@ module.exports = async (url, {
8282
stylesheet.ownerNode.tagName.toLowerCase() :
8383
'import'
8484

85+
if (styleType === 'style') {
86+
items.push({
87+
type: 'style',
88+
css: stylesheet.ownerNode.textContent,
89+
href: document.location.href,
90+
})
91+
}
92+
93+
if (styleType === 'link') {
94+
items.push({
95+
type: 'link',
96+
css: undefined,
97+
href: stylesheet.ownerNode.href,
98+
})
99+
}
100+
85101
var sheetCss = ''
86102

87103
for (var rule of stylesheet.cssRules) {
88104
// eslint-disable-next-line no-undef
89105
if (rule instanceof CSSImportRule) {
106+
items.push({
107+
type: 'import',
108+
href: rule.href,
109+
css: undefined,
110+
})
90111
var imported = getCssFromStyleSheet(rule.styleSheet)
91112
items = items.concat(imported)
92113
}
93114

94-
sheetCss += rule.cssText
115+
if (styleType === 'style') {
116+
sheetCss += rule.cssText
95117

96-
items.push({
97-
type: styleType,
98-
href: stylesheet.href || document.location.href,
99-
css: sheetCss
100-
})
118+
items.push({
119+
type: 'style',
120+
href: document.location.href,
121+
css: sheetCss
122+
})
123+
}
101124
}
102125

103126
return items
@@ -111,6 +134,13 @@ module.exports = async (url, {
111134

112135
return styles
113136
})
137+
console.log(styleSheetsApiCss)
138+
139+
// const allCss = await Promise.all(styleSheetsApiCss.map(item => {
140+
// return {
141+
142+
// }
143+
// }))
114144

115145
// Get all inline styles: <element style="">
116146
// This creates a new CSSRule for every inline style

‎test/fixtures/import-in-css.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.css-imported-with-css {}
1+
.css-imported-with-css{color:#000}

‎test/fixtures/kitchen-sink.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Document</title>
78

89
<!-- <link> in HTML -->
9-
<link rel="stylesheet" href="/link-in-html.css">
10+
<link rel="stylesheet" href="/link-in-html.css?from=link-in-html">
1011

1112
<!-- <style> in HTML -->
1213
<style>
13-
.style-tag-in-html { color: green; }
14+
.style-tag-in-html {
15+
color: green;
16+
}
1417
</style>
1518

1619
<style id="js-insertRule"></style>
1720
</head>
21+
1822
<body>
1923

2024
<div style="background-image: url('background-image-inline-style-attribute-in-html');"></div>
@@ -24,7 +28,7 @@
2428
<!-- <link> tag in JS -->
2529
<script>
2630
var style = document.createElement('link')
27-
style.href = 'link-tag-js.css'
31+
style.href = 'link-tag-js.css?from=link-in-js'
2832
style.rel = 'stylesheet'
2933
document.head.appendChild(style)
3034
</script>
@@ -52,4 +56,5 @@
5256
sheet.insertRule('.js-insertRule { color: red; }')
5357
</script>
5458
</body>
59+
5560
</html>

‎test/fixtures/link-in-html.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
@import url("import-in-css.css");
1+
@import url("import-in-css.css?from=css-import");
22

3-
.link-in-html { }
3+
.link-in-html { }
4+
5+
.unminified {
6+
color: rgb(255, 0, 0);
7+
}
8+
9+
.minified{color:red}

‎test/fixtures/link-tag-html.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Document</title>
7-
<link rel="stylesheet" href="/link-in-html.css">
8+
<link rel="stylesheet" href="/link-in-html.css?from=link-in-html">
89
</head>
10+
911
<body>
1012
<h1 class="fixture">&lt;link> tag in HTML</h1>
1113
<div class="imported">imported</div>
1214
</body>
15+
1316
</html>

‎test/fixtures/link-tag-js.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import url("import-in-css.css");
1+
@import url("import-in-css.css?from=css-import");
22

33
.link-tag-created-with-js {}

‎test/fixtures/link-tag-js.html

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
3+
4+
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
78
<title>Document</title>
8-
</head>
9+
</head>
10+
11+
<body>
12+
<h1 class="fixture">&lt;link> tag in JS</h1>
13+
<div class="imported">imported</div>
14+
<script>
15+
var style = document.createElement('link')
16+
style.href = 'link-tag-js.css?from=link-created-with-js'
17+
style.rel = 'stylesheet'
18+
document.head.appendChild(style)
19+
</script>
20+
</body>
921

10-
<body>
11-
<h1 class="fixture">&lt;link> tag in JS</h1>
12-
<div class="imported">imported</div>
13-
<script>
14-
var style = document.createElement('link')
15-
style.href = 'link-tag-js.css'
16-
style.rel = 'stylesheet'
17-
document.head.appendChild(style)
18-
</script>
19-
</body>
2022
</html>

‎test/fixtures/style-tag-html.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
88
<style>
9-
@import url('import-in-css.css');
9+
@import url('import-in-css.cssfrom=style-in-html');
1010

1111
.style-in-html {
1212
color: red;

‎test/fixtures/style-tag-js.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<h1 class="fixture">&lt;style> tag in JS</h1>
1212
<script>
1313
var style = document.createElement('style')
14-
style.textContent = '@import url("import-in-js.css");.css-in-style { color: red; }'
14+
style.textContent = '@import url("import-in-js.css?from=css-in-js");.css-in-style { color: red; }'
1515
document.body.appendChild(style)
1616
</script>
1717
</body>

‎test/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Test('it finds CSS implemented in a mixed methods (inline, links, style tags)',
2121
const actual = await extractCss(server.url + '/kitchen-sink.html')
2222

2323
assert.ok(actual.includes('@import url("import-in-css.css")'))
24-
assert.ok(actual.includes('.css-imported-with-css { }'))
24+
assert.ok(actual.includes('.css-imported-with-css{color:#000;}'))
2525
assert.ok(actual.includes('[x-extract-css-inline-style]'))
2626
assert.ok(actual.includes('[x-extract-css-inline-style] { background-image: url(\'background-image-inline-style-attribute-in-html\'); }'))
2727
assert.ok(actual.includes('[x-extract-css-inline-style] { background-image: url("background-image-inline-style-js-cssText"); }'))
@@ -51,7 +51,7 @@ Test('it yields an array of entries when the `origins` option equals `include`',
5151
Test('it returns a direct link to a CSS file', async () => {
5252
const actual = await extractCss(server.url + '/import-in-css.css')
5353

54-
assert.equal(actual, '.css-imported-with-css {}')
54+
assert.equal(actual, '.css-imported-with-css{color:#000}')
5555
})
5656

5757
Test('it rejects if the url has an HTTP error status', async () => {

‎test/link-created-with-js.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Test('finds CSS directly from <link>\'ed file', async () => {
2727
Test('it finds @import\'ed css', async () => {
2828
const actual = await extractCss(server.url + '/link-tag-js.html')
2929

30-
assert.ok(actual.includes('.css-imported-with-css { }'))
30+
assert.ok(actual.includes('.css-imported-with-css{color:#000;}'))
3131
})
3232

3333
Test.run()

‎test/link-in-html.test.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,16 @@ Test.after(async () => {
2020
Test('finds CSS directly from <link>\'ed file', async () => {
2121
const actual = await extractCss(server.url + '/link-tag-html.html')
2222

23-
assert.ok(actual.includes('.link-in-html { }'))
24-
assert.ok(actual.includes('@import url("import-in-css.css")'))
23+
assert.ok(actual.includes('.unminified {'), 'Could not find unminified selector in <link>')
24+
assert.ok(actual.includes('color: rgb(255, 0, 0);'), 'Could not find unminified declaration in <link>')
25+
assert.ok(actual.includes('.minified{color:red}'), 'Could not find minified RuleSet in <link>')
26+
assert.ok(actual.includes('@import url("import-in-css.css")'), 'Could not find @import in <link>')
2527
})
2628

2729
Test('finds CSS from @import\'ed CSS file', async () => {
2830
const actual = await extractCss(server.url + '/link-tag-html.html')
2931

30-
assert.ok(actual.includes('.css-imported-with-css { }'))
32+
assert.ok(actual.includes('.css-imported-with-css{color:#000;}'), 'Could not find minified CSS from @imported file in <link>')
3133
})
3234

3335
Test.run()

‎test/style-in-html.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,26 @@ const extractCss = require('..')
88

99
let server
1010

11-
Test.before(async () => {
11+
Test.before.each(async () => {
1212
server = await createTestServer()
1313
server.use(sirv('test/fixtures'))
1414
})
1515

16-
Test.after(async () => {
16+
Test.after.each(async () => {
1717
await server.close()
1818
})
1919

2020
Test('finds CSS directly from <style>', async () => {
2121
const actual = await extractCss(server.url + '/style-tag-html.html')
2222

23-
assert.ok(actual.includes('.style-in-html'))
24-
assert.ok(actual.includes('@import url("import-in-css.css")'))
23+
assert.ok(actual.includes('.style-in-html'), 'Could not find `.style-in-html` selector')
24+
assert.ok(actual.includes('@import url("import-in-css.css")'), `Could not find @import rule`)
2525
})
2626

2727
Test('finds CSS from @import\'ed CSS file within <style>', async () => {
2828
const actual = await extractCss(server.url + '/style-tag-html.html')
2929

30-
assert.ok(actual.includes('.css-imported-with-css { }'))
30+
assert.ok(actual.includes('.css-imported-with-css{color:#000;}'), `Could not find minified CSS from @import`)
3131
})
3232

3333
Test.run()

0 commit comments

Comments
 (0)