253 
253 
selectorHandlers /* : SelectorHandler[] */
253 
253 
selectorHandlers /* : SelectorHandler[] */
254 
254 
) /* : string */ => {
254 
254 
) /* : string */ => {
255 
255 
const handledDeclarations /* : OrderedElements */ = runStringHandlers(
255 
255 
const handledDeclarations /* : OrderedElements */ = runStringHandlers(
256 
256 
declarations, stringHandlers, selectorHandlers);
256 
256 
declarations, stringHandlers, selectorHandlers);
257 
257 
257 
257 
 
258 
const originalElements = {...handledDeclarations.elements};
 
259 
 
260 
// NOTE(emily): This mutates handledDeclarations.elements.
 
261 
const prefixedDeclarations = prefixAll(handledDeclarations.elements);
 
262 
 
263 
const prefixedRules = flatten(
 
264 
objectToPairs(prefixedDeclarations).map(([key, value]) => {
 
265 
if (Array.isArray(value)) {
 
266 
// inline-style-prefixer returns an array when there should be
 
267 
// multiple rules for the same key. Here we flatten to multiple
 
268 
// pairs with the same key.
 
269 
return value.map(v => [key, v]);
 
270 
}
 
271 
return [[key, value]];
 
272 
})
 
273 
);
 
274 
258 
275 
// Calculate the order that we want to each element in `prefixedRules` to
258 
275 
// Calculate the order that we want to each element in `prefixedRules` to
259 
// be in, based on its index in the original key ordering. We have to do
260 
// this before the prefixing, because prefixAll mutates
261 
// handledDeclarations.elements.
276 
// be in, based on its index in the original key ordering.
 
 
262 
277 
const sortOrder = {};
262 
277 
const sortOrder = {};
263 
278 
for (let i = 0; i < handledDeclarations.keyOrder.length; i++) {
263 
278 
for (let i = 0; i < handledDeclarations.keyOrder.length; i++) {
264 
279 
const key = handledDeclarations.keyOrder[i];
264 
279 
const key = handledDeclarations.keyOrder[i];
265 
280 
sortOrder[key] = i;
265 
280 
sortOrder[key] = i;
266 
281 
266 
281 
273 
288 
`Webkit${capitalizedKey}`,
273 
288 
`Webkit${capitalizedKey}`,
274 
289 
`Moz${capitalizedKey}`,
274 
289 
`Moz${capitalizedKey}`,
275 
290 
`ms${capitalizedKey}`,
275 
290 
`ms${capitalizedKey}`,
276 
291 
];
276 
291 
];
277 
292 
for (let j = 0; j < prefixedKeys.length; ++j) {
277 
292 
for (let j = 0; j < prefixedKeys.length; ++j) {
278 
if (!handledDeclarations.elements.hasOwnProperty(prefixedKeys[j])) {
293 
if (!originalElements.hasOwnProperty(prefixedKeys[j])) {
279 
294 
sortOrder[prefixedKeys[j]] = i - 0.5;
279 
294 
sortOrder[prefixedKeys[j]] = i - 0.5;
 
295 
originalElements[prefixedKeys[j]] = originalElements[key];
280 
296 
}
280 
296 
}
281 
297 
}
281 
297 
}
282 
298 
}
282 
298 
}
283 
299 
283 
299 
284 
// NOTE(emily): This mutates handledDeclarations.elements.
285 
const prefixedDeclarations = prefixAll(handledDeclarations.elements);
286 
287 
const prefixedRules = flatten(
288 
objectToPairs(prefixedDeclarations).map(([key, value]) => {
289 
if (Array.isArray(value)) {
290 
// inline-style-prefixer returns an array when there should be
291 
// multiple rules for the same key. Here we flatten to multiple
292 
// pairs with the same key.
293 
return value.map(v => [key, v]);
300 
// Calculate the sort order of a given property.
301 
function sortOrderForProperty([key, value]) {
302 
if (sortOrder.hasOwnProperty(key)) {
303 
if (originalElements.hasOwnProperty(key) &&
304 
originalElements[key] !== value) {
305 
// The value is prefixed. Sort this just before the key with
306 
// the unprefixed value.
307 
return sortOrder[key] - 0.25;
308 
} else {
309 
// Either the key and value are unprefixed here, or this is a
 
310 
// prefixed key. Either way, this is handled by the sortOrder
 
311 
// calculation above.
 
312 
return sortOrder[key];
294 
313 
}
294 
313 
}
295 
return [[key, value]];
296 
})
297 
);
314 
} else {
315 
// If the property isn't in the sort order, it wasn't in the
316 
// original set of unprefixed keys, so it must be a prefixed key.
 
317 
// Sort at order -1 to put it at the top of the set of styles.
 
318 
return -1;
 
319 
}
 
320 
}
298 
321 
298 
321 
299 
// Sort the prefixed rules according to the order that the keys were
300 
// in originally before we prefixed them. New, prefixed versions
301 
// of the rules aren't in the original list, so we set their order to -1 so
302 
// they sort to the top.
303 
prefixedRules.sort((a, b) => {
304 
const aOrder = sortOrder.hasOwnProperty(a[0]) ? sortOrder[a[0]] : -1;
305 
const bOrder = sortOrder.hasOwnProperty(b[0]) ? sortOrder[b[0]] : -1;
306 
return aOrder - bOrder;
307 
});
322 
// Actually sort the rules according to the sort order.
323 
prefixedRules.sort(
324 
(a, b) => sortOrderForProperty(a) - sortOrderForProperty(b));
 
 
 
 
 
 
308 
325 
308 
325 
309 
326 
const transformValue = (useImportant === false)
309 
326 
const transformValue = (useImportant === false)
310 
327 
? stringifyValue
310 
327 
? stringifyValue
311 
328 
: (key, value) => importantify(stringifyValue(key, value));
311 
328 
: (key, value) => importantify(stringifyValue(key, value));
312 
329 
312 
329 

×This UI toggles between unified diff and side-by-side diff with pure CSS, using grid-auto-flow: dense.

Make the browser narrower then 1000px to see it switch. More