Skip to content

Commit

Permalink
fix: better way to extract css for csp environments
Browse files Browse the repository at this point in the history
  • Loading branch information
@nightwing
nightwing committed Aug 16, 2022
1 parent 6ad3123 commit 1b0612b
Show file tree
Hide file tree
Showing 9 changed files with 254 additions and 263 deletions.
122 changes: 58 additions & 64 deletions Makefile.dryice.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,6 @@ function main(args) {
return updateModes();
}

if (args.indexOf("--reuse") === -1) {
console.log("updating files in lib/ace");
generateAmdModules();
}

var type = "minimal";
args = args.map(function(x) {
if (x[0] == "-" && x[1] != "-")
Expand All @@ -112,6 +107,16 @@ function main(args) {
if (args.indexOf("--h") != -1 || args.indexOf("-h") != -1 || args.indexOf("--help") != -1) {
return showHelp();
}

if (type == "css") {
return extractCss();
}

if (args.indexOf("--reuse") === -1) {
console.log("updating files in lib/ace");
generateAmdModules();
}

if (type == "minimal") {
buildAce({
compress: args.indexOf("--m") != -1,
Expand Down Expand Up @@ -139,6 +144,7 @@ function showHelp(type) {
console.log(" demo Runs demo build of Ace");
console.log(" full all of above");
console.log(" highlighter ");
console.log(" css extract css files");
console.log("args:");
console.log(" --target ./path path to build folder");
console.log("flags:");
Expand Down Expand Up @@ -510,7 +516,7 @@ function buildAce(options, callback) {
return;
} else {
cssUpdated = true;
extractCss(options, function() {
extractCss(function() {
if (callback)
return callback();
console.log("Finished building " + getTargetDir(options));
Expand All @@ -520,76 +526,64 @@ function buildAce(options, callback) {
}
var cssUpdated = false;

function extractCss(options, callback) {
var dir = BUILD_DIR + "/src" + (options.noconflict ? "-noconflict" : "");
var filenames = fs.readdirSync(dir);
var css = "";
function extractCss(callback) {
var images = {};
var usedCss = {};
filenames.forEach(function(filename) {
var stat = fs.statSync(dir + "/" + filename);
if (stat.isDirectory()) return;
var value = fs.readFileSync(dir + "/" + filename, "utf8");

var cssImports = detectCssImports(value);

if (/theme-/.test(filename)) {
var name = filename.replace(/^theme-|\.js$/g, "");
var themeCss = "";
for (var i in cssImports) {
themeCss += cssImports[i];
}
themeCss = extractImages(themeCss, name, "..");
build.writeToFile({code: themeCss}, {
outputFolder: BUILD_DIR + "/css/theme",
outputFile: name + ".css"
}, function() {});
} else if (cssImports) {
css += "\n/*" + filename + "*/";
for (var i in cssImports) {
if (usedCss[cssImports[i]]) continue;
usedCss[cssImports[i]] = true;
css += "\n" + cssImports[i];
}
var cssImports = {};
var fileName = "";

var extensions = jsFileList("src/ext");
var keybinding = jsFileList("src/keyboard");
var themes = jsFileList("src/theme");
var dom = require("./src/lib/dom");
var index = 0;
dom.importCssString = function(value, id) {
if (!id) id = fileName + (index++);
cssImports[id] = value;
};
var loadFile = function(path) {
fileName = path;
require(path);
};
themes.forEach(function(name) {
cssImports = {};
loadFile("./src/theme/" + name);
delete require.cache[require.resolve("./src/theme/" + name)];

var themeCss = "";
for (var i in cssImports) {
themeCss += cssImports[i];
}
themeCss = extractImages(themeCss, name, "..");
build.writeToFile({code: themeCss}, {
outputFolder: BUILD_DIR + "/css/theme",
outputFile: name + ".css"
}, function() {});
});

cssImports = {};
loadFile("./src/ace");
extensions.forEach(function(name) {
loadFile("./src/ext/" + name);
});
keybinding.forEach(function(name) {
loadFile("./src/keyboard/" + name);
});

var css = "";
for (var i in cssImports) {
css += "\n/*" + i + "*/";
css += "\n" + cssImports[i];
}

css = extractImages(css, "main", ".").replace(/^\s*/gm, "");
build.writeToFile({code: css}, {
outputFolder: BUILD_DIR + "/css",
outputFile: "ace.css"
}, function() {
saveImages();
callback();
callback && callback();
});

function detectCssImports(code) {
code = code.replace(/^\s*\/\/.+|^\s*\/\*[\s\S]*?\*\//gm, "");

var stringRegex = /^("(?:[^"\\]|\\[\d\D])*"|'(?:[^'\\]|\\[\d\D])*'|)/;
var importCssRegex = /\.importCssString\(\s*(?:([^,)"']+)|["'])/g;

var match;
var cssImports;
while (match = importCssRegex.exec(code)) {
if (match[1]) {
var locationRegex = new RegExp("[^.]" + match[1] + /\s*=\s*['"]/.source);
match = locationRegex.exec(code);
if (!match) continue;
}
var index = match.index + match[0].length - 1;
if (cssImports && cssImports[index]) continue;
var cssString = stringRegex.exec(code.slice(index))[0];
if (!cssString) continue;
if (!cssImports) cssImports = {};
cssImports[index] = cssString.slice(1, -1).replace(/\\(.|\n)/g, function(_, ch) {
if (ch == "n") return "";
return ch;
});
}
return cssImports;
}

function extractImages(css, name, directory) {
var imageCounter = 0;
return css.replace(
Expand Down
98 changes: 49 additions & 49 deletions src/autocomplete/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,55 +298,55 @@ var AcePopup = function(parentNode) {
return popup;
};

dom.importCssString("\
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {\
background-color: #CAD6FA;\
z-index: 1;\
}\
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {\
background-color: #3a674e;\
}\
.ace_editor.ace_autocomplete .ace_line-hover {\
border: 1px solid #abbffe;\
margin-top: -1px;\
background: rgba(233,233,253,0.4);\
position: absolute;\
z-index: 2;\
}\
.ace_dark.ace_editor.ace_autocomplete .ace_line-hover {\
border: 1px solid rgba(109, 150, 13, 0.8);\
background: rgba(58, 103, 78, 0.62);\
}\
.ace_completion-meta {\
opacity: 0.5;\
margin: 0.9em;\
}\
.ace_completion-message {\
color: blue;\
}\
.ace_editor.ace_autocomplete .ace_completion-highlight{\
color: #2d69c7;\
}\
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{\
color: #93ca12;\
}\
.ace_editor.ace_autocomplete {\
width: 300px;\
z-index: 200000;\
border: 1px lightgray solid;\
position: fixed;\
box-shadow: 2px 3px 5px rgba(0,0,0,.2);\
line-height: 1.4;\
background: #fefefe;\
color: #111;\
}\
.ace_dark.ace_editor.ace_autocomplete {\
border: 1px #484747 solid;\
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);\
line-height: 1.4;\
background: #25282c;\
color: #c1c1c1;\
}", "autocompletion.css", false);
dom.importCssString(`
.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
background-color: #CAD6FA;
z-index: 1;
}
.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
background-color: #3a674e;
}
.ace_editor.ace_autocomplete .ace_line-hover {
border: 1px solid #abbffe;
margin-top: -1px;
background: rgba(233,233,253,0.4);
position: absolute;
z-index: 2;
}
.ace_dark.ace_editor.ace_autocomplete .ace_line-hover {
border: 1px solid rgba(109, 150, 13, 0.8);
background: rgba(58, 103, 78, 0.62);
}
.ace_completion-meta {
opacity: 0.5;
margin: 0.9em;
}
.ace_completion-message {
color: blue;
}
.ace_editor.ace_autocomplete .ace_completion-highlight{
color: #2d69c7;
}
.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{
color: #93ca12;
}
.ace_editor.ace_autocomplete {
width: 300px;
z-index: 200000;
border: 1px lightgray solid;
position: fixed;
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
line-height: 1.4;
background: #fefefe;
color: #111;
}
.ace_dark.ace_editor.ace_autocomplete {
border: 1px #484747 solid;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.51);
line-height: 1.4;
background: #25282c;
color: #c1c1c1;
}`, "autocompletion.css", false);

exports.AcePopup = AcePopup;
exports.$singleLineEditor = $singleLineEditor;
46 changes: 23 additions & 23 deletions src/ext/code_lens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,26 +209,26 @@ require("../config").defineOptions(Editor.prototype, "editor", {
}
});

dom.importCssString("\
.ace_codeLens {\
position: absolute;\
color: #aaa;\
font-size: 88%;\
background: inherit;\
width: 100%;\
display: flex;\
align-items: flex-end;\
pointer-events: none;\
}\
.ace_codeLens > a {\
cursor: pointer;\
pointer-events: auto;\
}\
.ace_codeLens > a:hover {\
color: #0000ff;\
text-decoration: underline;\
}\
.ace_dark > .ace_codeLens > a:hover {\
color: #4e94ce;\
}\
", "codelense.css", false);
dom.importCssString(`
.ace_codeLens {
position: absolute;
color: #aaa;
font-size: 88%;
background: inherit;
width: 100%;
display: flex;
align-items: flex-end;
pointer-events: none;
}
.ace_codeLens > a {
cursor: pointer;
pointer-events: auto;
}
.ace_codeLens > a:hover {
color: #0000ff;
text-decoration: underline;
}
.ace_dark > .ace_codeLens > a:hover {
color: #4e94ce;
}
`, "codelense.css", false);
68 changes: 34 additions & 34 deletions src/ext/error_marker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,37 +148,37 @@ exports.showErrorMarker = function(editor, dir) {
};


dom.importCssString("\
.error_widget_wrapper {\
background: inherit;\
color: inherit;\
border:none\
}\
.error_widget {\
border-top: solid 2px;\
border-bottom: solid 2px;\
margin: 5px 0;\
padding: 10px 40px;\
white-space: pre-wrap;\
}\
.error_widget.ace_error, .error_widget_arrow.ace_error{\
border-color: #ff5a5a\
}\
.error_widget.ace_warning, .error_widget_arrow.ace_warning{\
border-color: #F1D817\
}\
.error_widget.ace_info, .error_widget_arrow.ace_info{\
border-color: #5a5a5a\
}\
.error_widget.ace_ok, .error_widget_arrow.ace_ok{\
border-color: #5aaa5a\
}\
.error_widget_arrow {\
position: absolute;\
border: solid 5px;\
border-top-color: transparent!important;\
border-right-color: transparent!important;\
border-left-color: transparent!important;\
top: -5px;\
}\
", "error_marker.css", false);
dom.importCssString(`
.error_widget_wrapper {
background: inherit;
color: inherit;
border:none
}
.error_widget {
border-top: solid 2px;
border-bottom: solid 2px;
margin: 5px 0;
padding: 10px 40px;
white-space: pre-wrap;
}
.error_widget.ace_error, .error_widget_arrow.ace_error{
border-color: #ff5a5a
}
.error_widget.ace_warning, .error_widget_arrow.ace_warning{
border-color: #F1D817
}
.error_widget.ace_info, .error_widget_arrow.ace_info{
border-color: #5a5a5a
}
.error_widget.ace_ok, .error_widget_arrow.ace_ok{
border-color: #5aaa5a
}
.error_widget_arrow {
position: absolute;
border: solid 5px;
border-top-color: transparent!important;
border-right-color: transparent!important;
border-left-color: transparent!important;
top: -5px;
}
`, "error_marker.css", false);
Loading

0 comments on commit 1b0612b

Please sign in to comment.