From ddc5cc0ccfcad34efa899b545c43667c2459d3d4 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 26 May 2017 20:48:26 +0300 Subject: [PATCH] beautify: option for indenting conditional blocks --- _locales/en/messages.json | 4 +++ beautify/beautify-css-mod.js | 56 +++++++++++++++++++++--------------- edit.js | 16 +++++++---- prefs.js | 2 +- 4 files changed, 48 insertions(+), 30 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index b4ed254c..c3108037 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -498,6 +498,10 @@ "message": "Beautify", "description": "Label for the CSS-beautifier button on the edit style page" }, + "styleBeautifyIndentConditional": { + "message": "Indent @media, @supports", + "description": "CSS-beautifier option" + }, "styleCancelEditLabel": { "message": "Back to manage", "description": "Label for cancel button for style editing" diff --git a/beautify/beautify-css-mod.js b/beautify/beautify-css-mod.js index e7524144..c2e90f72 100644 --- a/beautify/beautify-css-mod.js +++ b/beautify/beautify-css-mod.js @@ -100,27 +100,26 @@ var newlinesFromLastWSEat = 0; var indentSize = options.indent_size ? parseInt(options.indent_size, 10) : 4; var indentCharacter = options.indent_char || ' '; - var preserve_newlines = (options.preserve_newlines === undefined) ? false : options.preserve_newlines; - var selectorSeparatorNewline = (options.selector_separator_newline === undefined) ? true : options.selector_separator_newline; - var end_with_newline = (options.end_with_newline === undefined) ? false : options.end_with_newline; - var newline_between_rules = (options.newline_between_rules === undefined) ? true : options.newline_between_rules; - var space_around_combinator = (options.space_around_combinator === undefined) ? false : options.space_around_combinator; - space_around_combinator = space_around_combinator || ((options.space_around_selector_separator === undefined) ? false : options.space_around_selector_separator); var eol = options.eol ? options.eol : 'auto'; + var { + preserve_newlines = false, + selector_separator_newline = true, + end_with_newline = false, + newline_between_rules = true, + space_around_combinator = true, + indent_conditional = true, + newline_between_properties = true, + newline_before_open_brace = false, + newline_after_open_brace = true, + newline_before_close_brace = true, + } = options; - /* STYLUS: hack start */ - const defaultOption = (opt, defaultValue) => opt === undefined ? defaultValue : opt; - var newline_between_properties = defaultOption(options.newline_between_properties, true); - var newline_before_open_brace = defaultOption(options.newline_before_open_brace, false); - var newline_after_open_brace = defaultOption(options.newline_after_open_brace, true); - var newline_before_close_brace = defaultOption(options.newline_before_close_brace, true); var translatePos = (options.translate_positions || [])[0]; var translatePosIndex = 0; var translatePosLine = translatePos && translatePos.line; var translatePosCol = translatePos && translatePos.ch; var inputPosLine = 0, inputPosCol = 0; var outputPosLine = 0, outputPosCol = 0; - /* STYLUS: hack end */ if (options.indent_with_tabs) { indentCharacter = '\t'; @@ -304,9 +303,11 @@ newline_before_open_brace ? print.newLine() : print.singleSpace(); output.push(ch); outputPosCol++; - indent(); + if (!enteringConditionalGroup || indent_conditional) { + indent(); + } if (!eatWhitespace(true)) { - newline_after_open_brace ? print.newLine() : print.singleSpace(); + newline_after_open_brace || enteringConditionalGroup ? print.newLine() : print.singleSpace(); } }; print["}"] = function(newline) { @@ -315,7 +316,7 @@ } output.push('}'); outputPosCol++; - if (!eatWhitespace(true)) { + if (!eatWhitespace(true) && peek(true) != '}') { print.newLine(); } }; @@ -386,6 +387,7 @@ var insideRule = false; var insidePropertyValue = false; var enteringConditionalGroup = false; + var insideConditionalGroup = false; var top_ch = ''; var last_top_ch = ''; @@ -438,13 +440,16 @@ print.singleSpace(); } - variableOrRule = variableOrRule.replace(/\s$/, ''); + variableOrRule = '@' + variableOrRule.replace(/\s$/, ''); // might be a nesting at-rule if (variableOrRule in css_beautify.NESTED_AT_RULE) { nestedLevel += 1; if (variableOrRule in css_beautify.CONDITIONAL_GROUP_RULE) { enteringConditionalGroup = true; + if (!indent_conditional) { + nestedLevel--; + } } } } @@ -467,6 +472,7 @@ // when entering conditional groups, only rulesets are allowed if (enteringConditionalGroup) { enteringConditionalGroup = false; + insideConditionalGroup = true; insideRule = (indentLevel > nestedLevel); } else { // otherwise, declarations are also allowed @@ -478,10 +484,14 @@ print["}"](true); insideRule = false; insidePropertyValue = false; - if (nestedLevel) { + if (nestedLevel && (indent_conditional || !insideConditionalGroup)) { nestedLevel--; } - if (newlinesFromLastWSEat < 2 && newline_between_rules && indentLevel === 0) { + insideConditionalGroup = false; + if (newlinesFromLastWSEat < 2 + && newline_between_rules + //&& indentLevel === 0 + && peek(true) != '}') { print.newLine(true); } } else if (ch === ":") { @@ -553,7 +563,7 @@ } else if (ch === ',') { output.push(ch); outputPosCol++; - if (!eatWhitespace(true) && selectorSeparatorNewline && !insidePropertyValue && parenLevel < 1) { + if (!eatWhitespace(true) && selector_separator_newline && !insidePropertyValue && parenLevel < 1) { print.newLine(); } else { print.singleSpace(); @@ -624,12 +634,12 @@ // also in CONDITIONAL_GROUP_RULE below "@media": true, "@supports": true, - "@document": true + "@-moz-document": true }; css_beautify.CONDITIONAL_GROUP_RULE = { "@media": true, "@supports": true, - "@document": true + "@-moz-document": true }; /*global define */ @@ -652,4 +662,4 @@ global.css_beautify = css_beautify; } -}()); \ No newline at end of file +}()); diff --git a/edit.js b/edit.js index dbbedf18..702c8046 100644 --- a/edit.js +++ b/edit.js @@ -1054,6 +1054,9 @@ function beautify(event) { optionHtml("border: none;", "newline_between_properties", true) + optionHtml("display: block;", "newline_before_close_brace", true) + optionHtml("}", "newline_between_rules") + + `' + "" + "
"); @@ -1096,13 +1099,14 @@ function beautify(event) { }, 0); }); - document.querySelector(".beautify-options").addEventListener("change", function(event) { - var value = event.target.selectedIndex > 0; - options[event.target.dataset.option] = value; - prefs.set("editor.beautify", options); - event.target.parentNode.setAttribute("newline", value.toString()); + document.querySelector('.beautify-options').onchange = ({target}) => { + const value = target.type == 'checkbox' ? target.checked : target.selectedIndex > 0; + prefs.set('editor.beautify', Object.assign(options, {[target.dataset.option]: value})); + if (target.parentNode.hasAttribute('newline')) { + target.parentNode.setAttribute('newline', value.toString()); + } doBeautify(); - }); + }; function optionHtml(label, optionName, indent) { var value = options[optionName]; diff --git a/prefs.js b/prefs.js index c632d1e9..00b74663 100644 --- a/prefs.js +++ b/prefs.js @@ -37,7 +37,7 @@ var prefs = new function Prefs() { newline_before_close_brace: true, newline_between_rules: false, end_with_newline: false, - space_around_selector_separator: true, + indent_conditional: true, }, 'editor.lintDelay': 500, // lint gutter marker update delay, ms 'editor.lintReportDelay': 4500, // lint report update delay, ms