less 4.8.0 → 4.9.0

package/lib/less/functions/math-helper.js

@@ -1,7 +1,14 @@
 import Dimension from '../tree/dimension.js';
 
-const MathHelper = (fn, unit, n) => {
+const MathHelper = (fn, unit, cssEvaluable, n) => {
     if (!(n instanceof Dimension)) {
+        // A runtime CSS value such as var()/env() stays an unevaluated call and
+        // cannot be resolved to a number at compile time. Only functions with a
+        // CSS equivalent may be left for the browser; the rest (percentage, ceil,
+        // floor, round) have no CSS form and keep erroring on such input.
+        if (cssEvaluable && n && n.type === 'Call') {
+            return undefined;
+        }
         throw { type: 'Argument', message: 'argument must be a number' };
     }
     if (unit === null) {

package/lib/less/functions/math.js

@@ -1,29 +1,30 @@
 import mathHelper from './math-helper.js';
 
 const mathFunctions = {
-    // name,  unit
-    ceil:  null,
-    floor: null,
-    sqrt:  null,
-    abs:   null,
-    tan:   '',
-    sin:   '',
-    cos:   '',
-    atan:  'rad',
-    asin:  'rad',
-    acos:  'rad'
+    // name:  [unit, has a CSS equivalent that the browser can evaluate]
+    ceil:  [null, false],
+    floor: [null, false],
+    sqrt:  [null, true],
+    abs:   [null, true],
+    tan:   ['', true],
+    sin:   ['', true],
+    cos:   ['', true],
+    atan:  ['rad', true],
+    asin:  ['rad', true],
+    acos:  ['rad', true]
 };
 
 for (const f in mathFunctions) {
     // eslint-disable-next-line no-prototype-builtins
     if (mathFunctions.hasOwnProperty(f)) {
-        mathFunctions[f] = mathHelper.bind(null, Math[f], mathFunctions[f]);
+        const [unit, cssEvaluable] = mathFunctions[f];
+        mathFunctions[f] = mathHelper.bind(null, Math[f], unit, cssEvaluable);
     }
 }
 
 mathFunctions.round = (n, f) => {
     const fraction = typeof f === 'undefined' ? 0 : f.value;
-    return mathHelper(num => num.toFixed(fraction), null, n);
+    return mathHelper(num => num.toFixed(fraction), null, false, n);
 };
 
 export default mathFunctions;

package/lib/less/functions/number.js

@@ -88,7 +88,7 @@ export default {
         return new Dimension(Math.pow(x.value, y.value), x.unit);
     },
     percentage: function (n) {
-        const result = mathHelper(num => num * 100, '%', n);
+        const result = mathHelper(num => num * 100, '%', false, n);
 
         return result;
     }

package/lib/less/functions/string.js

@@ -7,9 +7,12 @@ export default {
         return new Quoted('"', str instanceof JavaScript ? str.evaluated : str.value, true);
     },
     escape: function (str) {
-        return new Anonymous(
-            encodeURI(str.value).replace(/=/g, '%3D').replace(/:/g, '%3A').replace(/#/g, '%23').replace(/;/g, '%3B')
-                .replace(/\(/g, '%28').replace(/\)/g, '%29'));
+        const escapedValue = encodeURI(str.value).replace(/=/g, '%3D').replace(/:/g, '%3A').replace(/#/g, '%23').replace(/;/g, '%3B')
+            .replace(/\(/g, '%28').replace(/\)/g, '%29');
+        const escaped = new Anonymous(escapedValue);
+        // Percent escapes are literal CSS, not Less source.
+        escaped._preventReparse = escapedValue.includes('%');
+        return escaped;
     },
     replace: function (string, pattern, replacement, flags) {
         let result = string.value;

package/lib/less/parser/lookup-pattern.js

@@ -0,0 +1,26 @@
+// @ts-check
+/**
+ * Shared source-of-truth for the `[...]` lookup grammar.
+ *
+ * The parser consumes lookups structurally (`parsers.mixin.ruleLookups()`), but
+ * `Quoted` resolves interpolation by string replacement at eval time and so needs
+ * an equivalent regular expression. Keeping the pattern in one place is what stops
+ * the two from drifting apart — the drift is precisely why `@{map[key]}` used to be
+ * emitted verbatim instead of being substituted.
+ *
+ * A key mirrors `parsers.entities.lookupValue`: an optional `@`/`@@`/`$`/`$$`
+ * sigil followed by identifier characters. It may be empty (`@map[]` resolves to
+ * the last declaration). Critically the key pattern contains no brackets, so a
+ * lookup key can never itself be a lookup — `@{a[@b[c]]}` is not grammatical.
+ * A non-nesting regex is therefore exactly equivalent to the parsed grammar here
+ * rather than an approximation of it.
+ */
+
+/** A single lookup key, e.g. `key`, `@key`, `@@key`, `$key`, or empty. */
+export const LOOKUP_KEY = '(?:[@$]{0,2})[_a-zA-Z0-9-]*';
+
+/** Zero or more chained lookups, e.g. `[a]`, `[a][b]`, `[@a][]`. */
+export const LOOKUP_CHAIN = `(?:\\[${LOOKUP_KEY}\\])*`;
+
+/** A variable name followed by an optional lookup chain, e.g. `map[@a][b]`. */
+export const VARIABLE_WITH_LOOKUPS = `[\\w-]+${LOOKUP_CHAIN}`;

package/lib/less/parser/parser.js

@@ -9,6 +9,28 @@ import logger from '../logger.js';
 import { DeprecationHandler } from '../deprecation.js';
 import Selector from '../tree/selector.js';
 import Anonymous from '../tree/anonymous.js';
+import { VARIABLE_WITH_LOOKUPS } from './lookup-pattern.js';
+import {
+    splitLookups,
+    resolveInterpolatedVariable,
+    resolveInterpolatedProperty,
+    hasInterpolation,
+    VARIABLE_INTERPOLATION,
+    PROPERTY_INTERPOLATION
+} from '../tree/interpolated-variable.js';
+
+/**
+ * One particle of a property name: a literal chunk, an `@{...}` interpolation
+ * which may carry a lookup chain, or a `${...}` interpolation which may not.
+ *
+ * The sigils are spelled out separately rather than sharing `[@$]`: properties
+ * have no lookup grammar, so accepting `${name[key]}` here would hand `name[key]`
+ * to `resolveInterpolatedProperty` and produce a misleading "undefined property"
+ * error for syntax the language does not define.
+ */
+const RULE_PROPERTY_PARTICLE = new RegExp(
+    `^((?:[\\w-]+)|(?:@\\{${VARIABLE_WITH_LOOKUPS}\\})|(?:\\$\\{[\\w-]+\\}))`
+);
 
 //
 // less.js - parser
@@ -106,6 +128,22 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
         warn('A bare @variable in an at-rule prelude is deprecated. Use @{variable} interpolation instead.', index, 'DEPRECATED', 'variable-in-at-rule-prelude');
     }
 
+    /**
+     * Whether a parsed entity is a bare `@variable` reference in a structural
+     * position, and so subject to the interpolation deprecation.
+     *
+     * A lookup such as `@map[key]` is parsed by `entities.variable()` into a
+     * `NamespaceValue` wrapping a `VariableCall`, not a `Variable`. Testing for
+     * `Variable` alone silently exempted every bare lookup from the deprecation.
+     *
+     * @param {{ type?: string } | undefined | null} e
+     * @returns {boolean}
+     */
+    function isBareVariableReference(e) {
+        if (!e) { return false; }
+        return e.type === 'Variable' || e.type === 'VariableCall' || e.type === 'NamespaceValue';
+    }
+
     /**
      * Numeric-leading variable names are a Less extension rather than valid CSS
      * identifier syntax. Keep accepting them through Less 4, but make the Less 5
@@ -717,6 +755,20 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     value = this.quoted() || this.variable() || this.property() ||
                             parserInput.$re(/^(?:(?:\\[()'"])|[^()'"])+/) || '';
 
+                    // An unquoted url() body is otherwise raw text wrapped in an
+                    // Anonymous node, which never substitutes anything — so
+                    // `url(@{path}/a.png)` used to emit the braces verbatim while the
+                    // quoted form resolved. Hand text containing interpolation to an
+                    // escaped Quoted so both spellings resolve identically.
+                    //
+                    // The empty quote string matters: `URL.eval` escapes a rewritten
+                    // rootpath only for unquoted values, so a real quote character here
+                    // would suppress that and emit `url(a(b)/x.png)` unescaped. Escaped
+                    // means no quote is written to the output either way.
+                    if (typeof value === 'string' && hasInterpolation(value)) {
+                        value = new(tree.Quoted)('', value, true, index + currentIndex, fileInfo);
+                    }
+
                     parserInput.autoCommentAbsorb = true;
 
                     expectChar(')');
@@ -760,16 +812,44 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     parserInput.restore();
                 },
 
-                // A variable entity using the protective {} e.g. @{var}
+                // A variable entity using the protective {} e.g. @{var}, optionally
+                // followed by a lookup chain e.g. @{map[key]} or @{map[@a][b]}.
+                //
+                // The chain is consumed by `mixin.ruleLookups()` rather than matched
+                // here, so the interpolated form shares one grammar with the bare
+                // `@map[key]` form instead of re-implementing it.
                 variableCurly: function () {
                     let curly;
                     const index = parserInput.i;
 
-                    if (parserInput.currentChar() === '@' && (curly = parserInput.$re(/^@\{([\w-]+)\}/))) {
-                        warnNumericVariableName(curly[1], index);
-                        warnDashOnlyVariableName(curly[1], index);
-                        return new(tree.Variable)(`@${curly[1]}`, index + currentIndex, fileInfo);
+                    if (parserInput.currentChar() !== '@') {
+                        return;
+                    }
+
+                    parserInput.save();
+                    if (!(curly = parserInput.$re(/^@\{([\w-]+)/))) {
+                        parserInput.restore();
+                        return;
                     }
+
+                    const name = curly[1];
+                    const lookups = parsers.mixin.ruleLookups();
+
+                    if (!parserInput.$char('}')) {
+                        parserInput.restore();
+                        return;
+                    }
+
+                    parserInput.forget();
+                    warnNumericVariableName(name, index);
+                    warnDashOnlyVariableName(name, index);
+
+                    if (!lookups) {
+                        return new(tree.Variable)(`@${name}`, index + currentIndex, fileInfo);
+                    }
+
+                    const call = new(tree.VariableCall)(`@${name}`, index + currentIndex, fileInfo);
+                    return new(tree.NamespaceValue)(call, lookups, index + currentIndex, fileInfo);
                 },
                 //
                 // A Property accessor, such as `$color`, in
@@ -1725,7 +1805,9 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                         merge = !isVariable && name.length > 1 && name.pop().value;
 
                         // Custom property values get permissive parsing
-                        if (name[0].value && name[0].value.slice(0, 2) === '--') {
+                        // A lookup particle (`NamespaceValue`) carries a node in `value`
+                        // rather than a string, and can never spell a `--` prefix.
+                        if (typeof name[0].value === 'string' && name[0].value.slice(0, 2) === '--') {
                             if (parserInput.$char(';')) {
                                 value = new Anonymous('');
                             } else {
@@ -1827,7 +1909,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                         if (!e) {
                             const varIndex = parserInput.i;
                             e = this.entity();
-                            if (e && e.type === 'Variable') {
+                            if (isBareVariableReference(e)) {
                                 warnBareAtRuleVariable(varIndex);
                             }
                         }
@@ -1894,17 +1976,33 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                             const quote = new tree.Quoted('\'', item, true, index, fileInfo);
                             const variableRegex = /@([\w-]+)/g;
                             const propRegex = /\$([\w-]+)/g;
+                            // These notices are about *bare* references, so test the text
+                            // with interpolations removed. A lookup key is itself allowed
+                            // to be a variable (`@{map[@key]}`), and without this the
+                            // `@key` inside the braces would be misreported as a bare use
+                            // of the very syntax the notice tells you to adopt.
+                            const bareOnly = item
+                                .replace(VARIABLE_INTERPOLATION, '')
+                                .replace(PROPERTY_INTERPOLATION, '');
                             // At-rule preludes are handled once above via
                             // `value.bareVarIndex`; the `variable-in-unknown-value`
                             // notice is for unknown declaration values only.
-                            if (!deprecateVariables && variableRegex.test(item)) {
+                            if (!deprecateVariables && variableRegex.test(bareOnly)) {
                                 warn('@variable in unknown values will not be evaluated as variables in the future. Use @{variable}', index, 'DEPRECATED', 'variable-in-unknown-value');
                             }
-                            if (propRegex.test(item)) {
+                            if (propRegex.test(bareOnly)) {
                                 warn('$property in unknown values will not be evaluated as property references in the future. Use ${property}', index, 'DEPRECATED', 'property-in-unknown-value');
                             }
-                            quote.variableRegex = /@([\w-]+)|@{([\w-]+)}/g;
-                            quote.propRegex = /\$([\w-]+)|\${([\w-]+)}/g;
+                            // Both alternatives carry the lookup chain. An unknown at-rule
+                            // prelude (`@supports`) is scanned as text, so a bare
+                            // `@map[key]` reaches this regex rather than being parsed
+                            // structurally; matching only `@map` would resolve it to the
+                            // whole ruleset and leave `[key]` behind as literal text.
+                            quote.variableRegex = new RegExp(
+                                `@(${VARIABLE_WITH_LOOKUPS})|@\\{(${VARIABLE_WITH_LOOKUPS})\\}`, 'g'
+                            );
+                            // Properties stay narrow — they have no lookup grammar.
+                            quote.propRegex = /\$([\w-]+)|\$\{([\w-]+)\}/g;
                             result.push(quote);
                         }
                     }
@@ -2246,7 +2344,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                 if (curly) { return curly; }
                 const index = parserInput.i;
                 const e = this.entity();
-                if (e && e.type === 'Variable') {
+                if (isBareVariableReference(e)) {
                     warnBareAtRuleVariable(index);
                 }
                 return e;
@@ -2844,7 +2942,7 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
 
                 match(/^(\*?)/);
                 while (true) {
-                    if (!match(/^((?:[\w-]+)|(?:[@$]\{[\w-]+\}))/)) {
+                    if (!match(RULE_PROPERTY_PARTICLE)) {
                         break;
                     }
                 }
@@ -2860,16 +2958,22 @@ const Parser = function Parser(context, imports, fileInfo, currentIndex) {
                     }
                     for (k = 0; k < name.length; k++) {
                         s = name[k];
-                        if (s.charAt(0) === '@') {
-                            const variableName = s.slice(2, -1);
-                            warnNumericVariableName(variableName, index[k]);
-                            warnDashOnlyVariableName(variableName, index[k]);
-                        }
-                        name[k] = (s.charAt(0) !== '@' && s.charAt(0) !== '$') ?
-                            new(tree.Keyword)(s) :
-                            (s.charAt(0) === '@' ?
-                                new(tree.Variable)(`@${s.slice(2, -1)}`, index[k] + currentIndex, fileInfo) :
-                                new(tree.Property)(`$${s.slice(2, -1)}`, index[k] + currentIndex, fileInfo));
+                        const sigil = s.charAt(0);
+                        if (sigil !== '@' && sigil !== '$') {
+                            name[k] = new(tree.Keyword)(s);
+                            continue;
+                        }
+                        // `@{name}` / `@{name[key]}` — strip the sigil and braces, then
+                        // let the shared resolver decide between a plain reference and
+                        // a lookup so this path cannot drift from the others.
+                        const raw = s.slice(2, -1);
+                        if (sigil === '@') {
+                            warnNumericVariableName(splitLookups(raw).name, index[k]);
+                            warnDashOnlyVariableName(splitLookups(raw).name, index[k]);
+                            name[k] = resolveInterpolatedVariable(raw, index[k] + currentIndex, fileInfo);
+                        } else {
+                            name[k] = resolveInterpolatedProperty(raw, index[k] + currentIndex, fileInfo);
+                        }
                     }
                     return name;
                 }

package/lib/less/tree/anonymous.js

@@ -20,13 +20,17 @@ class Anonymous extends Node {
         this._fileInfo = currentFileInfo;
         this.mapLines = mapLines;
         this.rulesetLike = (typeof rulesetLike === 'undefined') ? false : rulesetLike;
+        /** @type {boolean} */
+        this._preventReparse = false;
         this.allowRoot = true;
         this.copyVisibilityInfo(visibilityInfo);
     }
 
     /** @returns {Anonymous} */
     eval() {
-        return new Anonymous(/** @type {string | null} */ (this.value), this._index, this._fileInfo, this.mapLines, this.rulesetLike, this.visibilityInfo());
+        const anonymous = new Anonymous(/** @type {string | null} */ (this.value), this._index, this._fileInfo, this.mapLines, this.rulesetLike, this.visibilityInfo());
+        anonymous._preventReparse = this._preventReparse;
+        return anonymous;
     }
 
     /**

package/lib/less/tree/interpolated-variable.js

@@ -0,0 +1,106 @@
+// @ts-check
+/** @import { FileInfo } from './node.js' */
+/** @import Node from './node.js' */
+import Variable from './variable.js';
+import Property from './property.js';
+import VariableCall from './variable-call.js';
+import NamespaceValue from './namespace-value.js';
+import { LOOKUP_KEY, VARIABLE_WITH_LOOKUPS } from '../parser/lookup-pattern.js';
+
+/**
+ * Interpolation resolved by string replacement at eval time.
+ *
+ * The parser consumes `@{name[key]}` structurally via `entities.variableCurly`,
+ * but `Quoted` and inline JavaScript hold their contents as raw text and can only
+ * substitute at eval time. Both share this module so the two evaluation paths build
+ * identical nodes from identical patterns.
+ */
+
+/** Matches `@{name}` and `@{name[a][b]}`, capturing the reference. */
+export const VARIABLE_INTERPOLATION = new RegExp(`@\\{(${VARIABLE_WITH_LOOKUPS})\\}`, 'g');
+
+/**
+ * Matches `${name}`, capturing the reference.
+ *
+ * Deliberately narrower than {@link VARIABLE_INTERPOLATION}: a lookup chain is not
+ * part of the property grammar. `entities.property` parses `$name` with no lookup
+ * handling, so `$map[key]` is a property reference followed by the literal text
+ * `[key]`, and a property cannot hold a ruleset to look into in the first place
+ * (`prop: { … }` is a parse error in every scope). Accepting `${map[key]}` here
+ * would invent syntax the language does not have.
+ */
+export const PROPERTY_INTERPOLATION = /\$\{([\w-]+)\}/g;
+
+const LOOKUP_SEGMENT = new RegExp(`\\[(${LOOKUP_KEY})\\]`, 'g');
+
+// Non-global twins for membership tests. `RegExp.test` on a /g regex advances
+// `lastIndex` and so returns alternating results across calls on shared instances.
+const HAS_VARIABLE_INTERPOLATION = new RegExp(VARIABLE_INTERPOLATION.source);
+const HAS_PROPERTY_INTERPOLATION = new RegExp(PROPERTY_INTERPOLATION.source);
+
+/**
+ * Whether text contains an `@{...}` or `${...}` interpolation.
+ *
+ * @param {string} text
+ * @returns {boolean}
+ */
+export function hasInterpolation(text) {
+    return HAS_VARIABLE_INTERPOLATION.test(text) || HAS_PROPERTY_INTERPOLATION.test(text);
+}
+
+/**
+ * Split a `name[a][b]` reference into its name and lookup keys.
+ *
+ * `lookups` is null for a plain reference, so callers keep using the cheaper
+ * `Variable`/`Property` node when there is no lookup to resolve.
+ *
+ * @param {string} raw
+ * @returns {{ name: string, lookups: string[] | null }}
+ */
+export function splitLookups(raw) {
+    const open = raw.indexOf('[');
+    if (open === -1) {
+        return { name: raw, lookups: null };
+    }
+    /** @type {string[]} */
+    const lookups = [];
+    const re = new RegExp(LOOKUP_SEGMENT.source, 'g');
+    let match;
+    while ((match = re.exec(raw)) !== null) {
+        lookups.push(match[1]);
+    }
+    return { name: raw.slice(0, open), lookups };
+}
+
+/**
+ * Build the node for an interpolated `@variable` reference, with or without lookups.
+ *
+ * @param {string} raw - the reference text inside `@{...}`
+ * @param {number} index
+ * @param {FileInfo} fileInfo
+ * @returns {Node}
+ */
+export function resolveInterpolatedVariable(raw, index, fileInfo) {
+    const { name, lookups } = splitLookups(raw);
+    if (!lookups) {
+        return new Variable(`@${name}`, index, fileInfo);
+    }
+    return new NamespaceValue(
+        new VariableCall(`@${name}`, index, fileInfo), lookups, index, fileInfo
+    );
+}
+
+/**
+ * Build the node for an interpolated `$property` reference.
+ *
+ * No lookup handling: see {@link PROPERTY_INTERPOLATION}. Properties have no lookup
+ * grammar, so `raw` is always a bare name here.
+ *
+ * @param {string} raw - the reference text inside `${...}`
+ * @param {number} index
+ * @param {FileInfo} fileInfo
+ * @returns {Node}
+ */
+export function resolveInterpolatedProperty(raw, index, fileInfo) {
+    return new Property(`$${raw}`, index, fileInfo);
+}

package/lib/less/tree/js-eval-node.js

@@ -2,6 +2,10 @@
 /** @import { EvalContext } from './node.js' */
 import Node from './node.js';
 import Variable from './variable.js';
+import {
+    VARIABLE_INTERPOLATION,
+    resolveInterpolatedVariable
+} from './interpolated-variable.js';
 
 class JsEvalNode extends Node {
     /**
@@ -21,8 +25,10 @@ class JsEvalNode extends Node {
                 index: this.getIndex() };
         }
 
-        expression = expression.replace(/@\{([\w-]+)\}/g, function (_, name) {
-            return that.jsify(new Variable(`@${name}`, that.getIndex(), that.fileInfo()).eval(context));
+        expression = expression.replace(VARIABLE_INTERPOLATION, function (_, raw) {
+            return that.jsify(resolveInterpolatedVariable(
+                raw, that.getIndex(), that.fileInfo()
+            ).eval(context));
         });
 
         /** @type {Function} */

package/lib/less/tree/mixin-call.js

@@ -151,6 +151,10 @@ class MixinCall extends Node {
                 for (m = 0; m < expandedValues.length; m++) {
                     args.push({value: expandedValues[m]});
                 }
+            } else if (argValue.type === 'Expression' && Array.isArray(argValue.value) && argValue.value.length === 0) {
+                // an unset variadic holds no captured args; omit it so the callee
+                // falls through to its own parameter defaults instead of receiving empty
+
             } else {
                 args.push({name: arg.name, value: argValue});
             }

package/lib/less/tree/nested-at-rule.js

@@ -37,6 +37,40 @@ import Node from './node.js';
  * }} NestableAtRuleThis
  */
 
+// A media query may only carry a media type at its front, before any
+// conditions (https://drafts.csswg.org/mediaqueries-5/#typedef-media-query-list).
+// Operators that join media-query parts, so a fragment leading with one is not
+// a media type. Any other bare identifier is treated as a type, since unknown
+// media types are valid non-matches in CSS, not syntax errors.
+const MEDIA_QUERY_OPERATORS = ['and', 'or'];
+
+/**
+ * Whether a flattened media-query fragment leads with a media type, e.g.
+ * `screen`, `only screen`, `print and (color)` or an unknown type like `foo`.
+ * @param {Node & { value?: * }} fragment
+ */
+function startsWithMediaType(fragment) {
+    let head;
+    if (fragment.type === 'Keyword' || fragment.type === 'Anonymous') {
+        head = fragment.value;
+    } else if (fragment.type === 'Expression' && Array.isArray(fragment.value)) {
+        const parts = fragment.value.filter(p => p && p.value !== undefined);
+        let idx = 0;
+        const first = parts[idx] && String(parts[idx].value).toLowerCase();
+        if (first === 'not' || first === 'only') { idx++; }
+        head = parts[idx] && parts[idx].value;
+    }
+    if (typeof head !== 'string' || head === '') {
+        return false;
+    }
+    // Inspect only the first token. A media type is a bare identifier; a feature
+    // condition begins with '(' - e.g. an escaped ~"(max-width: 1px)" is an
+    // Anonymous whose whole value is "(max-width: 1px)", which is not a media type.
+    const firstToken = head.trim().split(/[\s(]/)[0];
+    return firstToken !== ''
+        && MEDIA_QUERY_OPERATORS.indexOf(firstToken.toLowerCase()) < 0;
+}
+
 const NestableAtRulePrototype = {
 
     isRulesetLike() {
@@ -149,6 +183,13 @@ const NestableAtRulePrototype = {
                 /** @param {Node & { toCSS?: Function }} fragment */
                     fragment => fragment.toCSS ? fragment : new Anonymous(/** @type {string} */ (/** @type {unknown} */ (fragment))));
 
+                // A media type nested inside conditions must move ahead of them
+                // so the flattened query stays valid (issue #3694, #3764).
+                const types = /** @type {Node[]} */ (path).filter(startsWithMediaType);
+                if (types.length && types.length < /** @type {Node[]} */ (path).length) {
+                    path = types.concat(/** @type {Node[]} */ (path).filter(f => !startsWithMediaType(f)));
+                }
+
                 for (i = /** @type {Node[]} */ (path).length - 1; i > 0; i--) {
                 /** @type {Node[]} */ (path).splice(i, 0, new Anonymous('and'));
                 }

package/lib/less/tree/quoted.js

@@ -1,8 +1,12 @@
 // @ts-check
 /** @import { EvalContext, CSSOutput, FileInfo } from './node.js' */
 import Node from './node.js';
-import Variable from './variable.js';
-import Property from './property.js';
+import {
+    VARIABLE_INTERPOLATION,
+    PROPERTY_INTERPOLATION,
+    resolveInterpolatedVariable,
+    resolveInterpolatedProperty
+} from './interpolated-variable.js';
 
 class Quoted extends Node {
     get type() { return 'Quoted'; }
@@ -25,9 +29,9 @@ class Quoted extends Node {
         this._index = index;
         this._fileInfo = currentFileInfo;
         /** @type {RegExp} */
-        this.variableRegex = /@\{([\w-]+)\}/g;
+        this.variableRegex = new RegExp(VARIABLE_INTERPOLATION.source, 'g');
         /** @type {RegExp} */
-        this.propRegex = /\$\{([\w-]+)\}/g;
+        this.propRegex = new RegExp(PROPERTY_INTERPOLATION.source, 'g');
         /** @type {boolean | undefined} */
         this.allowRoot = escaped;
     }
@@ -62,7 +66,9 @@ class Quoted extends Node {
          * @returns {string}
          */
         const variableReplacement = function (_, name1, name2) {
-            const v = new Variable(`@${name1 ?? name2}`, that.getIndex(), that.fileInfo()).eval(context);
+            const v = resolveInterpolatedVariable(
+                name1 ?? name2, that.getIndex(), that.fileInfo()
+            ).eval(context);
             return (v instanceof Quoted) ? /** @type {string} */ (v.value) : v.toCSS(context);
         };
         /**
@@ -72,7 +78,9 @@ class Quoted extends Node {
          * @returns {string}
          */
         const propertyReplacement = function (_, name1, name2) {
-            const v = new Property(`$${name1 ?? name2}`, that.getIndex(), that.fileInfo()).eval(context);
+            const v = resolveInterpolatedProperty(
+                name1 ?? name2, that.getIndex(), that.fileInfo()
+            ).eval(context);
             return (v instanceof Quoted) ? /** @type {string} */ (v.value) : v.toCSS(context);
         };
         /**
@@ -91,7 +99,16 @@ class Quoted extends Node {
         }
         value = iterativeReplace(value, this.variableRegex, variableReplacement);
         value = iterativeReplace(value, this.propRegex, propertyReplacement);
-        return new Quoted(this.quote + value + this.quote, value, this.escaped, this.getIndex(), this.fileInfo());
+        const result = new Quoted(
+            this.quote + value + this.quote, value, this.escaped, this.getIndex(), this.fileInfo()
+        );
+        // Carry the quote across rather than re-deriving it from the rebuilt string.
+        // For a real quote character the two agree, but an unquoted body (empty quote)
+        // is not round-trippable that way — it would pick up the first character of the
+        // substituted value and read as quoted, which suppresses rootpath escaping in
+        // `URL.eval`.
+        result.quote = this.quote;
+        return result;
     }
 
     /**

package/lib/less/tree/ruleset.js

@@ -426,7 +426,9 @@ class Ruleset extends Node {
         const self = this;
         /** @param {Declaration} decl */
         function transformDeclaration(decl) {
-            if (decl.value instanceof Anonymous && !/** @type {Declaration & { parsed?: boolean }} */ (decl).parsed) {
+            if (decl.value instanceof Anonymous &&
+                !decl.value._preventReparse &&
+                !/** @type {Declaration & { parsed?: boolean }} */ (decl).parsed) {
                 if (typeof decl.value.value === 'string') {
                     new (/** @type {new (...args: [EvalContext, object, FileInfo, number]) => { parseNode: Function }} */ (/** @type {unknown} */ (Parser)))(/** @type {{ context: EvalContext, importManager: object }} */ (/** @type {Ruleset} */ (this).parse).context, /** @type {{ context: EvalContext, importManager: object }} */ (/** @type {Ruleset} */ (this).parse).importManager, decl.fileInfo(), decl.value.getIndex()).parseNode(
                         decl.value.value,