Improved less and sass variable identification with at rule pairing genericity

This commit is contained in:
MHO 2023-04-23 15:13:44 +02:00
parent bda9e958fa
commit d754bd3114

View File

@ -54,18 +54,18 @@ function Beautifier(source_text, options) {
// https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
this.NESTED_AT_RULE = {
"@page": true,
"@font-face": true,
"@keyframes": true,
"page": true,
"font-face": true,
"keyframes": true,
// also in CONDITIONAL_GROUP_RULE below
"@media": true,
"@supports": true,
"@document": true
"media": true,
"supports": true,
"document": true
};
this.CONDITIONAL_GROUP_RULE = {
"@media": true,
"@supports": true,
"@document": true
"media": true,
"supports": true,
"document": true
};
this.NON_SEMICOLON_NEWLINE_PROPERTY = [
"grid-template-areas",
@ -193,8 +193,6 @@ Beautifier.prototype.beautify = function() {
// label { content: blue }
var insidePropertyValue = false;
var enteringConditionalGroup = false;
var insideAtExtend = false;
var insideAtImport = false;
var insideNonNestedAtRule = false;
var insideScssMap = false;
var topCharacter = this._ch;
@ -250,10 +248,32 @@ Beautifier.prototype.beautify = function() {
// Ensures any new lines following the comment are preserved
this.eatWhitespace(true);
} else if (this._ch === '@' || this._ch === '$') {
} else if (this._ch === '$') {
this.preserveSingleSpace(isAfterSpace);
// deal with less propery mixins @{...}
this.print_string(this._ch);
// strip trailing space, if present, for hash property checks
var variable = this._input.peekUntilAfter(/[: ,;{}()[\]\/='"]/g);
if (variable.match(/[ :]$/)) {
// we have a variable or pseudo-class, add it and insert one space before continuing
variable = this.eatString(": ").replace(/\s$/, '');
this.print_string(variable);
this._output.space_before_token = true;
}
variable = variable.replace(/\s$/, '');
// might be sass variable
if(parenLevel === 0 && variable.indexOf(':') !== -1) {
insidePropertyValue = true;
this.indent();
}
} else if (this._ch === '@') {
this.preserveSingleSpace(isAfterSpace);
// deal with less property mixins @{...}
if (this._input.peek() === '{') {
this.print_string(this._ch + this.eatString('}'));
} else {
@ -271,25 +291,20 @@ Beautifier.prototype.beautify = function() {
variableOrRule = variableOrRule.replace(/\s$/, '');
if (variableOrRule === 'extend') {
insideAtExtend = true;
} else if (variableOrRule === 'import') {
insideAtImport = true;
}
// might be less variable
if(parenLevel === 0 && variableOrRule.indexOf(':') !== -1) {
insidePropertyValue = true;
this.indent();
// might be a nesting at-rule
if (variableOrRule in this.NESTED_AT_RULE) {
// might be a nesting at-rule
} else if (variableOrRule in this.NESTED_AT_RULE) {
this._nestedLevel += 1;
if (variableOrRule in this.CONDITIONAL_GROUP_RULE) {
enteringConditionalGroup = true;
}
// might be less variable
} else if (!insideRule && parenLevel === 0 && variableOrRule.indexOf(':') !== -1) {
insidePropertyValue = true;
this.indent();
// might be a non-nested at-rule
} else if( ! ( variableOrRule in this.NESTED_AT_RULE ) ) {
} else if( parenLevel === 0 && !insidePropertyValue ) {
insideNonNestedAtRule = true;
}
}
@ -302,6 +317,9 @@ Beautifier.prototype.beautify = function() {
this.outdent();
}
// non nested at rule becomes nested
insideNonNestedAtRule = false;
// when entering conditional groups, only rulesets are allowed
if (enteringConditionalGroup) {
enteringConditionalGroup = false;
@ -342,9 +360,7 @@ Beautifier.prototype.beautify = function() {
if (previous_ch === '{') {
this._output.trim(true);
}
insideAtImport = false;
insideAtExtend = false;
insideNonNestedAtRule = false;
if (insidePropertyValue) {
this.outdent();
insidePropertyValue = false;
@ -378,7 +394,7 @@ Beautifier.prototype.beautify = function() {
}
}
if ((insideRule || enteringConditionalGroup) && !(this._input.lookBack("&") || this.foundNestedPseudoClass()) && !this._input.lookBack("(") && !insideAtExtend && !insideNonNestedAtRule && parenLevel === 0) {
if ((insideRule || enteringConditionalGroup) && !(this._input.lookBack("&") || this.foundNestedPseudoClass()) && !this._input.lookBack("(") && !insideNonNestedAtRule && parenLevel === 0) {
// 'property: value' delimiter
// which could be in a conditional group query
@ -418,8 +434,6 @@ Beautifier.prototype.beautify = function() {
this.outdent();
insidePropertyValue = false;
}
insideAtExtend = false;
insideAtImport = false;
insideNonNestedAtRule = false;
this.print_string(this._ch);
this.eatWhitespace(true);
@ -485,7 +499,7 @@ Beautifier.prototype.beautify = function() {
} else if (this._ch === ',') {
this.print_string(this._ch);
this.eatWhitespace(true);
if (this._options.selector_separator_newline && (!insidePropertyValue || insideScssMap) && parenLevel === 0 && !insideAtImport && !insideAtExtend && !insideNonNestedAtRule) {
if (this._options.selector_separator_newline && (!insidePropertyValue || insideScssMap) && parenLevel === 0 && !insideNonNestedAtRule) {
this._output.add_new_line();
} else {
this._output.space_before_token = true;