Skip to content

Commit 1b0612b

Browse files
nightwingnightwing
committed
fix: better way to extract css for csp environments
1 parent 6ad3123 commit 1b0612b

File tree

9 files changed

+254
-263
lines changed

9 files changed

+254
-263
lines changed

‎Makefile.dryice.js

+58-64
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,6 @@ function main(args) {
9090
return updateModes();
9191
}
9292

93-
if (args.indexOf("--reuse") === -1) {
94-
console.log("updating files in lib/ace");
95-
generateAmdModules();
96-
}
97-
9893
var type = "minimal";
9994
args = args.map(function(x) {
10095
if (x[0] == "-" && x[1] != "-")
@@ -112,6 +107,16 @@ function main(args) {
112107
if (args.indexOf("--h") != -1 || args.indexOf("-h") != -1 || args.indexOf("--help") != -1) {
113108
return showHelp();
114109
}
110+
111+
if (type == "css") {
112+
return extractCss();
113+
}
114+
115+
if (args.indexOf("--reuse") === -1) {
116+
console.log("updating files in lib/ace");
117+
generateAmdModules();
118+
}
119+
115120
if (type == "minimal") {
116121
buildAce({
117122
compress: args.indexOf("--m") != -1,
@@ -139,6 +144,7 @@ function showHelp(type) {
139144
console.log(" demo Runs demo build of Ace");
140145
console.log(" full all of above");
141146
console.log(" highlighter ");
147+
console.log(" css extract css files");
142148
console.log("args:");
143149
console.log(" --target ./path path to build folder");
144150
console.log("flags:");
@@ -510,7 +516,7 @@ function buildAce(options, callback) {
510516
return;
511517
} else {
512518
cssUpdated = true;
513-
extractCss(options, function() {
519+
extractCss(function() {
514520
if (callback)
515521
return callback();
516522
console.log("Finished building " + getTargetDir(options));
@@ -520,76 +526,64 @@ function buildAce(options, callback) {
520526
}
521527
var cssUpdated = false;
522528

523-
function extractCss(options, callback) {
524-
var dir = BUILD_DIR + "/src" + (options.noconflict ? "-noconflict" : "");
525-
var filenames = fs.readdirSync(dir);
526-
var css = "";
529+
function extractCss(callback) {
527530
var images = {};
528-
var usedCss = {};
529-
filenames.forEach(function(filename) {
530-
var stat = fs.statSync(dir + "/" + filename);
531-
if (stat.isDirectory()) return;
532-
var value = fs.readFileSync(dir + "/" + filename, "utf8");
533-
534-
var cssImports = detectCssImports(value);
535-
536-
if (/theme-/.test(filename)) {
537-
var name = filename.replace(/^theme-|\.js$/g, "");
538-
var themeCss = "";
539-
for (var i in cssImports) {
540-
themeCss += cssImports[i];
541-
}
542-
themeCss = extractImages(themeCss, name, "..");
543-
build.writeToFile({code: themeCss}, {
544-
outputFolder: BUILD_DIR + "/css/theme",
545-
outputFile: name + ".css"
546-
}, function() {});
547-
} else if (cssImports) {
548-
css += "\n/*" + filename + "*/";
549-
for (var i in cssImports) {
550-
if (usedCss[cssImports[i]]) continue;
551-
usedCss[cssImports[i]] = true;
552-
css += "\n" + cssImports[i];
553-
}
531+
var cssImports = {};
532+
var fileName = "";
533+
534+
var extensions = jsFileList("src/ext");
535+
var keybinding = jsFileList("src/keyboard");
536+
var themes = jsFileList("src/theme");
537+
var dom = require("./src/lib/dom");
538+
var index = 0;
539+
dom.importCssString = function(value, id) {
540+
if (!id) id = fileName + (index++);
541+
cssImports[id] = value;
542+
};
543+
var loadFile = function(path) {
544+
fileName = path;
545+
require(path);
546+
};
547+
themes.forEach(function(name) {
548+
cssImports = {};
549+
loadFile("./src/theme/" + name);
550+
delete require.cache[require.resolve("./src/theme/" + name)];
551+
552+
var themeCss = "";
553+
for (var i in cssImports) {
554+
themeCss += cssImports[i];
554555
}
556+
themeCss = extractImages(themeCss, name, "..");
557+
build.writeToFile({code: themeCss}, {
558+
outputFolder: BUILD_DIR + "/css/theme",
559+
outputFile: name + ".css"
560+
}, function() {});
561+
});
562+
563+
cssImports = {};
564+
loadFile("./src/ace");
565+
extensions.forEach(function(name) {
566+
loadFile("./src/ext/" + name);
567+
});
568+
keybinding.forEach(function(name) {
569+
loadFile("./src/keyboard/" + name);
555570
});
571+
572+
var css = "";
573+
for (var i in cssImports) {
574+
css += "\n/*" + i + "*/";
575+
css += "\n" + cssImports[i];
576+
}
556577

557578
css = extractImages(css, "main", ".").replace(/^\s*/gm, "");
558579
build.writeToFile({code: css}, {
559580
outputFolder: BUILD_DIR + "/css",
560581
outputFile: "ace.css"
561582
}, function() {
562583
saveImages();
563-
callback();
584+
callback && callback();
564585
});
565586

566-
function detectCssImports(code) {
567-
code = code.replace(/^\s*\/\/.+|^\s*\/\*[\s\S]*?\*\//gm, "");
568-
569-
var stringRegex = /^("(?:[^"\\]|\\[\d\D])*"|'(?:[^'\\]|\\[\d\D])*'|)/;
570-
var importCssRegex = /\.importCssString\(\s*(?:([^,)"']+)|["'])/g;
571-
572-
var match;
573-
var cssImports;
574-
while (match = importCssRegex.exec(code)) {
575-
if (match[1]) {
576-
var locationRegex = new RegExp("[^.]" + match[1] + /\s*=\s*['"]/.source);
577-
match = locationRegex.exec(code);
578-
if (!match) continue;
579-
}
580-
var index = match.index + match[0].length - 1;
581-
if (cssImports && cssImports[index]) continue;
582-
var cssString = stringRegex.exec(code.slice(index))[0];
583-
if (!cssString) continue;
584-
if (!cssImports) cssImports = {};
585-
cssImports[index] = cssString.slice(1, -1).replace(/\\(.|\n)/g, function(_, ch) {
586-
if (ch == "n") return "";
587-
return ch;
588-
});
589-
}
590-
return cssImports;
591-
}
592-
593587
function extractImages(css, name, directory) {
594588
var imageCounter = 0;
595589
return css.replace(

‎src/autocomplete/popup.js

+49-49
Original file line numberDiff line numberDiff line change
@@ -298,55 +298,55 @@ var AcePopup = function(parentNode) {
298298
return popup;
299299
};
300300

301-
dom.importCssString("\
302-
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {\
303-
background-color: #CAD6FA;\
304-
z-index: 1;\
305-
}\
306-
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {\
307-
background-color: #3a674e;\
308-
}\
309-
.ace_editor.ace_autocomplete .ace_line-hover {\
310-
border: 1px solid #abbffe;\
311-
margin-top: -1px;\
312-
background: rgba(233,233,253,0.4);\
313-
position: absolute;\
314-
z-index: 2;\
315-
}\
316-
.ace_dark.ace_editor.ace_autocomplete .ace_line-hover {\
317-
border: 1px solid rgba(109, 150, 13, 0.8);\
318-
background: rgba(58, 103, 78, 0.62);\
319-
}\
320-
.ace_completion-meta {\
321-
opacity: 0.5;\
322-
margin: 0.9em;\
323-
}\
324-
.ace_completion-message {\
325-
color: blue;\
326-
}\
327-
.ace_editor.ace_autocomplete .ace_completion-highlight{\
328-
color: #2d69c7;\
329-
}\
330-
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{\
331-
color: #93ca12;\
332-
}\
333-
.ace_editor.ace_autocomplete {\
334-
width: 300px;\
335-
z-index: 200000;\
336-
border: 1px lightgray solid;\
337-
position: fixed;\
338-
box-shadow: 2px 3px 5px rgba(0,0,0,.2);\
339-
line-height: 1.4;\
340-
background: #fefefe;\
341-
color: #111;\
342-
}\
343-
.ace_dark.ace_editor.ace_autocomplete {\
344-
border: 1px #484747 solid;\
345-
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);\
346-
line-height: 1.4;\
347-
background: #25282c;\
348-
color: #c1c1c1;\
349-
}", "autocompletion.css", false);
301+
dom.importCssString(`
302+
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
303+
background-color: #CAD6FA;
304+
z-index: 1;
305+
}
306+
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
307+
background-color: #3a674e;
308+
}
309+
.ace_editor.ace_autocomplete .ace_line-hover {
310+
border: 1px solid #abbffe;
311+
margin-top: -1px;
312+
background: rgba(233,233,253,0.4);
313+
position: absolute;
314+
z-index: 2;
315+
}
316+
.ace_dark.ace_editor.ace_autocomplete .ace_line-hover {
317+
border: 1px solid rgba(109, 150, 13, 0.8);
318+
background: rgba(58, 103, 78, 0.62);
319+
}
320+
.ace_completion-meta {
321+
opacity: 0.5;
322+
margin: 0.9em;
323+
}
324+
.ace_completion-message {
325+
color: blue;
326+
}
327+
.ace_editor.ace_autocomplete .ace_completion-highlight{
328+
color: #2d69c7;
329+
}
330+
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{
331+
color: #93ca12;
332+
}
333+
.ace_editor.ace_autocomplete {
334+
width: 300px;
335+
z-index: 200000;
336+
border: 1px lightgray solid;
337+
position: fixed;
338+
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
339+
line-height: 1.4;
340+
background: #fefefe;
341+
color: #111;
342+
}
343+
.ace_dark.ace_editor.ace_autocomplete {
344+
border: 1px #484747 solid;
345+
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);
346+
line-height: 1.4;
347+
background: #25282c;
348+
color: #c1c1c1;
349+
}`, "autocompletion.css", false);
350350

351351
exports.AcePopup = AcePopup;
352352
exports.$singleLineEditor = $singleLineEditor;

‎src/ext/code_lens.js

+23-23
Original file line numberDiff line numberDiff line change
@@ -209,26 +209,26 @@ require("../config").defineOptions(Editor.prototype, "editor", {
209209
}
210210
});
211211

212-
dom.importCssString("\
213-
.ace_codeLens {\
214-
position: absolute;\
215-
color: #aaa;\
216-
font-size: 88%;\
217-
background: inherit;\
218-
width: 100%;\
219-
display: flex;\
220-
align-items: flex-end;\
221-
pointer-events: none;\
222-
}\
223-
.ace_codeLens > a {\
224-
cursor: pointer;\
225-
pointer-events: auto;\
226-
}\
227-
.ace_codeLens > a:hover {\
228-
color: #0000ff;\
229-
text-decoration: underline;\
230-
}\
231-
.ace_dark > .ace_codeLens > a:hover {\
232-
color: #4e94ce;\
233-
}\
234-
", "codelense.css", false);
212+
dom.importCssString(`
213+
.ace_codeLens {
214+
position: absolute;
215+
color: #aaa;
216+
font-size: 88%;
217+
background: inherit;
218+
width: 100%;
219+
display: flex;
220+
align-items: flex-end;
221+
pointer-events: none;
222+
}
223+
.ace_codeLens > a {
224+
cursor: pointer;
225+
pointer-events: auto;
226+
}
227+
.ace_codeLens > a:hover {
228+
color: #0000ff;
229+
text-decoration: underline;
230+
}
231+
.ace_dark > .ace_codeLens > a:hover {
232+
color: #4e94ce;
233+
}
234+
`, "codelense.css", false);

‎src/ext/error_marker.js

+34-34
Original file line numberDiff line numberDiff line change
@@ -148,37 +148,37 @@ exports.showErrorMarker = function(editor, dir) {
148148
};
149149

150150

151-
dom.importCssString("\
152-
.error_widget_wrapper {\
153-
background: inherit;\
154-
color: inherit;\
155-
border:none\
156-
}\
157-
.error_widget {\
158-
border-top: solid 2px;\
159-
border-bottom: solid 2px;\
160-
margin: 5px 0;\
161-
padding: 10px 40px;\
162-
white-space: pre-wrap;\
163-
}\
164-
.error_widget.ace_error, .error_widget_arrow.ace_error{\
165-
border-color: #ff5a5a\
166-
}\
167-
.error_widget.ace_warning, .error_widget_arrow.ace_warning{\
168-
border-color: #F1D817\
169-
}\
170-
.error_widget.ace_info, .error_widget_arrow.ace_info{\
171-
border-color: #5a5a5a\
172-
}\
173-
.error_widget.ace_ok, .error_widget_arrow.ace_ok{\
174-
border-color: #5aaa5a\
175-
}\
176-
.error_widget_arrow {\
177-
position: absolute;\
178-
border: solid 5px;\
179-
border-top-color: transparent!important;\
180-
border-right-color: transparent!important;\
181-
border-left-color: transparent!important;\
182-
top: -5px;\
183-
}\
184-
", "error_marker.css", false);
151+
dom.importCssString(`
152+
.error_widget_wrapper {
153+
background: inherit;
154+
color: inherit;
155+
border:none
156+
}
157+
.error_widget {
158+
border-top: solid 2px;
159+
border-bottom: solid 2px;
160+
margin: 5px 0;
161+
padding: 10px 40px;
162+
white-space: pre-wrap;
163+
}
164+
.error_widget.ace_error, .error_widget_arrow.ace_error{
165+
border-color: #ff5a5a
166+
}
167+
.error_widget.ace_warning, .error_widget_arrow.ace_warning{
168+
border-color: #F1D817
169+
}
170+
.error_widget.ace_info, .error_widget_arrow.ace_info{
171+
border-color: #5a5a5a
172+
}
173+
.error_widget.ace_ok, .error_widget_arrow.ace_ok{
174+
border-color: #5aaa5a
175+
}
176+
.error_widget_arrow {
177+
position: absolute;
178+
border: solid 5px;
179+
border-top-color: transparent!important;
180+
border-right-color: transparent!important;
181+
border-left-color: transparent!important;
182+
top: -5px;
183+
}
184+
`, "error_marker.css", false);

0 commit comments

Comments
 (0)