Skip to content

Commit cf5c1e5

Browse files
bartvenemanbartveneman
authored
implement __unstable__uniqueWithLocations for embbeded content types (#375)
closes #374
1 parent 18847ba commit cf5c1e5

File tree

2 files changed

+115
-2
lines changed

2 files changed

+115
-2
lines changed

‎src/index.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -374,16 +374,30 @@ export function analyze(css, options = {}) {
374374
embedTypes.total++
375375
embedSize += size
376376

377+
let loc = {
378+
line: node.loc.start.line,
379+
column: node.loc.start.column,
380+
offset: node.loc.start.offset,
381+
length: node.loc.end.offset - node.loc.start.offset,
382+
}
383+
377384
if (embedTypes.unique.has(type)) {
378385
let item = embedTypes.unique.get(type)
379386
item.count++
380387
item.size += size
381388
embedTypes.unique.set(type, item)
389+
if (useLocations) {
390+
item.__unstable__uniqueWithLocations.push(loc)
391+
}
382392
} else {
383-
embedTypes.unique.set(type, {
393+
let new_item = {
384394
count: 1,
385395
size
386-
})
396+
}
397+
if (useLocations) {
398+
new_item.__unstable__uniqueWithLocations = [loc]
399+
}
400+
embedTypes.unique.set(type, new_item)
387401
}
388402

389403
// @deprecated
@@ -629,6 +643,7 @@ export function analyze(css, options = {}) {
629643
})
630644

631645
let embeddedContent = embeds.c()
646+
delete embeddedContent.__unstable__uniqueWithLocations
632647

633648
let totalUniqueDeclarations = uniqueDeclarations.size
634649

‎src/stylesheet/stylesheet.test.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,104 @@ Stylesheet('measures base64 contents', () => {
150150
assert.equal(actual, expected)
151151
})
152152

153+
Stylesheet('measures base64 contents - with locations', () => {
154+
const fixture = `
155+
/* Demo from https://css-tricks.com/data-uris/ */
156+
li {
157+
background:
158+
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
159+
no-repeat
160+
left center;
161+
padding: 5px 0 5px 25px;
162+
}
163+
164+
/* Demo from https://codepen.io/chriscoyier/pen/ZQgvyG/ */
165+
.chevron-down {
166+
background: url(data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E);
167+
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTk1LjYgMTA3LjgiPjxwYXRoIGZpbGw9IiNCNUI1QjUiIGNsYXNzPSJzdDAiIGQ9Ik05Ny44IDEwNy44Yy0yLjYgMC01LjEtMS03LjEtMi45TDIuOSAxNy4xQy0xIDEzLjItMSA2LjggMi45IDIuOSA2LjgtMSAxMy4yLTEgMTcuMSAyLjlsODAuNyA4MC43IDgwLjctODAuN2MzLjktMy45IDEwLjItMy45IDE0LjEgMCAzLjkgMy45IDMuOSAxMC4yIDAgMTQuMWwtODcuOCA4Ny44Yy0xLjkgMi00LjQgMy03IDN6Ii8+PC9zdmc+);
168+
}
169+
170+
/* Demo from smashingmagazine.com */
171+
.thing {
172+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.84 26.6'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e93e32%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='8.25' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Crect class='cls-1' x='17.53' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Cpath class='cls-1' d='M24.1 5.39h-2.56a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59h-4.28a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59H4.75a2.07 2.07 0 00-2.08 2.07v14.75a2.07 2.07 0 002.07 2.07H24.1a2.07 2.07 0 002.07-2.07V7.46a2.07 2.07 0 00-2.07-2.07zm-.29 16.15H5.23V8.45h18.58z'/%3E%3Cpath class='cls-1' d='M7.18 11.71h2.5v2.5h-2.5zM11.27 11.71h2.5v2.5h-2.5zM15.26 11.71h2.5v2.5h-2.5zM19.35 11.71h2.5v2.5h-2.5zM7.18 15.78h2.5v2.5h-2.5zM11.27 15.78h2.5v2.5h-2.5zM15.26 15.78h2.5v2.5h-2.5zM19.35 15.78h2.5v2.5h-2.5z'/%3E%3C/svg%3E");
173+
}
174+
175+
/* Stackoverflow.com */
176+
.thing {
177+
--_ba-before-icon: url("data:image/svg+xml,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
178+
}
179+
`
180+
181+
const actual = analyze(fixture, { useUnstableLocations: true }).stylesheet.embeddedContent
182+
const expected = {
183+
total: 5,
184+
totalUnique: 5,
185+
unique: {
186+
'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7': 1,
187+
'data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20195.6%20107.8%22%3E%3Cpath%20fill%3D%22%23B5B5B5%22%20class%3D%22st0%22%20d%3D%22M97.8%20107.8c-2.6%200-5.1-1-7.1-2.9L2.9%2017.1C-1%2013.2-1%206.8%202.9%202.9%206.8-1%2013.2-1%2017.1%202.9l80.7%2080.7%2080.7-80.7c3.9-3.9%2010.2-3.9%2014.1%200%203.9%203.9%203.9%2010.2%200%2014.1l-87.8%2087.8c-1.9%202-4.4%203-7%203z%22%2F%3E%3C%2Fsvg%3E': 1,
188+
'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTk1LjYgMTA3LjgiPjxwYXRoIGZpbGw9IiNCNUI1QjUiIGNsYXNzPSJzdDAiIGQ9Ik05Ny44IDEwNy44Yy0yLjYgMC01LjEtMS03LjEtMi45TDIuOSAxNy4xQy0xIDEzLjItMSA2LjggMi45IDIuOSA2LjgtMSAxMy4yLTEgMTcuMSAyLjlsODAuNyA4MC43IDgwLjctODAuN2MzLjktMy45IDEwLjItMy45IDE0LjEgMCAzLjkgMy45IDMuOSAxMC4yIDAgMTQuMWwtODcuOCA4Ny44Yy0xLjkgMi00LjQgMy03IDN6Ii8+PC9zdmc+': 1,
189+
[`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.84 26.6'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e93e32%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='8.25' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Crect class='cls-1' x='17.53' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Cpath class='cls-1' d='M24.1 5.39h-2.56a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59h-4.28a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59H4.75a2.07 2.07 0 00-2.08 2.07v14.75a2.07 2.07 0 002.07 2.07H24.1a2.07 2.07 0 002.07-2.07V7.46a2.07 2.07 0 00-2.07-2.07zm-.29 16.15H5.23V8.45h18.58z'/%3E%3Cpath class='cls-1' d='M7.18 11.71h2.5v2.5h-2.5zM11.27 11.71h2.5v2.5h-2.5zM15.26 11.71h2.5v2.5h-2.5zM19.35 11.71h2.5v2.5h-2.5zM7.18 15.78h2.5v2.5h-2.5zM11.27 15.78h2.5v2.5h-2.5zM15.26 15.78h2.5v2.5h-2.5zM19.35 15.78h2.5v2.5h-2.5z'/%3E%3C/svg%3E`]: 1,
190+
[`data:image/svg+xml,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E`]: 1,
191+
},
192+
uniquenessRatio: 1,
193+
size: {
194+
total: 2337,
195+
ratio: 0.8266713830916166,
196+
},
197+
types: {
198+
total: 5,
199+
totalUnique: 2,
200+
uniquenessRatio: 2 / 5,
201+
unique: {
202+
'image/gif': {
203+
count: 1,
204+
size: 310,
205+
__unstable__uniqueWithLocations: [
206+
{
207+
line: 5,
208+
column: 9,
209+
offset: 90,
210+
length: 315,
211+
}
212+
],
213+
},
214+
'image/svg+xml': {
215+
count: 4,
216+
size: 2027,
217+
__unstable__uniqueWithLocations: [
218+
{
219+
line: 13,
220+
column: 19,
221+
offset: 584,
222+
length: 464
223+
},
224+
{
225+
line: 14,
226+
column: 19,
227+
offset: 1068,
228+
length: 439
229+
},
230+
{
231+
line: 19,
232+
column: 25,
233+
offset: 1594,
234+
length: 862
235+
},
236+
{
237+
line: 24,
238+
column: 26,
239+
offset: 2531,
240+
length: 286
241+
}
242+
],
243+
},
244+
},
245+
}
246+
}
247+
248+
assert.equal(actual, expected)
249+
})
250+
153251
Stylesheet('reports embed size correctly when there are duplicates', () => {
154252
const fixture = `
155253
/* Demo from https://codepen.io/chriscoyier/pen/ZQgvyG/ */

0 commit comments

Comments
 (0)