1 | 'use strict';
|
---|
2 |
|
---|
3 | var StackTrace = require('stacktrace-js');
|
---|
4 | var SourcemapCodec = require('@jridgewell/sourcemap-codec');
|
---|
5 |
|
---|
6 | function findStackframe (frames) {
|
---|
7 | for (var i = 4; i < frames.length; i++) {
|
---|
8 | if (!frames[i].fileName.match(/addon\/[^.]+\.js/)) {
|
---|
9 | return frames[i];
|
---|
10 | }
|
---|
11 | }
|
---|
12 | }
|
---|
13 |
|
---|
14 | exports.addon = function (renderer) {
|
---|
15 | if (process.env.NODE_ENV === 'production') {
|
---|
16 | // eslint-disable-next-line no-console
|
---|
17 | console.log(
|
---|
18 | 'nano-css sourcemaps addon should be installed only in development mode. ' +
|
---|
19 | 'Use (process.env.NODE !== "production") to check if you are in development mode.'
|
---|
20 | );
|
---|
21 |
|
---|
22 | return;
|
---|
23 | }
|
---|
24 |
|
---|
25 | var queue = [];
|
---|
26 | var timeout = null;
|
---|
27 | var sourceCache = {};
|
---|
28 |
|
---|
29 | function flush () {
|
---|
30 | timeout = null;
|
---|
31 |
|
---|
32 | var sources = [];
|
---|
33 | var segments = [];
|
---|
34 | var rules = [];
|
---|
35 |
|
---|
36 | for (var i = 0; i < queue.length; i++) {
|
---|
37 | var item = queue[i];
|
---|
38 |
|
---|
39 | rules.push(item.rule);
|
---|
40 | segments.push([[0, sources.length, item.lineNumber - 1, 0]]);
|
---|
41 | sources.push(item.fileName);
|
---|
42 | }
|
---|
43 |
|
---|
44 | queue = [];
|
---|
45 |
|
---|
46 | var mappings = SourcemapCodec.encode(segments);
|
---|
47 | var map = {
|
---|
48 | version: 3,
|
---|
49 | sources: sources,
|
---|
50 | mappings: mappings,
|
---|
51 | sourcesContent: sources.map(function (source) {
|
---|
52 | return sourceCache[source];
|
---|
53 | }),
|
---|
54 | };
|
---|
55 |
|
---|
56 | var json = JSON.stringify(map);
|
---|
57 | var base64 = window.btoa(json);
|
---|
58 | var css = rules.join('\n') + '\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64 + ' */';
|
---|
59 | var style = document.createElement('style');
|
---|
60 |
|
---|
61 | style.setAttribute('data-nano-css-sourcemaps', '');
|
---|
62 | style.appendChild(document.createTextNode(css));
|
---|
63 | document.head.appendChild(style);
|
---|
64 | }
|
---|
65 |
|
---|
66 | function enqueue (rawCss) {
|
---|
67 | StackTrace.get({sourceCache: sourceCache})
|
---|
68 | .then(function (stackframes) {
|
---|
69 | var frame = findStackframe(stackframes);
|
---|
70 |
|
---|
71 | if (!frame) {
|
---|
72 | return;
|
---|
73 | }
|
---|
74 |
|
---|
75 | queue.push({
|
---|
76 | rule: rawCss,
|
---|
77 | fileName: frame.fileName,
|
---|
78 | lineNumber: frame.lineNumber,
|
---|
79 | });
|
---|
80 |
|
---|
81 | if (!timeout) {
|
---|
82 | timeout = setTimeout(flush, 100);
|
---|
83 | }
|
---|
84 | // eslint-disable-next-line no-console
|
---|
85 | }, console.log);
|
---|
86 | }
|
---|
87 |
|
---|
88 | var putRaw = renderer.putRaw;
|
---|
89 |
|
---|
90 | renderer.putRaw = function (rawCSS) {
|
---|
91 | enqueue(rawCSS);
|
---|
92 | putRaw.apply(null, arguments);
|
---|
93 | };
|
---|
94 |
|
---|
95 | renderer.sourcemaps = true;
|
---|
96 | };
|
---|