@swissquote/crafty-preset-lightningcss 1.22.2 → 1.23.0-alpha.1

package/dist/webpack-packages/bundled.js

@@ -1,84 +1,6 @@
 require('./sourcemap-register.js');/******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 4737:
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-class CssSyntaxError extends Error {
-  constructor(error) {
-    super(error);
-    const {
-      reason,
-      line,
-      column,
-      file
-    } = error;
-    this.name = "CssSyntaxError";
-
-    // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
-    // We don't need `plugin` and `file` properties.
-    this.message = `${this.name}\n\n`;
-    if (typeof line !== "undefined") {
-      this.message += `(${line}:${column}) `;
-    }
-    this.message += file ? `${file} ` : "<css input> ";
-    this.message += `${reason}`;
-    const code = error.showSourceCode();
-    if (code) {
-      this.message += `\n\n${code}\n`;
-    }
-
-    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
-    this.stack = false;
-  }
-}
-exports["default"] = CssSyntaxError;
-
-/***/ }),
-
-/***/ 2046:
-/***/ ((__unused_webpack_module, exports) => {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-class Warning extends Error {
-  constructor(warning) {
-    super(warning);
-    const {
-      text,
-      line,
-      column
-    } = warning;
-    this.name = "Warning";
-
-    // Based on https://github.com/postcss/postcss/blob/master/lib/warning.es6#L74
-    // We don't need `plugin` properties.
-    this.message = `${this.name}\n\n`;
-    if (typeof line !== "undefined") {
-      this.message += `(${line}:${column}) `;
-    }
-    this.message += `${text}`;
-
-    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
-    this.stack = false;
-  }
-}
-exports["default"] = Warning;
-
-/***/ }),
-
 /***/ 7178:
 /***/ ((module, __unused_webpack_exports, __nccwpck_require__) => {
 
@@ -104,8 +26,6 @@ exports["default"] = loader;
 var _postcss = _interopRequireDefault(__nccwpck_require__(7802));
 var _package = _interopRequireDefault(__nccwpck_require__(4956));
 var _semver = __nccwpck_require__(9337);
-var _CssSyntaxError = _interopRequireDefault(__nccwpck_require__(4737));
-var _Warning = _interopRequireDefault(__nccwpck_require__(2046));
 var _options = _interopRequireDefault(__nccwpck_require__(1096));
 var _plugins = __nccwpck_require__(3966);
 var _utils = __nccwpck_require__(4017);
@@ -117,8 +37,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 async function loader(content, map, meta) {
   const rawOptions = this.getOptions(_options.default);
-  const plugins = [];
   const callback = this.async();
+  if (this._compiler && this._compiler.options && this._compiler.options.experiments && this._compiler.options.experiments.css && this._module && this._module.type === "css") {
+    this.emitWarning(new Error('You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `css-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `css-loader` in your webpack config (now css-loader does nothing).'));
+    callback(null, content, map, meta);
+    return;
+  }
   let options;
   try {
     options = (0, _utils.normalizeOptions)(rawOptions, this);
@@ -126,6 +50,7 @@ async function loader(content, map, meta) {
     callback(error);
     return;
   }
+  const plugins = [];
   const replacements = [];
   const exports = [];
   if ((0, _utils.shouldUseModulesPlugins)(options)) {
@@ -217,11 +142,11 @@ async function loader(content, map, meta) {
     if (error.file) {
       this.addDependency(error.file);
     }
-    callback(error.name === "CssSyntaxError" ? new _CssSyntaxError.default(error) : error);
+    callback(error.name === "CssSyntaxError" ? (0, _utils.syntaxErrorFactory)(error) : error);
     return;
   }
   for (const warning of result.warnings()) {
-    this.emitWarning(new _Warning.default(warning));
+    this.emitWarning((0, _utils.warningFactory)(warning));
   }
   const imports = [].concat(icssPluginImports.sort(_utils.sort)).concat(importPluginImports.sort(_utils.sort)).concat(urlPluginImports.sort(_utils.sort));
   const api = [].concat(importPluginApi.sort(_utils.sort)).concat(icssPluginApi.sort(_utils.sort));
@@ -243,15 +168,29 @@ async function loader(content, map, meta) {
       });
     }
   }
+  let isTemplateLiteralSupported = false;
+  if (
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output.environment &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output.environment.templateLiteral) {
+    isTemplateLiteralSupported = true;
+  }
   const importCode = (0, _utils.getImportCode)(imports, options);
   let moduleCode;
   try {
-    moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
+    moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, isTemplateLiteralSupported, this);
   } catch (error) {
     callback(error);
     return;
   }
-  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options);
+  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options, isTemplateLiteralSupported);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }
 
@@ -1099,6 +1038,8 @@ exports.shouldUseModulesPlugins = shouldUseModulesPlugins;
 exports.shouldUseURLPlugin = shouldUseURLPlugin;
 exports.sort = sort;
 exports.stringifyRequest = stringifyRequest;
+exports.syntaxErrorFactory = syntaxErrorFactory;
+exports.warningFactory = warningFactory;
 var _url = __nccwpck_require__(7310);
 var _path = _interopRequireDefault(__nccwpck_require__(1017));
 var _postcssModulesValues = _interopRequireDefault(__nccwpck_require__(9103));
@@ -1862,7 +1803,7 @@ function printParams(media, dedupe, supports, layer) {
   }
   return result;
 }
-function getModuleCode(result, api, replacements, options, loaderContext) {
+function getModuleCode(result, api, replacements, options, isTemplateLiteralSupported, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
     return "";
   }
@@ -1871,7 +1812,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
     const sourceMap = result.map;
     sourceMapValue = `,${normalizeSourceMapForRuntime(sourceMap, loaderContext)}`;
   }
-  let code = JSON.stringify(result.css);
+  let code = isTemplateLiteralSupported ? convertToTemplateLiteral(result.css) : JSON.stringify(result.css);
   let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap ? "___CSS_LOADER_API_SOURCEMAP_IMPORT___" : "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___"});\n`;
   for (const item of api) {
     const {
@@ -1897,7 +1838,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
       localName
     } = item;
     if (localName) {
-      code = code.replace(new RegExp(replacementName, "g"), () => options.modules.namedExport ? `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+      code = code.replace(new RegExp(replacementName, "g"), () => options.modules.namedExport ? isTemplateLiteralSupported ? `\${ ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] }` : `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "` : isTemplateLiteralSupported ? `\${${importName}.locals[${JSON.stringify(localName)}]}` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
     } else {
       const {
         hash,
@@ -1906,7 +1847,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
       const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? "needQuotes: true" : []);
       const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : "";
       beforeCode += `var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});\n`;
-      code = code.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
+      code = code.replace(new RegExp(replacementName, "g"), () => isTemplateLiteralSupported ? `\${${replacementName}}` : `" + ${replacementName} + "`);
     }
   }
 
@@ -1919,10 +1860,21 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
   // 5 - layer
   return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`;
 }
+const SLASH = "\\".charCodeAt(0);
+const BACKTICK = "`".charCodeAt(0);
+const DOLLAR = "$".charCodeAt(0);
+function convertToTemplateLiteral(str) {
+  let escapedString = "";
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    escapedString += code === SLASH || code === BACKTICK || code === DOLLAR ? `\\${str[i]}` : str[i];
+  }
+  return `\`${escapedString}\``;
+}
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
-function getExportCode(exports, replacements, icssPluginUsed, options) {
+function getExportCode(exports, replacements, icssPluginUsed, options, isTemplateLiteralSupported) {
   let code = "// Exports\n";
   if (icssPluginUsed) {
     let localsCode = "";
@@ -1930,12 +1882,12 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
       const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
       for (const name of normalizedNames) {
         if (options.modules.namedExport) {
-          localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
+          localsCode += `export var ${name} = ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)};\n`;
         } else {
           if (localsCode) {
             localsCode += `,\n`;
           }
-          localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+          localsCode += `\t${JSON.stringify(name)}: ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)}`;
         }
       }
     };
@@ -1956,14 +1908,14 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
         } = item;
         localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => {
           if (options.modules.namedExport) {
-            return `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
+            return isTemplateLiteralSupported ? `\${${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}]}` : `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
           } else if (options.modules.exportOnlyLocals) {
-            return `" + ${importName}[${JSON.stringify(localName)}] + "`;
+            return isTemplateLiteralSupported ? `\${${importName}[${JSON.stringify(localName)}]}` : `" + ${importName}[${JSON.stringify(localName)}] + "`;
           }
-          return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
+          return isTemplateLiteralSupported ? `\${${importName}.locals[${JSON.stringify(localName)}]}` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
         });
       } else {
-        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
+        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => isTemplateLiteralSupported ? `\${${replacementName}}` : `" + ${replacementName} + "`);
       }
     }
     if (options.modules.exportOnlyLocals) {
@@ -2068,6 +2020,44 @@ function combineRequests(preRequest, url) {
   const idx = url.indexOf("!=!");
   return idx !== -1 ? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3) : preRequest + url;
 }
+function warningFactory(warning) {
+  let message = "";
+  if (typeof warning.line !== "undefined") {
+    message += `(${warning.line}:${warning.column}) `;
+  }
+  if (typeof warning.plugin !== "undefined") {
+    message += `from "${warning.plugin}" plugin: `;
+  }
+  message += warning.text;
+  if (warning.node) {
+    message += `\n\nCode:\n  ${warning.node.toString()}\n`;
+  }
+  const obj = new Error(message, {
+    cause: warning
+  });
+  obj.stack = null;
+  return obj;
+}
+function syntaxErrorFactory(error) {
+  let message = "\nSyntaxError\n\n";
+  if (typeof error.line !== "undefined") {
+    message += `(${error.line}:${error.column}) `;
+  }
+  if (typeof error.plugin !== "undefined") {
+    message += `from "${error.plugin}" plugin: `;
+  }
+  message += error.file ? `${error.file} ` : "<css input> ";
+  message += `${error.reason}`;
+  const code = error.showSourceCode();
+  if (code) {
+    message += `\n\n${code}\n`;
+  }
+  const obj = new Error(message, {
+    cause: error
+  });
+  obj.stack = null;
+  return obj;
+}
 
 /***/ }),
 
@@ -3088,9 +3078,19 @@ function localizeNode(rule, mode, localAliasMap) {
               hasLocals: false,
               explicit: context.explicit,
             };
-            newNodes = node.map((childNode) =>
-              transform(childNode, childContext)
-            );
+            newNodes = node.map((childNode) => {
+              const newContext = {
+                ...childContext,
+                enforceNoSpacing: false,
+              };
+
+              const result = transform(childNode, newContext);
+
+              childContext.global = newContext.global;
+              childContext.hasLocals = newContext.hasLocals;
+
+              return result;
+            });
 
             node = node.clone();
             node.nodes = normalizeNodeArray(newNodes);
@@ -3231,19 +3231,34 @@ function localizeDeclNode(node, context) {
   return node;
 }
 
-function isWordAFunctionArgument(wordNode, functionNode) {
-  return functionNode
-    ? functionNode.nodes.some(
-        (functionNodeChild) =>
-          functionNodeChild.sourceIndex === wordNode.sourceIndex
-      )
-    : false;
-}
+// `none` is special value, other is global values
+const specialKeywords = [
+  "none",
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+];
 
 function localizeDeclarationValues(localize, declaration, context) {
   const valueNodes = valueParser(declaration.value);
 
   valueNodes.walk((node, index, nodes) => {
+    if (
+      node.type === "function" &&
+      (node.value.toLowerCase() === "var" || node.value.toLowerCase() === "env")
+    ) {
+      return false;
+    }
+
+    if (
+      node.type === "word" &&
+      specialKeywords.includes(node.value.toLowerCase())
+    ) {
+      return;
+    }
+
     const subContext = {
       options: context.options,
       global: context.global,
@@ -3260,63 +3275,84 @@ function localizeDeclaration(declaration, context) {
   const isAnimation = /animation$/i.test(declaration.prop);
 
   if (isAnimation) {
-    const validIdent = /^-?[_a-z][_a-z0-9-]*$/i;
+    // letter
+    // An uppercase letter or a lowercase letter.
+    //
+    // ident-start code point
+    // A letter, a non-ASCII code point, or U+005F LOW LINE (_).
+    //
+    // ident code point
+    // An ident-start code point, a digit, or U+002D HYPHEN-MINUS (-).
+
+    // We don't validate `hex digits`, because we don't need it, it is work of linters.
+    const validIdent =
+      /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-)((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i;
 
     /*
     The spec defines some keywords that you can use to describe properties such as the timing
     function. These are still valid animation names, so as long as there is a property that accepts
     a keyword, it is given priority. Only when all the properties that can take a keyword are
     exhausted can the animation name be set to the keyword. I.e.
-  
+
     animation: infinite infinite;
-  
+
     The animation will repeat an infinite number of times from the first argument, and will have an
     animation name of infinite from the second.
     */
     const animationKeywords = {
+      // animation-direction
+      $normal: 1,
+      $reverse: 1,
       $alternate: 1,
       "$alternate-reverse": 1,
+      // animation-fill-mode
+      $forwards: 1,
       $backwards: 1,
       $both: 1,
+      // animation-iteration-count
+      $infinite: 1,
+      // animation-play-state
+      $paused: 1,
+      $running: 1,
+      // animation-timing-function
       $ease: 1,
       "$ease-in": 1,
-      "$ease-in-out": 1,
       "$ease-out": 1,
-      $forwards: 1,
-      $infinite: 1,
+      "$ease-in-out": 1,
       $linear: 1,
-      $none: Infinity, // No matter how many times you write none, it will never be an animation name
-      $normal: 1,
-      $paused: 1,
-      $reverse: 1,
-      $running: 1,
       "$step-end": 1,
       "$step-start": 1,
+      // Special
+      $none: Infinity, // No matter how many times you write none, it will never be an animation name
+      // Global values
       $initial: Infinity,
       $inherit: Infinity,
       $unset: Infinity,
+      $revert: Infinity,
+      "$revert-layer": Infinity,
     };
-
-    const didParseAnimationName = false;
     let parsedAnimationKeywords = {};
-    let stepsFunctionNode = null;
     const valueNodes = valueParser(declaration.value).walk((node) => {
-      /* If div-token appeared (represents as comma ','), a possibility of an animation-keywords should be reflesh. */
+      // If div-token appeared (represents as comma ','), a possibility of an animation-keywords should be reflesh.
       if (node.type === "div") {
         parsedAnimationKeywords = {};
+
+        return;
+      }
+      // Do not handle nested functions
+      else if (node.type === "function") {
+        return false;
       }
-      if (node.type === "function" && node.value.toLowerCase() === "steps") {
-        stepsFunctionNode = node;
+      // Ignore all except word
+      else if (node.type !== "word") {
+        return;
       }
-      const value =
-        node.type === "word" &&
-        !isWordAFunctionArgument(node, stepsFunctionNode)
-          ? node.value.toLowerCase()
-          : null;
+
+      const value = node.type === "word" ? node.value.toLowerCase() : null;
 
       let shouldParseAnimationName = false;
 
-      if (!didParseAnimationName && value && validIdent.test(value)) {
+      if (value && validIdent.test(value)) {
         if ("$" + value in animationKeywords) {
           parsedAnimationKeywords["$" + value] =
             "$" + value in parsedAnimationKeywords
@@ -3337,6 +3373,7 @@ function localizeDeclaration(declaration, context) {
         localizeNextItem: shouldParseAnimationName && !context.global,
         localAliasMap: context.localAliasMap,
       };
+
       return localizeDeclNode(node, subContext);
     });
 
@@ -4041,12 +4078,24 @@ function markDirtyUp(node) {
 }
 
 class Container extends Node {
-  push(child) {
-    child.parent = this
-    this.proxyOf.nodes.push(child)
+  append(...children) {
+    for (let child of children) {
+      let nodes = this.normalize(child, this.last)
+      for (let node of nodes) this.proxyOf.nodes.push(node)
+    }
+
+    this.markDirty()
+
     return this
   }
 
+  cleanRaws(keepBetween) {
+    super.cleanRaws(keepBetween)
+    if (this.nodes) {
+      for (let node of this.nodes) node.cleanRaws(keepBetween)
+    }
+  }
+
   each(callback) {
     if (!this.proxyOf.nodes) return undefined
     let iterator = this.getIterator()
@@ -4064,104 +4113,109 @@ class Container extends Node {
     return result
   }
 
-  walk(callback) {
-    return this.each((child, i) => {
-      let result
-      try {
-        result = callback(child, i)
-      } catch (e) {
-        throw child.addToError(e)
-      }
-      if (result !== false && child.walk) {
-        result = child.walk(callback)
-      }
+  every(condition) {
+    return this.nodes.every(condition)
+  }
 
-      return result
-    })
+  getIterator() {
+    if (!this.lastEach) this.lastEach = 0
+    if (!this.indexes) this.indexes = {}
+
+    this.lastEach += 1
+    let iterator = this.lastEach
+    this.indexes[iterator] = 0
+
+    return iterator
   }
 
-  walkDecls(prop, callback) {
-    if (!callback) {
-      callback = prop
-      return this.walk((child, i) => {
-        if (child.type === 'decl') {
-          return callback(child, i)
+  getProxyProcessor() {
+    return {
+      get(node, prop) {
+        if (prop === 'proxyOf') {
+          return node
+        } else if (!node[prop]) {
+          return node[prop]
+        } else if (
+          prop === 'each' ||
+          (typeof prop === 'string' && prop.startsWith('walk'))
+        ) {
+          return (...args) => {
+            return node[prop](
+              ...args.map(i => {
+                if (typeof i === 'function') {
+                  return (child, index) => i(child.toProxy(), index)
+                } else {
+                  return i
+                }
+              })
+            )
+          }
+        } else if (prop === 'every' || prop === 'some') {
+          return cb => {
+            return node[prop]((child, ...other) =>
+              cb(child.toProxy(), ...other)
+            )
+          }
+        } else if (prop === 'root') {
+          return () => node.root().toProxy()
+        } else if (prop === 'nodes') {
+          return node.nodes.map(i => i.toProxy())
+        } else if (prop === 'first' || prop === 'last') {
+          return node[prop].toProxy()
+        } else {
+          return node[prop]
         }
-      })
-    }
-    if (prop instanceof RegExp) {
-      return this.walk((child, i) => {
-        if (child.type === 'decl' && prop.test(child.prop)) {
-          return callback(child, i)
+      },
+
+      set(node, prop, value) {
+        if (node[prop] === value) return true
+        node[prop] = value
+        if (prop === 'name' || prop === 'params' || prop === 'selector') {
+          node.markDirty()
         }
-      })
-    }
-    return this.walk((child, i) => {
-      if (child.type === 'decl' && child.prop === prop) {
-        return callback(child, i)
+        return true
       }
-    })
+    }
   }
 
-  walkRules(selector, callback) {
-    if (!callback) {
-      callback = selector
+  index(child) {
+    if (typeof child === 'number') return child
+    if (child.proxyOf) child = child.proxyOf
+    return this.proxyOf.nodes.indexOf(child)
+  }
 
-      return this.walk((child, i) => {
-        if (child.type === 'rule') {
-          return callback(child, i)
-        }
-      })
-    }
-    if (selector instanceof RegExp) {
-      return this.walk((child, i) => {
-        if (child.type === 'rule' && selector.test(child.selector)) {
-          return callback(child, i)
-        }
-      })
-    }
-    return this.walk((child, i) => {
-      if (child.type === 'rule' && child.selector === selector) {
-        return callback(child, i)
+  insertAfter(exist, add) {
+    let existIndex = this.index(exist)
+    let nodes = this.normalize(add, this.proxyOf.nodes[existIndex]).reverse()
+    existIndex = this.index(exist)
+    for (let node of nodes) this.proxyOf.nodes.splice(existIndex + 1, 0, node)
+
+    let index
+    for (let id in this.indexes) {
+      index = this.indexes[id]
+      if (existIndex < index) {
+        this.indexes[id] = index + nodes.length
       }
-    })
+    }
+
+    this.markDirty()
+
+    return this
   }
 
-  walkAtRules(name, callback) {
-    if (!callback) {
-      callback = name
-      return this.walk((child, i) => {
-        if (child.type === 'atrule') {
-          return callback(child, i)
-        }
-      })
-    }
-    if (name instanceof RegExp) {
-      return this.walk((child, i) => {
-        if (child.type === 'atrule' && name.test(child.name)) {
-          return callback(child, i)
-        }
-      })
-    }
-    return this.walk((child, i) => {
-      if (child.type === 'atrule' && child.name === name) {
-        return callback(child, i)
-      }
-    })
-  }
+  insertBefore(exist, add) {
+    let existIndex = this.index(exist)
+    let type = existIndex === 0 ? 'prepend' : false
+    let nodes = this.normalize(add, this.proxyOf.nodes[existIndex], type).reverse()
+    existIndex = this.index(exist)
+    for (let node of nodes) this.proxyOf.nodes.splice(existIndex, 0, node)
 
-  walkComments(callback) {
-    return this.walk((child, i) => {
-      if (child.type === 'comment') {
-        return callback(child, i)
+    let index
+    for (let id in this.indexes) {
+      index = this.indexes[id]
+      if (existIndex <= index) {
+        this.indexes[id] = index + nodes.length
       }
-    })
-  }
-
-  append(...children) {
-    for (let child of children) {
-      let nodes = this.normalize(child, this.last)
-      for (let node of nodes) this.proxyOf.nodes.push(node)
     }
 
     this.markDirty()
@@ -4169,6 +4223,56 @@ class Container extends Node {
     return this
   }
 
+  normalize(nodes, sample) {
+    if (typeof nodes === 'string') {
+      nodes = cleanSource(parse(nodes).nodes)
+    } else if (Array.isArray(nodes)) {
+      nodes = nodes.slice(0)
+      for (let i of nodes) {
+        if (i.parent) i.parent.removeChild(i, 'ignore')
+      }
+    } else if (nodes.type === 'root' && this.type !== 'document') {
+      nodes = nodes.nodes.slice(0)
+      for (let i of nodes) {
+        if (i.parent) i.parent.removeChild(i, 'ignore')
+      }
+    } else if (nodes.type) {
+      nodes = [nodes]
+    } else if (nodes.prop) {
+      if (typeof nodes.value === 'undefined') {
+        throw new Error('Value field is missed in node creation')
+      } else if (typeof nodes.value !== 'string') {
+        nodes.value = String(nodes.value)
+      }
+      nodes = [new Declaration(nodes)]
+    } else if (nodes.selector) {
+      nodes = [new Rule(nodes)]
+    } else if (nodes.name) {
+      nodes = [new AtRule(nodes)]
+    } else if (nodes.text) {
+      nodes = [new Comment(nodes)]
+    } else {
+      throw new Error('Unknown node type in node creation')
+    }
+
+    let processed = nodes.map(i => {
+      /* c8 ignore next */
+      if (!i[my]) Container.rebuild(i)
+      i = i.proxyOf
+      if (i.parent) i.parent.removeChild(i)
+      if (i[isClean]) markDirtyUp(i)
+      if (typeof i.raws.before === 'undefined') {
+        if (sample && typeof sample.raws.before !== 'undefined') {
+          i.raws.before = sample.raws.before.replace(/\S/g, '')
+        }
+      }
+      i.parent = this.proxyOf
+      return i
+    })
+
+    return processed
+  }
+
   prepend(...children) {
     children = children.reverse()
     for (let child of children) {
@@ -4184,46 +4288,15 @@ class Container extends Node {
     return this
   }
 
-  cleanRaws(keepBetween) {
-    super.cleanRaws(keepBetween)
-    if (this.nodes) {
-      for (let node of this.nodes) node.cleanRaws(keepBetween)
-    }
-  }
-
-  insertBefore(exist, add) {
-    let existIndex = this.index(exist)
-    let type = existIndex === 0 ? 'prepend' : false
-    let nodes = this.normalize(add, this.proxyOf.nodes[existIndex], type).reverse()
-    existIndex = this.index(exist)
-    for (let node of nodes) this.proxyOf.nodes.splice(existIndex, 0, node)
-
-    let index
-    for (let id in this.indexes) {
-      index = this.indexes[id]
-      if (existIndex <= index) {
-        this.indexes[id] = index + nodes.length
-      }
-    }
-
-    this.markDirty()
-
+  push(child) {
+    child.parent = this
+    this.proxyOf.nodes.push(child)
     return this
   }
 
-  insertAfter(exist, add) {
-    let existIndex = this.index(exist)
-    let nodes = this.normalize(add, this.proxyOf.nodes[existIndex]).reverse()
-    existIndex = this.index(exist)
-    for (let node of nodes) this.proxyOf.nodes.splice(existIndex + 1, 0, node)
-
-    let index
-    for (let id in this.indexes) {
-      index = this.indexes[id]
-      if (existIndex < index) {
-        this.indexes[id] = index + nodes.length
-      }
-    }
+  removeAll() {
+    for (let node of this.proxyOf.nodes) node.parent = undefined
+    this.proxyOf.nodes = []
 
     this.markDirty()
 
@@ -4248,15 +4321,6 @@ class Container extends Node {
     return this
   }
 
-  removeAll() {
-    for (let node of this.proxyOf.nodes) node.parent = undefined
-    this.proxyOf.nodes = []
-
-    this.markDirty()
-
-    return this
-  }
-
   replaceValues(pattern, opts, callback) {
     if (!callback) {
       callback = opts
@@ -4275,139 +4339,112 @@ class Container extends Node {
     return this
   }
 
-  every(condition) {
-    return this.nodes.every(condition)
-  }
-
   some(condition) {
     return this.nodes.some(condition)
   }
 
-  index(child) {
-    if (typeof child === 'number') return child
-    if (child.proxyOf) child = child.proxyOf
-    return this.proxyOf.nodes.indexOf(child)
-  }
+  walk(callback) {
+    return this.each((child, i) => {
+      let result
+      try {
+        result = callback(child, i)
+      } catch (e) {
+        throw child.addToError(e)
+      }
+      if (result !== false && child.walk) {
+        result = child.walk(callback)
+      }
 
-  get first() {
-    if (!this.proxyOf.nodes) return undefined
-    return this.proxyOf.nodes[0]
+      return result
+    })
   }
 
-  get last() {
-    if (!this.proxyOf.nodes) return undefined
-    return this.proxyOf.nodes[this.proxyOf.nodes.length - 1]
+  walkAtRules(name, callback) {
+    if (!callback) {
+      callback = name
+      return this.walk((child, i) => {
+        if (child.type === 'atrule') {
+          return callback(child, i)
+        }
+      })
+    }
+    if (name instanceof RegExp) {
+      return this.walk((child, i) => {
+        if (child.type === 'atrule' && name.test(child.name)) {
+          return callback(child, i)
+        }
+      })
+    }
+    return this.walk((child, i) => {
+      if (child.type === 'atrule' && child.name === name) {
+        return callback(child, i)
+      }
+    })
   }
 
-  normalize(nodes, sample) {
-    if (typeof nodes === 'string') {
-      nodes = cleanSource(parse(nodes).nodes)
-    } else if (Array.isArray(nodes)) {
-      nodes = nodes.slice(0)
-      for (let i of nodes) {
-        if (i.parent) i.parent.removeChild(i, 'ignore')
-      }
-    } else if (nodes.type === 'root' && this.type !== 'document') {
-      nodes = nodes.nodes.slice(0)
-      for (let i of nodes) {
-        if (i.parent) i.parent.removeChild(i, 'ignore')
-      }
-    } else if (nodes.type) {
-      nodes = [nodes]
-    } else if (nodes.prop) {
-      if (typeof nodes.value === 'undefined') {
-        throw new Error('Value field is missed in node creation')
-      } else if (typeof nodes.value !== 'string') {
-        nodes.value = String(nodes.value)
+  walkComments(callback) {
+    return this.walk((child, i) => {
+      if (child.type === 'comment') {
+        return callback(child, i)
       }
-      nodes = [new Declaration(nodes)]
-    } else if (nodes.selector) {
-      nodes = [new Rule(nodes)]
-    } else if (nodes.name) {
-      nodes = [new AtRule(nodes)]
-    } else if (nodes.text) {
-      nodes = [new Comment(nodes)]
-    } else {
-      throw new Error('Unknown node type in node creation')
-    }
+    })
+  }
 
-    let processed = nodes.map(i => {
-      /* c8 ignore next */
-      if (!i[my]) Container.rebuild(i)
-      i = i.proxyOf
-      if (i.parent) i.parent.removeChild(i)
-      if (i[isClean]) markDirtyUp(i)
-      if (typeof i.raws.before === 'undefined') {
-        if (sample && typeof sample.raws.before !== 'undefined') {
-          i.raws.before = sample.raws.before.replace(/\S/g, '')
+  walkDecls(prop, callback) {
+    if (!callback) {
+      callback = prop
+      return this.walk((child, i) => {
+        if (child.type === 'decl') {
+          return callback(child, i)
+        }
+      })
+    }
+    if (prop instanceof RegExp) {
+      return this.walk((child, i) => {
+        if (child.type === 'decl' && prop.test(child.prop)) {
+          return callback(child, i)
         }
+      })
+    }
+    return this.walk((child, i) => {
+      if (child.type === 'decl' && child.prop === prop) {
+        return callback(child, i)
       }
-      i.parent = this.proxyOf
-      return i
     })
-
-    return processed
   }
 
-  getProxyProcessor() {
-    return {
-      set(node, prop, value) {
-        if (node[prop] === value) return true
-        node[prop] = value
-        if (prop === 'name' || prop === 'params' || prop === 'selector') {
-          node.markDirty()
-        }
-        return true
-      },
+  walkRules(selector, callback) {
+    if (!callback) {
+      callback = selector
 
-      get(node, prop) {
-        if (prop === 'proxyOf') {
-          return node
-        } else if (!node[prop]) {
-          return node[prop]
-        } else if (
-          prop === 'each' ||
-          (typeof prop === 'string' && prop.startsWith('walk'))
-        ) {
-          return (...args) => {
-            return node[prop](
-              ...args.map(i => {
-                if (typeof i === 'function') {
-                  return (child, index) => i(child.toProxy(), index)
-                } else {
-                  return i
-                }
-              })
-            )
-          }
-        } else if (prop === 'every' || prop === 'some') {
-          return cb => {
-            return node[prop]((child, ...other) =>
-              cb(child.toProxy(), ...other)
-            )
-          }
-        } else if (prop === 'root') {
-          return () => node.root().toProxy()
-        } else if (prop === 'nodes') {
-          return node.nodes.map(i => i.toProxy())
-        } else if (prop === 'first' || prop === 'last') {
-          return node[prop].toProxy()
-        } else {
-          return node[prop]
+      return this.walk((child, i) => {
+        if (child.type === 'rule') {
+          return callback(child, i)
         }
-      }
+      })
     }
+    if (selector instanceof RegExp) {
+      return this.walk((child, i) => {
+        if (child.type === 'rule' && selector.test(child.selector)) {
+          return callback(child, i)
+        }
+      })
+    }
+    return this.walk((child, i) => {
+      if (child.type === 'rule' && child.selector === selector) {
+        return callback(child, i)
+      }
+    })
   }
 
-  getIterator() {
-    if (!this.lastEach) this.lastEach = 0
-    if (!this.indexes) this.indexes = {}
-
-    this.lastEach += 1
-    let iterator = this.lastEach
-    this.indexes[iterator] = 0
+  get first() {
+    if (!this.proxyOf.nodes) return undefined
+    return this.proxyOf.nodes[0]
+  }
 
-    return iterator
+  get last() {
+    if (!this.proxyOf.nodes) return undefined
+    return this.proxyOf.nodes[this.proxyOf.nodes.length - 1]
   }
 }
 
@@ -4527,7 +4564,7 @@ class CssSyntaxError extends Error {
 
     let mark, aside
     if (color) {
-      let { bold, red, gray } = pico.createColors(true)
+      let { bold, gray, red } = pico.createColors(true)
       mark = text => bold(red(text))
       aside = text => gray(text)
     } else {
@@ -4708,7 +4745,7 @@ fromJSON.default = fromJSON
 
 let { SourceMapConsumer, SourceMapGenerator } = __nccwpck_require__(175)
 let { fileURLToPath, pathToFileURL } = __nccwpck_require__(7310)
-let { resolve, isAbsolute } = __nccwpck_require__(1017)
+let { isAbsolute, resolve } = __nccwpck_require__(1017)
 let { nanoid } = __nccwpck_require__(4951)
 
 let terminalHighlight = __nccwpck_require__(1526)
@@ -4766,48 +4803,6 @@ class Input {
     if (this.map) this.map.file = this.from
   }
 
-  fromOffset(offset) {
-    let lastLine, lineToIndex
-    if (!this[fromOffsetCache]) {
-      let lines = this.css.split('\n')
-      lineToIndex = new Array(lines.length)
-      let prevIndex = 0
-
-      for (let i = 0, l = lines.length; i < l; i++) {
-        lineToIndex[i] = prevIndex
-        prevIndex += lines[i].length + 1
-      }
-
-      this[fromOffsetCache] = lineToIndex
-    } else {
-      lineToIndex = this[fromOffsetCache]
-    }
-    lastLine = lineToIndex[lineToIndex.length - 1]
-
-    let min = 0
-    if (offset >= lastLine) {
-      min = lineToIndex.length - 1
-    } else {
-      let max = lineToIndex.length - 2
-      let mid
-      while (min < max) {
-        mid = min + ((max - min) >> 1)
-        if (offset < lineToIndex[mid]) {
-          max = mid - 1
-        } else if (offset >= lineToIndex[mid + 1]) {
-          min = mid + 1
-        } else {
-          min = mid
-          break
-        }
-      }
-    }
-    return {
-      line: min + 1,
-      col: offset - lineToIndex[min] + 1
-    }
-  }
-
   error(message, line, column, opts = {}) {
     let result, endLine, endColumn
 
@@ -4842,10 +4837,10 @@ class Input {
         message,
         origin.endLine === undefined
           ? origin.line
-          : { line: origin.line, column: origin.column },
+          : { column: origin.column, line: origin.line },
         origin.endLine === undefined
           ? origin.column
-          : { line: origin.endLine, column: origin.endColumn },
+          : { column: origin.endColumn, line: origin.endLine },
         origin.source,
         origin.file,
         opts.plugin
@@ -4853,35 +4848,84 @@ class Input {
     } else {
       result = new CssSyntaxError(
         message,
-        endLine === undefined ? line : { line, column },
-        endLine === undefined ? column : { line: endLine, column: endColumn },
+        endLine === undefined ? line : { column, line },
+        endLine === undefined ? column : { column: endColumn, line: endLine },
         this.css,
         this.file,
         opts.plugin
       )
     }
 
-    result.input = { line, column, endLine, endColumn, source: this.css }
-    if (this.file) {
-      if (pathToFileURL) {
-        result.input.url = pathToFileURL(this.file).toString()
+    result.input = { column, endColumn, endLine, line, source: this.css }
+    if (this.file) {
+      if (pathToFileURL) {
+        result.input.url = pathToFileURL(this.file).toString()
+      }
+      result.input.file = this.file
+    }
+
+    return result
+  }
+
+  fromOffset(offset) {
+    let lastLine, lineToIndex
+    if (!this[fromOffsetCache]) {
+      let lines = this.css.split('\n')
+      lineToIndex = new Array(lines.length)
+      let prevIndex = 0
+
+      for (let i = 0, l = lines.length; i < l; i++) {
+        lineToIndex[i] = prevIndex
+        prevIndex += lines[i].length + 1
+      }
+
+      this[fromOffsetCache] = lineToIndex
+    } else {
+      lineToIndex = this[fromOffsetCache]
+    }
+    lastLine = lineToIndex[lineToIndex.length - 1]
+
+    let min = 0
+    if (offset >= lastLine) {
+      min = lineToIndex.length - 1
+    } else {
+      let max = lineToIndex.length - 2
+      let mid
+      while (min < max) {
+        mid = min + ((max - min) >> 1)
+        if (offset < lineToIndex[mid]) {
+          max = mid - 1
+        } else if (offset >= lineToIndex[mid + 1]) {
+          min = mid + 1
+        } else {
+          min = mid
+          break
+        }
       }
-      result.input.file = this.file
     }
+    return {
+      col: offset - lineToIndex[min] + 1,
+      line: min + 1
+    }
+  }
 
-    return result
+  mapResolve(file) {
+    if (/^\w+:\/\//.test(file)) {
+      return file
+    }
+    return resolve(this.map.consumer().sourceRoot || this.map.root || '.', file)
   }
 
   origin(line, column, endLine, endColumn) {
     if (!this.map) return false
     let consumer = this.map.consumer()
 
-    let from = consumer.originalPositionFor({ line, column })
+    let from = consumer.originalPositionFor({ column, line })
     if (!from.source) return false
 
     let to
     if (typeof endLine === 'number') {
-      to = consumer.originalPositionFor({ line: endLine, column: endColumn })
+      to = consumer.originalPositionFor({ column: endColumn, line: endLine })
     }
 
     let fromUrl
@@ -4896,11 +4940,11 @@ class Input {
     }
 
     let result = {
-      url: fromUrl.toString(),
-      line: from.line,
       column: from.column,
+      endColumn: to && to.column,
       endLine: to && to.line,
-      endColumn: to && to.column
+      line: from.line,
+      url: fromUrl.toString()
     }
 
     if (fromUrl.protocol === 'file:') {
@@ -4918,17 +4962,6 @@ class Input {
     return result
   }
 
-  mapResolve(file) {
-    if (/^\w+:\/\//.test(file)) {
-      return file
-    }
-    return resolve(this.map.consumer().sourceRoot || this.map.root || '.', file)
-  }
-
-  get from() {
-    return this.file || this.id
-  }
-
   toJSON() {
     let json = {}
     for (let name of ['hasBOM', 'css', 'file', 'id']) {
@@ -4944,6 +4977,10 @@ class Input {
     }
     return json
   }
+
+  get from() {
+    return this.file || this.id
+  }
 }
 
 module.exports = Input
@@ -4973,37 +5010,37 @@ let parse = __nccwpck_require__(8317)
 let Root = __nccwpck_require__(9659)
 
 const TYPE_TO_CLASS_NAME = {
-  document: 'Document',
-  root: 'Root',
   atrule: 'AtRule',
-  rule: 'Rule',
+  comment: 'Comment',
   decl: 'Declaration',
-  comment: 'Comment'
+  document: 'Document',
+  root: 'Root',
+  rule: 'Rule'
 }
 
 const PLUGIN_PROPS = {
-  postcssPlugin: true,
-  prepare: true,
-  Once: true,
-  Document: true,
-  Root: true,
-  Declaration: true,
-  Rule: true,
   AtRule: true,
-  Comment: true,
-  DeclarationExit: true,
-  RuleExit: true,
   AtRuleExit: true,
+  Comment: true,
   CommentExit: true,
-  RootExit: true,
+  Declaration: true,
+  DeclarationExit: true,
+  Document: true,
   DocumentExit: true,
-  OnceExit: true
+  Once: true,
+  OnceExit: true,
+  postcssPlugin: true,
+  prepare: true,
+  Root: true,
+  RootExit: true,
+  Rule: true,
+  RuleExit: true
 }
 
 const NOT_VISITORS = {
+  Once: true,
   postcssPlugin: true,
-  prepare: true,
-  Once: true
+  prepare: true
 }
 
 const CHILDREN = 0
@@ -5049,260 +5086,87 @@ function toStack(node) {
   }
 
   return {
-    node,
-    events,
     eventIndex: 0,
-    visitors: [],
-    visitorIndex: 0,
-    iterator: 0
-  }
-}
-
-function cleanMarks(node) {
-  node[isClean] = false
-  if (node.nodes) node.nodes.forEach(i => cleanMarks(i))
-  return node
-}
-
-let postcss = {}
-
-class LazyResult {
-  constructor(processor, css, opts) {
-    this.stringified = false
-    this.processed = false
-
-    let root
-    if (
-      typeof css === 'object' &&
-      css !== null &&
-      (css.type === 'root' || css.type === 'document')
-    ) {
-      root = cleanMarks(css)
-    } else if (css instanceof LazyResult || css instanceof Result) {
-      root = cleanMarks(css.root)
-      if (css.map) {
-        if (typeof opts.map === 'undefined') opts.map = {}
-        if (!opts.map.inline) opts.map.inline = false
-        opts.map.prev = css.map
-      }
-    } else {
-      let parser = parse
-      if (opts.syntax) parser = opts.syntax.parse
-      if (opts.parser) parser = opts.parser
-      if (parser.parse) parser = parser.parse
-
-      try {
-        root = parser(css, opts)
-      } catch (error) {
-        this.processed = true
-        this.error = error
-      }
-
-      if (root && !root[my]) {
-        /* c8 ignore next 2 */
-        Container.rebuild(root)
-      }
-    }
-
-    this.result = new Result(processor, root, opts)
-    this.helpers = { ...postcss, result: this.result, postcss }
-    this.plugins = this.processor.plugins.map(plugin => {
-      if (typeof plugin === 'object' && plugin.prepare) {
-        return { ...plugin, ...plugin.prepare(this.result) }
-      } else {
-        return plugin
-      }
-    })
-  }
-
-  get [Symbol.toStringTag]() {
-    return 'LazyResult'
-  }
-
-  get processor() {
-    return this.result.processor
-  }
-
-  get opts() {
-    return this.result.opts
-  }
-
-  get css() {
-    return this.stringify().css
-  }
-
-  get content() {
-    return this.stringify().content
-  }
-
-  get map() {
-    return this.stringify().map
-  }
-
-  get root() {
-    return this.sync().root
-  }
-
-  get messages() {
-    return this.sync().messages
-  }
-
-  warnings() {
-    return this.sync().warnings()
-  }
-
-  toString() {
-    return this.css
-  }
-
-  then(onFulfilled, onRejected) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!('from' in this.opts)) {
-        warnOnce(
-          'Without `from` option PostCSS could generate wrong source map ' +
-            'and will not find Browserslist config. Set it to CSS file path ' +
-            'or to `undefined` to prevent this warning.'
-        )
-      }
-    }
-    return this.async().then(onFulfilled, onRejected)
-  }
-
-  catch(onRejected) {
-    return this.async().catch(onRejected)
-  }
-
-  finally(onFinally) {
-    return this.async().then(onFinally, onFinally)
-  }
-
-  async() {
-    if (this.error) return Promise.reject(this.error)
-    if (this.processed) return Promise.resolve(this.result)
-    if (!this.processing) {
-      this.processing = this.runAsync()
-    }
-    return this.processing
-  }
-
-  sync() {
-    if (this.error) throw this.error
-    if (this.processed) return this.result
-    this.processed = true
-
-    if (this.processing) {
-      throw this.getAsyncError()
-    }
-
-    for (let plugin of this.plugins) {
-      let promise = this.runOnRoot(plugin)
-      if (isPromise(promise)) {
-        throw this.getAsyncError()
-      }
-    }
-
-    this.prepareVisitors()
-    if (this.hasListener) {
-      let root = this.result.root
-      while (!root[isClean]) {
-        root[isClean] = true
-        this.walkSync(root)
-      }
-      if (this.listeners.OnceExit) {
-        if (root.type === 'document') {
-          for (let subRoot of root.nodes) {
-            this.visitSync(this.listeners.OnceExit, subRoot)
-          }
-        } else {
-          this.visitSync(this.listeners.OnceExit, root)
-        }
-      }
-    }
-
-    return this.result
-  }
-
-  stringify() {
-    if (this.error) throw this.error
-    if (this.stringified) return this.result
-    this.stringified = true
-
-    this.sync()
+    events,
+    iterator: 0,
+    node,
+    visitorIndex: 0,
+    visitors: []
+  }
+}
 
-    let opts = this.result.opts
-    let str = stringify
-    if (opts.syntax) str = opts.syntax.stringify
-    if (opts.stringifier) str = opts.stringifier
-    if (str.stringify) str = str.stringify
+function cleanMarks(node) {
+  node[isClean] = false
+  if (node.nodes) node.nodes.forEach(i => cleanMarks(i))
+  return node
+}
 
-    let map = new MapGenerator(str, this.result.root, this.result.opts)
-    let data = map.generate()
-    this.result.css = data[0]
-    this.result.map = data[1]
+let postcss = {}
 
-    return this.result
-  }
+class LazyResult {
+  constructor(processor, css, opts) {
+    this.stringified = false
+    this.processed = false
 
-  walkSync(node) {
-    node[isClean] = true
-    let events = getEvents(node)
-    for (let event of events) {
-      if (event === CHILDREN) {
-        if (node.nodes) {
-          node.each(child => {
-            if (!child[isClean]) this.walkSync(child)
-          })
-        }
-      } else {
-        let visitors = this.listeners[event]
-        if (visitors) {
-          if (this.visitSync(visitors, node.toProxy())) return
-        }
+    let root
+    if (
+      typeof css === 'object' &&
+      css !== null &&
+      (css.type === 'root' || css.type === 'document')
+    ) {
+      root = cleanMarks(css)
+    } else if (css instanceof LazyResult || css instanceof Result) {
+      root = cleanMarks(css.root)
+      if (css.map) {
+        if (typeof opts.map === 'undefined') opts.map = {}
+        if (!opts.map.inline) opts.map.inline = false
+        opts.map.prev = css.map
       }
-    }
-  }
+    } else {
+      let parser = parse
+      if (opts.syntax) parser = opts.syntax.parse
+      if (opts.parser) parser = opts.parser
+      if (parser.parse) parser = parser.parse
 
-  visitSync(visitors, node) {
-    for (let [plugin, visitor] of visitors) {
-      this.result.lastPlugin = plugin
-      let promise
       try {
-        promise = visitor(node, this.helpers)
-      } catch (e) {
-        throw this.handleError(e, node.proxyOf)
-      }
-      if (node.type !== 'root' && node.type !== 'document' && !node.parent) {
-        return true
+        root = parser(css, opts)
+      } catch (error) {
+        this.processed = true
+        this.error = error
       }
-      if (isPromise(promise)) {
-        throw this.getAsyncError()
+
+      if (root && !root[my]) {
+        /* c8 ignore next 2 */
+        Container.rebuild(root)
       }
     }
-  }
 
-  runOnRoot(plugin) {
-    this.result.lastPlugin = plugin
-    try {
-      if (typeof plugin === 'object' && plugin.Once) {
-        if (this.result.root.type === 'document') {
-          let roots = this.result.root.nodes.map(root =>
-            plugin.Once(root, this.helpers)
-          )
+    this.result = new Result(processor, root, opts)
+    this.helpers = { ...postcss, postcss, result: this.result }
+    this.plugins = this.processor.plugins.map(plugin => {
+      if (typeof plugin === 'object' && plugin.prepare) {
+        return { ...plugin, ...plugin.prepare(this.result) }
+      } else {
+        return plugin
+      }
+    })
+  }
 
-          if (isPromise(roots[0])) {
-            return Promise.all(roots)
-          }
+  async() {
+    if (this.error) return Promise.reject(this.error)
+    if (this.processed) return Promise.resolve(this.result)
+    if (!this.processing) {
+      this.processing = this.runAsync()
+    }
+    return this.processing
+  }
 
-          return roots
-        }
+  catch(onRejected) {
+    return this.async().catch(onRejected)
+  }
 
-        return plugin.Once(this.result.root, this.helpers)
-      } else if (typeof plugin === 'function') {
-        return plugin(this.result.root, this.result)
-      }
-    } catch (error) {
-      throw this.handleError(error)
-    }
+  finally(onFinally) {
+    return this.async().then(onFinally, onFinally)
   }
 
   getAsyncError() {
@@ -5348,6 +5212,44 @@ class LazyResult {
     return error
   }
 
+  prepareVisitors() {
+    this.listeners = {}
+    let add = (plugin, type, cb) => {
+      if (!this.listeners[type]) this.listeners[type] = []
+      this.listeners[type].push([plugin, cb])
+    }
+    for (let plugin of this.plugins) {
+      if (typeof plugin === 'object') {
+        for (let event in plugin) {
+          if (!PLUGIN_PROPS[event] && /^[A-Z]/.test(event)) {
+            throw new Error(
+              `Unknown event ${event} in ${plugin.postcssPlugin}. ` +
+                `Try to update PostCSS (${this.processor.version} now).`
+            )
+          }
+          if (!NOT_VISITORS[event]) {
+            if (typeof plugin[event] === 'object') {
+              for (let filter in plugin[event]) {
+                if (filter === '*') {
+                  add(plugin, event, plugin[event][filter])
+                } else {
+                  add(
+                    plugin,
+                    event + '-' + filter.toLowerCase(),
+                    plugin[event][filter]
+                  )
+                }
+              }
+            } else if (typeof plugin[event] === 'function') {
+              add(plugin, event, plugin[event])
+            }
+          }
+        }
+      }
+    }
+    this.hasListener = Object.keys(this.listeners).length > 0
+  }
+
   async runAsync() {
     this.plugin = 0
     for (let i = 0; i < this.plugins.length; i++) {
@@ -5405,42 +5307,122 @@ class LazyResult {
     return this.stringify()
   }
 
-  prepareVisitors() {
-    this.listeners = {}
-    let add = (plugin, type, cb) => {
-      if (!this.listeners[type]) this.listeners[type] = []
-      this.listeners[type].push([plugin, cb])
+  runOnRoot(plugin) {
+    this.result.lastPlugin = plugin
+    try {
+      if (typeof plugin === 'object' && plugin.Once) {
+        if (this.result.root.type === 'document') {
+          let roots = this.result.root.nodes.map(root =>
+            plugin.Once(root, this.helpers)
+          )
+
+          if (isPromise(roots[0])) {
+            return Promise.all(roots)
+          }
+
+          return roots
+        }
+
+        return plugin.Once(this.result.root, this.helpers)
+      } else if (typeof plugin === 'function') {
+        return plugin(this.result.root, this.result)
+      }
+    } catch (error) {
+      throw this.handleError(error)
+    }
+  }
+
+  stringify() {
+    if (this.error) throw this.error
+    if (this.stringified) return this.result
+    this.stringified = true
+
+    this.sync()
+
+    let opts = this.result.opts
+    let str = stringify
+    if (opts.syntax) str = opts.syntax.stringify
+    if (opts.stringifier) str = opts.stringifier
+    if (str.stringify) str = str.stringify
+
+    let map = new MapGenerator(str, this.result.root, this.result.opts)
+    let data = map.generate()
+    this.result.css = data[0]
+    this.result.map = data[1]
+
+    return this.result
+  }
+
+  sync() {
+    if (this.error) throw this.error
+    if (this.processed) return this.result
+    this.processed = true
+
+    if (this.processing) {
+      throw this.getAsyncError()
     }
+
     for (let plugin of this.plugins) {
-      if (typeof plugin === 'object') {
-        for (let event in plugin) {
-          if (!PLUGIN_PROPS[event] && /^[A-Z]/.test(event)) {
-            throw new Error(
-              `Unknown event ${event} in ${plugin.postcssPlugin}. ` +
-                `Try to update PostCSS (${this.processor.version} now).`
-            )
-          }
-          if (!NOT_VISITORS[event]) {
-            if (typeof plugin[event] === 'object') {
-              for (let filter in plugin[event]) {
-                if (filter === '*') {
-                  add(plugin, event, plugin[event][filter])
-                } else {
-                  add(
-                    plugin,
-                    event + '-' + filter.toLowerCase(),
-                    plugin[event][filter]
-                  )
-                }
-              }
-            } else if (typeof plugin[event] === 'function') {
-              add(plugin, event, plugin[event])
-            }
+      let promise = this.runOnRoot(plugin)
+      if (isPromise(promise)) {
+        throw this.getAsyncError()
+      }
+    }
+
+    this.prepareVisitors()
+    if (this.hasListener) {
+      let root = this.result.root
+      while (!root[isClean]) {
+        root[isClean] = true
+        this.walkSync(root)
+      }
+      if (this.listeners.OnceExit) {
+        if (root.type === 'document') {
+          for (let subRoot of root.nodes) {
+            this.visitSync(this.listeners.OnceExit, subRoot)
           }
+        } else {
+          this.visitSync(this.listeners.OnceExit, root)
         }
       }
     }
-    this.hasListener = Object.keys(this.listeners).length > 0
+
+    return this.result
+  }
+
+  then(onFulfilled, onRejected) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!('from' in this.opts)) {
+        warnOnce(
+          'Without `from` option PostCSS could generate wrong source map ' +
+            'and will not find Browserslist config. Set it to CSS file path ' +
+            'or to `undefined` to prevent this warning.'
+        )
+      }
+    }
+    return this.async().then(onFulfilled, onRejected)
+  }
+
+  toString() {
+    return this.css
+  }
+
+  visitSync(visitors, node) {
+    for (let [plugin, visitor] of visitors) {
+      this.result.lastPlugin = plugin
+      let promise
+      try {
+        promise = visitor(node, this.helpers)
+      } catch (e) {
+        throw this.handleError(e, node.proxyOf)
+      }
+      if (node.type !== 'root' && node.type !== 'document' && !node.parent) {
+        return true
+      }
+      if (isPromise(promise)) {
+        throw this.getAsyncError()
+      }
+    }
   }
 
   visitTick(stack) {
@@ -5499,6 +5481,61 @@ class LazyResult {
     }
     stack.pop()
   }
+
+  walkSync(node) {
+    node[isClean] = true
+    let events = getEvents(node)
+    for (let event of events) {
+      if (event === CHILDREN) {
+        if (node.nodes) {
+          node.each(child => {
+            if (!child[isClean]) this.walkSync(child)
+          })
+        }
+      } else {
+        let visitors = this.listeners[event]
+        if (visitors) {
+          if (this.visitSync(visitors, node.toProxy())) return
+        }
+      }
+    }
+  }
+
+  warnings() {
+    return this.sync().warnings()
+  }
+
+  get content() {
+    return this.stringify().content
+  }
+
+  get css() {
+    return this.stringify().css
+  }
+
+  get map() {
+    return this.stringify().map
+  }
+
+  get messages() {
+    return this.sync().messages
+  }
+
+  get opts() {
+    return this.result.opts
+  }
+
+  get processor() {
+    return this.result.processor
+  }
+
+  get root() {
+    return this.sync().root
+  }
+
+  get [Symbol.toStringTag]() {
+    return 'LazyResult'
+  }
 }
 
 LazyResult.registerPostcss = dependant => {
@@ -5521,6 +5558,15 @@ Document.registerLazyResult(LazyResult)
 
 
 let list = {
+  comma(string) {
+    return list.split(string, [','], true)
+  },
+
+  space(string) {
+    let spaces = [' ', '\n', '\t']
+    return list.split(string, spaces)
+  },
+
   split(string, separators, last) {
     let array = []
     let current = ''
@@ -5562,15 +5608,6 @@ let list = {
 
     if (last || current !== '') array.push(current.trim())
     return array
-  },
-
-  space(string) {
-    let spaces = [' ', '\n', '\t']
-    return list.split(string, spaces)
-  },
-
-  comma(string) {
-    return list.split(string, [','], true)
   }
 }
 
@@ -5587,7 +5624,7 @@ list.default = list
 
 
 let { SourceMapConsumer, SourceMapGenerator } = __nccwpck_require__(175)
-let { dirname, resolve, relative, sep } = __nccwpck_require__(1017)
+let { dirname, relative, resolve, sep } = __nccwpck_require__(1017)
 let { pathToFileURL } = __nccwpck_require__(7310)
 
 let Input = __nccwpck_require__(5508)
@@ -5603,100 +5640,29 @@ class MapGenerator {
     this.opts = opts
     this.css = cssString
     this.usesFileUrls = !this.mapOpts.from && this.mapOpts.absolute
-  }
-
-  isMap() {
-    if (typeof this.opts.map !== 'undefined') {
-      return !!this.opts.map
-    }
-    return this.previous().length > 0
-  }
-
-  previous() {
-    if (!this.previousMaps) {
-      this.previousMaps = []
-      if (this.root) {
-        this.root.walk(node => {
-          if (node.source && node.source.input.map) {
-            let map = node.source.input.map
-            if (!this.previousMaps.includes(map)) {
-              this.previousMaps.push(map)
-            }
-          }
-        })
-      } else {
-        let input = new Input(this.css, this.opts)
-        if (input.map) this.previousMaps.push(input.map)
-      }
-    }
-
-    return this.previousMaps
-  }
-
-  isInline() {
-    if (typeof this.mapOpts.inline !== 'undefined') {
-      return this.mapOpts.inline
-    }
-
-    let annotation = this.mapOpts.annotation
-    if (typeof annotation !== 'undefined' && annotation !== true) {
-      return false
-    }
-
-    if (this.previous().length) {
-      return this.previous().some(i => i.inline)
-    }
-    return true
-  }
 
-  isSourcesContent() {
-    if (typeof this.mapOpts.sourcesContent !== 'undefined') {
-      return this.mapOpts.sourcesContent
-    }
-    if (this.previous().length) {
-      return this.previous().some(i => i.withContent())
-    }
-    return true
+    this.memoizedFileURLs = new Map()
+    this.memoizedPaths = new Map()
+    this.memoizedURLs = new Map()
   }
 
-  clearAnnotation() {
-    if (this.mapOpts.annotation === false) return
+  addAnnotation() {
+    let content
 
-    if (this.root) {
-      let node
-      for (let i = this.root.nodes.length - 1; i >= 0; i--) {
-        node = this.root.nodes[i]
-        if (node.type !== 'comment') continue
-        if (node.text.indexOf('# sourceMappingURL=') === 0) {
-          this.root.removeChild(i)
-        }
-      }
-    } else if (this.css) {
-      this.css = this.css.replace(/(\n)?\/\*#[\S\s]*?\*\/$/gm, '')
+    if (this.isInline()) {
+      content =
+        'data:application/json;base64,' + this.toBase64(this.map.toString())
+    } else if (typeof this.mapOpts.annotation === 'string') {
+      content = this.mapOpts.annotation
+    } else if (typeof this.mapOpts.annotation === 'function') {
+      content = this.mapOpts.annotation(this.opts.to, this.root)
+    } else {
+      content = this.outputFile() + '.map'
     }
-  }
+    let eol = '\n'
+    if (this.css.includes('\r\n')) eol = '\r\n'
 
-  setSourcesContent() {
-    let already = {}
-    if (this.root) {
-      this.root.walk(node => {
-        if (node.source) {
-          let from = node.source.input.from
-          if (from && !already[from]) {
-            already[from] = true
-            let fromUrl = this.usesFileUrls
-              ? this.toFileUrl(from)
-              : this.toUrl(this.path(from))
-            this.map.setSourceContent(fromUrl, node.source.input.css)
-          }
-        }
-      })
-    } else if (this.css) {
-      let from = this.opts.from
-        ? this.toUrl(this.path(this.opts.from))
-        : '<no source>'
-      this.map.setSourceContent(from, this.css)
-    }
+    this.css += eol + '/*# sourceMappingURL=' + content + ' */'
   }
 
   applyPrevMaps() {
@@ -5714,57 +5680,37 @@ class MapGenerator {
         map = prev.consumer()
       }
 
-      this.map.applySourceMap(map, from, this.toUrl(this.path(root)))
-    }
-  }
-
-  isAnnotation() {
-    if (this.isInline()) {
-      return true
-    }
-    if (typeof this.mapOpts.annotation !== 'undefined') {
-      return this.mapOpts.annotation
-    }
-    if (this.previous().length) {
-      return this.previous().some(i => i.annotation)
-    }
-    return true
-  }
-
-  toBase64(str) {
-    if (Buffer) {
-      return Buffer.from(str).toString('base64')
-    } else {
-      return window.btoa(unescape(encodeURIComponent(str)))
-    }
-  }
-
-  addAnnotation() {
-    let content
-
-    if (this.isInline()) {
-      content =
-        'data:application/json;base64,' + this.toBase64(this.map.toString())
-    } else if (typeof this.mapOpts.annotation === 'string') {
-      content = this.mapOpts.annotation
-    } else if (typeof this.mapOpts.annotation === 'function') {
-      content = this.mapOpts.annotation(this.opts.to, this.root)
-    } else {
-      content = this.outputFile() + '.map'
+      this.map.applySourceMap(map, from, this.toUrl(this.path(root)))
     }
-    let eol = '\n'
-    if (this.css.includes('\r\n')) eol = '\r\n'
+  }
 
-    this.css += eol + '/*# sourceMappingURL=' + content + ' */'
+  clearAnnotation() {
+    if (this.mapOpts.annotation === false) return
+
+    if (this.root) {
+      let node
+      for (let i = this.root.nodes.length - 1; i >= 0; i--) {
+        node = this.root.nodes[i]
+        if (node.type !== 'comment') continue
+        if (node.text.indexOf('# sourceMappingURL=') === 0) {
+          this.root.removeChild(i)
+        }
+      }
+    } else if (this.css) {
+      this.css = this.css.replace(/(\n)?\/\*#[\S\s]*?\*\/$/gm, '')
+    }
   }
 
-  outputFile() {
-    if (this.opts.to) {
-      return this.path(this.opts.to)
-    } else if (this.opts.from) {
-      return this.path(this.opts.from)
+  generate() {
+    this.clearAnnotation()
+    if (pathAvailable && sourceMapAvailable && this.isMap()) {
+      return this.generateMap()
     } else {
-      return 'to.css'
+      let result = ''
+      this.stringify(this.root, i => {
+        result += i
+      })
+      return [result]
     }
   }
 
@@ -5778,11 +5724,11 @@ class MapGenerator {
     } else {
       this.map = new SourceMapGenerator({ file: this.outputFile() })
       this.map.addMapping({
+        generated: { column: 0, line: 1 },
+        original: { column: 0, line: 1 },
         source: this.opts.from
           ? this.toUrl(this.path(this.opts.from))
-          : '<no source>',
-        generated: { line: 1, column: 0 },
-        original: { line: 1, column: 0 }
+          : '<no source>'
       })
     }
 
@@ -5797,48 +5743,6 @@ class MapGenerator {
     }
   }
 
-  path(file) {
-    if (file.indexOf('<') === 0) return file
-    if (/^\w+:\/\//.test(file)) return file
-    if (this.mapOpts.absolute) return file
-
-    let from = this.opts.to ? dirname(this.opts.to) : '.'
-
-    if (typeof this.mapOpts.annotation === 'string') {
-      from = dirname(resolve(from, this.mapOpts.annotation))
-    }
-
-    file = relative(from, file)
-    return file
-  }
-
-  toUrl(path) {
-    if (sep === '\\') {
-      path = path.replace(/\\/g, '/')
-    }
-    return encodeURI(path).replace(/[#?]/g, encodeURIComponent)
-  }
-
-  toFileUrl(path) {
-    if (pathToFileURL) {
-      return pathToFileURL(path).toString()
-    } else {
-      throw new Error(
-        '`map.absolute` option is not available in this PostCSS build'
-      )
-    }
-  }
-
-  sourcePath(node) {
-    if (this.mapOpts.from) {
-      return this.toUrl(this.mapOpts.from)
-    } else if (this.usesFileUrls) {
-      return this.toFileUrl(node.source.input.from)
-    } else {
-      return this.toUrl(this.path(node.source.input.from))
-    }
-  }
-
   generateString() {
     this.css = ''
     this.map = new SourceMapGenerator({ file: this.outputFile() })
@@ -5848,9 +5752,9 @@ class MapGenerator {
 
     let noSource = '<no source>'
     let mapping = {
-      source: '',
-      generated: { line: 0, column: 0 },
-      original: { line: 0, column: 0 }
+      generated: { column: 0, line: 0 },
+      original: { column: 0, line: 0 },
+      source: ''
     }
 
     let lines, last
@@ -5907,17 +5811,171 @@ class MapGenerator {
     })
   }
 
-  generate() {
-    this.clearAnnotation()
-    if (pathAvailable && sourceMapAvailable && this.isMap()) {
-      return this.generateMap()
+  isAnnotation() {
+    if (this.isInline()) {
+      return true
+    }
+    if (typeof this.mapOpts.annotation !== 'undefined') {
+      return this.mapOpts.annotation
+    }
+    if (this.previous().length) {
+      return this.previous().some(i => i.annotation)
+    }
+    return true
+  }
+
+  isInline() {
+    if (typeof this.mapOpts.inline !== 'undefined') {
+      return this.mapOpts.inline
+    }
+
+    let annotation = this.mapOpts.annotation
+    if (typeof annotation !== 'undefined' && annotation !== true) {
+      return false
+    }
+
+    if (this.previous().length) {
+      return this.previous().some(i => i.inline)
+    }
+    return true
+  }
+
+  isMap() {
+    if (typeof this.opts.map !== 'undefined') {
+      return !!this.opts.map
+    }
+    return this.previous().length > 0
+  }
+
+  isSourcesContent() {
+    if (typeof this.mapOpts.sourcesContent !== 'undefined') {
+      return this.mapOpts.sourcesContent
+    }
+    if (this.previous().length) {
+      return this.previous().some(i => i.withContent())
+    }
+    return true
+  }
+
+  outputFile() {
+    if (this.opts.to) {
+      return this.path(this.opts.to)
+    } else if (this.opts.from) {
+      return this.path(this.opts.from)
     } else {
-      let result = ''
-      this.stringify(this.root, i => {
-        result += i
+      return 'to.css'
+    }
+  }
+
+  path(file) {
+    if (this.mapOpts.absolute) return file
+    if (file.charCodeAt(0) === 60 /* `<` */) return file
+    if (/^\w+:\/\//.test(file)) return file
+    let cached = this.memoizedPaths.get(file)
+    if (cached) return cached
+
+    let from = this.opts.to ? dirname(this.opts.to) : '.'
+
+    if (typeof this.mapOpts.annotation === 'string') {
+      from = dirname(resolve(from, this.mapOpts.annotation))
+    }
+
+    let path = relative(from, file)
+    this.memoizedPaths.set(file, path)
+
+    return path
+  }
+
+  previous() {
+    if (!this.previousMaps) {
+      this.previousMaps = []
+      if (this.root) {
+        this.root.walk(node => {
+          if (node.source && node.source.input.map) {
+            let map = node.source.input.map
+            if (!this.previousMaps.includes(map)) {
+              this.previousMaps.push(map)
+            }
+          }
+        })
+      } else {
+        let input = new Input(this.css, this.opts)
+        if (input.map) this.previousMaps.push(input.map)
+      }
+    }
+
+    return this.previousMaps
+  }
+
+  setSourcesContent() {
+    let already = {}
+    if (this.root) {
+      this.root.walk(node => {
+        if (node.source) {
+          let from = node.source.input.from
+          if (from && !already[from]) {
+            already[from] = true
+            let fromUrl = this.usesFileUrls
+              ? this.toFileUrl(from)
+              : this.toUrl(this.path(from))
+            this.map.setSourceContent(fromUrl, node.source.input.css)
+          }
+        }
       })
-      return [result]
+    } else if (this.css) {
+      let from = this.opts.from
+        ? this.toUrl(this.path(this.opts.from))
+        : '<no source>'
+      this.map.setSourceContent(from, this.css)
+    }
+  }
+
+  sourcePath(node) {
+    if (this.mapOpts.from) {
+      return this.toUrl(this.mapOpts.from)
+    } else if (this.usesFileUrls) {
+      return this.toFileUrl(node.source.input.from)
+    } else {
+      return this.toUrl(this.path(node.source.input.from))
+    }
+  }
+
+  toBase64(str) {
+    if (Buffer) {
+      return Buffer.from(str).toString('base64')
+    } else {
+      return window.btoa(unescape(encodeURIComponent(str)))
+    }
+  }
+
+  toFileUrl(path) {
+    let cached = this.memoizedFileURLs.get(path)
+    if (cached) return cached
+
+    if (pathToFileURL) {
+      let fileURL = pathToFileURL(path).toString()
+      this.memoizedFileURLs.set(path, fileURL)
+
+      return fileURL
+    } else {
+      throw new Error(
+        '`map.absolute` option is not available in this PostCSS build'
+      )
+    }
+  }
+
+  toUrl(path) {
+    let cached = this.memoizedURLs.get(path)
+    if (cached) return cached
+
+    if (sep === '\\') {
+      path = path.replace(/\\/g, '/')
     }
+
+    let url = encodeURI(path).replace(/[#?]/g, encodeURIComponent)
+    this.memoizedURLs.set(path, url)
+
+    return url
   }
 }
 
@@ -5960,35 +6018,63 @@ class NoWorkResult {
       }
     })
 
-    let map = new MapGenerator(str, root, this._opts, css)
-    if (map.isMap()) {
-      let [generatedCSS, generatedMap] = map.generate()
-      if (generatedCSS) {
-        this.result.css = generatedCSS
-      }
-      if (generatedMap) {
-        this.result.map = generatedMap
+    let map = new MapGenerator(str, root, this._opts, css)
+    if (map.isMap()) {
+      let [generatedCSS, generatedMap] = map.generate()
+      if (generatedCSS) {
+        this.result.css = generatedCSS
+      }
+      if (generatedMap) {
+        this.result.map = generatedMap
+      }
+    }
+  }
+
+  async() {
+    if (this.error) return Promise.reject(this.error)
+    return Promise.resolve(this.result)
+  }
+
+  catch(onRejected) {
+    return this.async().catch(onRejected)
+  }
+
+  finally(onFinally) {
+    return this.async().then(onFinally, onFinally)
+  }
+
+  sync() {
+    if (this.error) throw this.error
+    return this.result
+  }
+
+  then(onFulfilled, onRejected) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!('from' in this._opts)) {
+        warnOnce(
+          'Without `from` option PostCSS could generate wrong source map ' +
+            'and will not find Browserslist config. Set it to CSS file path ' +
+            'or to `undefined` to prevent this warning.'
+        )
       }
     }
-  }
 
-  get [Symbol.toStringTag]() {
-    return 'NoWorkResult'
+    return this.async().then(onFulfilled, onRejected)
   }
 
-  get processor() {
-    return this.result.processor
+  toString() {
+    return this._css
   }
 
-  get opts() {
-    return this.result.opts
+  warnings() {
+    return []
   }
 
-  get css() {
+  get content() {
     return this.result.css
   }
 
-  get content() {
+  get css() {
     return this.result.css
   }
 
@@ -5996,6 +6082,18 @@ class NoWorkResult {
     return this.result.map
   }
 
+  get messages() {
+    return []
+  }
+
+  get opts() {
+    return this.result.opts
+  }
+
+  get processor() {
+    return this.result.processor
+  }
+
   get root() {
     if (this._root) {
       return this._root
@@ -6018,48 +6116,8 @@ class NoWorkResult {
     }
   }
 
-  get messages() {
-    return []
-  }
-
-  warnings() {
-    return []
-  }
-
-  toString() {
-    return this._css
-  }
-
-  then(onFulfilled, onRejected) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!('from' in this._opts)) {
-        warnOnce(
-          'Without `from` option PostCSS could generate wrong source map ' +
-            'and will not find Browserslist config. Set it to CSS file path ' +
-            'or to `undefined` to prevent this warning.'
-        )
-      }
-    }
-
-    return this.async().then(onFulfilled, onRejected)
-  }
-
-  catch(onRejected) {
-    return this.async().catch(onRejected)
-  }
-
-  finally(onFinally) {
-    return this.async().then(onFinally, onFinally)
-  }
-
-  async() {
-    if (this.error) return Promise.reject(this.error)
-    return Promise.resolve(this.result)
-  }
-
-  sync() {
-    if (this.error) throw this.error
-    return this.result
+  get [Symbol.toStringTag]() {
+    return 'NoWorkResult'
   }
 }
 
@@ -6127,25 +6185,215 @@ class Node {
         this[name] = defaults[name]
       }
     }
-  }
+  }
+
+  addToError(error) {
+    error.postcssNode = this
+    if (error.stack && this.source && /\n\s{4}at /.test(error.stack)) {
+      let s = this.source
+      error.stack = error.stack.replace(
+        /\n\s{4}at /,
+        `$&${s.input.from}:${s.start.line}:${s.start.column}$&`
+      )
+    }
+    return error
+  }
+
+  after(add) {
+    this.parent.insertAfter(this, add)
+    return this
+  }
+
+  assign(overrides = {}) {
+    for (let name in overrides) {
+      this[name] = overrides[name]
+    }
+    return this
+  }
+
+  before(add) {
+    this.parent.insertBefore(this, add)
+    return this
+  }
+
+  cleanRaws(keepBetween) {
+    delete this.raws.before
+    delete this.raws.after
+    if (!keepBetween) delete this.raws.between
+  }
+
+  clone(overrides = {}) {
+    let cloned = cloneNode(this)
+    for (let name in overrides) {
+      cloned[name] = overrides[name]
+    }
+    return cloned
+  }
+
+  cloneAfter(overrides = {}) {
+    let cloned = this.clone(overrides)
+    this.parent.insertAfter(this, cloned)
+    return cloned
+  }
+
+  cloneBefore(overrides = {}) {
+    let cloned = this.clone(overrides)
+    this.parent.insertBefore(this, cloned)
+    return cloned
+  }
+
+  error(message, opts = {}) {
+    if (this.source) {
+      let { end, start } = this.rangeBy(opts)
+      return this.source.input.error(
+        message,
+        { column: start.column, line: start.line },
+        { column: end.column, line: end.line },
+        opts
+      )
+    }
+    return new CssSyntaxError(message)
+  }
+
+  getProxyProcessor() {
+    return {
+      get(node, prop) {
+        if (prop === 'proxyOf') {
+          return node
+        } else if (prop === 'root') {
+          return () => node.root().toProxy()
+        } else {
+          return node[prop]
+        }
+      },
+
+      set(node, prop, value) {
+        if (node[prop] === value) return true
+        node[prop] = value
+        if (
+          prop === 'prop' ||
+          prop === 'value' ||
+          prop === 'name' ||
+          prop === 'params' ||
+          prop === 'important' ||
+          /* c8 ignore next */
+          prop === 'text'
+        ) {
+          node.markDirty()
+        }
+        return true
+      }
+    }
+  }
+
+  markDirty() {
+    if (this[isClean]) {
+      this[isClean] = false
+      let next = this
+      while ((next = next.parent)) {
+        next[isClean] = false
+      }
+    }
+  }
+
+  next() {
+    if (!this.parent) return undefined
+    let index = this.parent.index(this)
+    return this.parent.nodes[index + 1]
+  }
+
+  positionBy(opts, stringRepresentation) {
+    let pos = this.source.start
+    if (opts.index) {
+      pos = this.positionInside(opts.index, stringRepresentation)
+    } else if (opts.word) {
+      stringRepresentation = this.toString()
+      let index = stringRepresentation.indexOf(opts.word)
+      if (index !== -1) pos = this.positionInside(index, stringRepresentation)
+    }
+    return pos
+  }
+
+  positionInside(index, stringRepresentation) {
+    let string = stringRepresentation || this.toString()
+    let column = this.source.start.column
+    let line = this.source.start.line
+
+    for (let i = 0; i < index; i++) {
+      if (string[i] === '\n') {
+        column = 1
+        line += 1
+      } else {
+        column += 1
+      }
+    }
+
+    return { column, line }
+  }
+
+  prev() {
+    if (!this.parent) return undefined
+    let index = this.parent.index(this)
+    return this.parent.nodes[index - 1]
+  }
+
+  rangeBy(opts) {
+    let start = {
+      column: this.source.start.column,
+      line: this.source.start.line
+    }
+    let end = this.source.end
+      ? {
+        column: this.source.end.column + 1,
+        line: this.source.end.line
+      }
+      : {
+        column: start.column + 1,
+        line: start.line
+      }
+
+    if (opts.word) {
+      let stringRepresentation = this.toString()
+      let index = stringRepresentation.indexOf(opts.word)
+      if (index !== -1) {
+        start = this.positionInside(index, stringRepresentation)
+        end = this.positionInside(index + opts.word.length, stringRepresentation)
+      }
+    } else {
+      if (opts.start) {
+        start = {
+          column: opts.start.column,
+          line: opts.start.line
+        }
+      } else if (opts.index) {
+        start = this.positionInside(opts.index)
+      }
+
+      if (opts.end) {
+        end = {
+          column: opts.end.column,
+          line: opts.end.line
+        }
+      } else if (opts.endIndex) {
+        end = this.positionInside(opts.endIndex)
+      } else if (opts.index) {
+        end = this.positionInside(opts.index + 1)
+      }
+    }
 
-  error(message, opts = {}) {
-    if (this.source) {
-      let { start, end } = this.rangeBy(opts)
-      return this.source.input.error(
-        message,
-        { line: start.line, column: start.column },
-        { line: end.line, column: end.column },
-        opts
-      )
+    if (
+      end.line < start.line ||
+      (end.line === start.line && end.column <= start.column)
+    ) {
+      end = { column: start.column + 1, line: start.line }
     }
-    return new CssSyntaxError(message)
+
+    return { end, start }
   }
 
-  warn(result, text, opts) {
-    let data = { node: this }
-    for (let i in opts) data[i] = opts[i]
-    return result.warn(text, data)
+  raw(prop, defaultType) {
+    let str = new Stringifier()
+    return str.raw(this, prop, defaultType)
   }
 
   remove() {
@@ -6156,42 +6404,6 @@ class Node {
     return this
   }
 
-  toString(stringifier = stringify) {
-    if (stringifier.stringify) stringifier = stringifier.stringify
-    let result = ''
-    stringifier(this, i => {
-      result += i
-    })
-    return result
-  }
-
-  assign(overrides = {}) {
-    for (let name in overrides) {
-      this[name] = overrides[name]
-    }
-    return this
-  }
-
-  clone(overrides = {}) {
-    let cloned = cloneNode(this)
-    for (let name in overrides) {
-      cloned[name] = overrides[name]
-    }
-    return cloned
-  }
-
-  cloneBefore(overrides = {}) {
-    let cloned = this.clone(overrides)
-    this.parent.insertBefore(this, cloned)
-    return cloned
-  }
-
-  cloneAfter(overrides = {}) {
-    let cloned = this.clone(overrides)
-    this.parent.insertAfter(this, cloned)
-    return cloned
-  }
-
   replaceWith(...nodes) {
     if (this.parent) {
       let bookmark = this
@@ -6215,28 +6427,6 @@ class Node {
     return this
   }
 
-  next() {
-    if (!this.parent) return undefined
-    let index = this.parent.index(this)
-    return this.parent.nodes[index + 1]
-  }
-
-  prev() {
-    if (!this.parent) return undefined
-    let index = this.parent.index(this)
-    return this.parent.nodes[index - 1]
-  }
-
-  before(add) {
-    this.parent.insertBefore(this, add)
-    return this
-  }
-
-  after(add) {
-    this.parent.insertAfter(this, add)
-    return this
-  }
-
   root() {
     let result = this
     while (result.parent && result.parent.type !== 'document') {
@@ -6245,17 +6435,6 @@ class Node {
     return result
   }
 
-  raw(prop, defaultType) {
-    let str = new Stringifier()
-    return str.raw(this, prop, defaultType)
-  }
-
-  cleanRaws(keepBetween) {
-    delete this.raws.before
-    delete this.raws.after
-    if (!keepBetween) delete this.raws.between
-  }
-
   toJSON(_, inputs) {
     let fixed = {}
     let emitInputs = inputs == null
@@ -6288,9 +6467,9 @@ class Node {
           inputsNextIndex++
         }
         fixed[name] = {
+          end: value.end,
           inputId,
-          start: value.start,
-          end: value.end
+          start: value.start
         }
       } else {
         fixed[name] = value
@@ -6304,118 +6483,6 @@ class Node {
     return fixed
   }
 
-  positionInside(index) {
-    let string = this.toString()
-    let column = this.source.start.column
-    let line = this.source.start.line
-
-    for (let i = 0; i < index; i++) {
-      if (string[i] === '\n') {
-        column = 1
-        line += 1
-      } else {
-        column += 1
-      }
-    }
-
-    return { line, column }
-  }
-
-  positionBy(opts) {
-    let pos = this.source.start
-    if (opts.index) {
-      pos = this.positionInside(opts.index)
-    } else if (opts.word) {
-      let index = this.toString().indexOf(opts.word)
-      if (index !== -1) pos = this.positionInside(index)
-    }
-    return pos
-  }
-
-  rangeBy(opts) {
-    let start = {
-      line: this.source.start.line,
-      column: this.source.start.column
-    }
-    let end = this.source.end
-      ? {
-          line: this.source.end.line,
-          column: this.source.end.column + 1
-        }
-      : {
-          line: start.line,
-          column: start.column + 1
-        }
-
-    if (opts.word) {
-      let index = this.toString().indexOf(opts.word)
-      if (index !== -1) {
-        start = this.positionInside(index)
-        end = this.positionInside(index + opts.word.length)
-      }
-    } else {
-      if (opts.start) {
-        start = {
-          line: opts.start.line,
-          column: opts.start.column
-        }
-      } else if (opts.index) {
-        start = this.positionInside(opts.index)
-      }
-
-      if (opts.end) {
-        end = {
-          line: opts.end.line,
-          column: opts.end.column
-        }
-      } else if (opts.endIndex) {
-        end = this.positionInside(opts.endIndex)
-      } else if (opts.index) {
-        end = this.positionInside(opts.index + 1)
-      }
-    }
-
-    if (
-      end.line < start.line ||
-      (end.line === start.line && end.column <= start.column)
-    ) {
-      end = { line: start.line, column: start.column + 1 }
-    }
-
-    return { start, end }
-  }
-
-  getProxyProcessor() {
-    return {
-      set(node, prop, value) {
-        if (node[prop] === value) return true
-        node[prop] = value
-        if (
-          prop === 'prop' ||
-          prop === 'value' ||
-          prop === 'name' ||
-          prop === 'params' ||
-          prop === 'important' ||
-          /* c8 ignore next */
-          prop === 'text'
-        ) {
-          node.markDirty()
-        }
-        return true
-      },
-
-      get(node, prop) {
-        if (prop === 'proxyOf') {
-          return node
-        } else if (prop === 'root') {
-          return () => node.root().toProxy()
-        } else {
-          return node[prop]
-        }
-      }
-    }
-  }
-
   toProxy() {
     if (!this.proxyCache) {
       this.proxyCache = new Proxy(this, this.getProxyProcessor())
@@ -6423,26 +6490,19 @@ class Node {
     return this.proxyCache
   }
 
-  addToError(error) {
-    error.postcssNode = this
-    if (error.stack && this.source && /\n\s{4}at /.test(error.stack)) {
-      let s = this.source
-      error.stack = error.stack.replace(
-        /\n\s{4}at /,
-        `$&${s.input.from}:${s.start.line}:${s.start.column}$&`
-      )
-    }
-    return error
+  toString(stringifier = stringify) {
+    if (stringifier.stringify) stringifier = stringifier.stringify
+    let result = ''
+    stringifier(this, i => {
+      result += i
+    })
+    return result
   }
 
-  markDirty() {
-    if (this[isClean]) {
-      this[isClean] = false
-      let next = this
-      while ((next = next.parent)) {
-        next[isClean] = false
-      }
-    }
+  warn(result, text, opts) {
+    let data = { node: this }
+    for (let i in opts) data[i] = opts[i]
+    return result.warn(text, data)
   }
 
   get proxyOf() {
@@ -6543,55 +6603,150 @@ class Parser {
     this.customProperty = false
 
     this.createTokenizer()
-    this.root.source = { input, start: { offset: 0, line: 1, column: 1 } }
+    this.root.source = { input, start: { column: 1, line: 1, offset: 0 } }
   }
 
-  createTokenizer() {
-    this.tokenizer = tokenizer(this.input)
-  }
+  atrule(token) {
+    let node = new AtRule()
+    node.name = token[1].slice(1)
+    if (node.name === '') {
+      this.unnamedAtrule(node, token)
+    }
+    this.init(node, token[2])
+
+    let type
+    let prev
+    let shift
+    let last = false
+    let open = false
+    let params = []
+    let brackets = []
 
-  parse() {
-    let token
     while (!this.tokenizer.endOfFile()) {
       token = this.tokenizer.nextToken()
+      type = token[0]
 
-      switch (token[0]) {
-        case 'space':
-          this.spaces += token[1]
+      if (type === '(' || type === '[') {
+        brackets.push(type === '(' ? ')' : ']')
+      } else if (type === '{' && brackets.length > 0) {
+        brackets.push('}')
+      } else if (type === brackets[brackets.length - 1]) {
+        brackets.pop()
+      }
+
+      if (brackets.length === 0) {
+        if (type === ';') {
+          node.source.end = this.getPosition(token[2])
+          node.source.end.offset++
+          this.semicolon = true
+          break
+        } else if (type === '{') {
+          open = true
+          break
+        } else if (type === '}') {
+          if (params.length > 0) {
+            shift = params.length - 1
+            prev = params[shift]
+            while (prev && prev[0] === 'space') {
+              prev = params[--shift]
+            }
+            if (prev) {
+              node.source.end = this.getPosition(prev[3] || prev[2])
+              node.source.end.offset++
+            }
+          }
+          this.end(token)
           break
+        } else {
+          params.push(token)
+        }
+      } else {
+        params.push(token)
+      }
 
-        case ';':
-          this.freeSemicolon(token)
-          break
+      if (this.tokenizer.endOfFile()) {
+        last = true
+        break
+      }
+    }
 
-        case '}':
-          this.end(token)
-          break
+    node.raws.between = this.spacesAndCommentsFromEnd(params)
+    if (params.length) {
+      node.raws.afterName = this.spacesAndCommentsFromStart(params)
+      this.raw(node, 'params', params)
+      if (last) {
+        token = params[params.length - 1]
+        node.source.end = this.getPosition(token[3] || token[2])
+        node.source.end.offset++
+        this.spaces = node.raws.between
+        node.raws.between = ''
+      }
+    } else {
+      node.raws.afterName = ''
+      node.params = ''
+    }
 
-        case 'comment':
-          this.comment(token)
-          break
+    if (open) {
+      node.nodes = []
+      this.current = node
+    }
+  }
 
-        case 'at-word':
-          this.atrule(token)
-          break
+  checkMissedSemicolon(tokens) {
+    let colon = this.colon(tokens)
+    if (colon === false) return
 
-        case '{':
-          this.emptyRule(token)
-          break
+    let founded = 0
+    let token
+    for (let j = colon - 1; j >= 0; j--) {
+      token = tokens[j]
+      if (token[0] !== 'space') {
+        founded += 1
+        if (founded === 2) break
+      }
+    }
+    // If the token is a word, e.g. `!important`, `red` or any other valid property's value.
+    // Then we need to return the colon after that word token. [3] is the "end" colon of that word.
+    // And because we need it after that one we do +1 to get the next one.
+    throw this.input.error(
+      'Missed semicolon',
+      token[0] === 'word' ? token[3] + 1 : token[2]
+    )
+  }
 
-        default:
-          this.other(token)
-          break
+  colon(tokens) {
+    let brackets = 0
+    let token, type, prev
+    for (let [i, element] of tokens.entries()) {
+      token = element
+      type = token[0]
+
+      if (type === '(') {
+        brackets += 1
+      }
+      if (type === ')') {
+        brackets -= 1
+      }
+      if (brackets === 0 && type === ':') {
+        if (!prev) {
+          this.doubleColon(token)
+        } else if (prev[0] === 'word' && prev[1] === 'progid') {
+          continue
+        } else {
+          return i
+        }
       }
+
+      prev = token
     }
-    this.endFile()
+    return false
   }
 
   comment(token) {
     let node = new Comment()
     this.init(node, token[2])
     node.source.end = this.getPosition(token[3] || token[2])
+    node.source.end.offset++
 
     let text = token[1].slice(2, -2)
     if (/^\s*$/.test(text)) {
@@ -6606,86 +6761,8 @@ class Parser {
     }
   }
 
-  emptyRule(token) {
-    let node = new Rule()
-    this.init(node, token[2])
-    node.selector = ''
-    node.raws.between = ''
-    this.current = node
-  }
-
-  other(start) {
-    let end = false
-    let type = null
-    let colon = false
-    let bracket = null
-    let brackets = []
-    let customProperty = start[1].startsWith('--')
-
-    let tokens = []
-    let token = start
-    while (token) {
-      type = token[0]
-      tokens.push(token)
-
-      if (type === '(' || type === '[') {
-        if (!bracket) bracket = token
-        brackets.push(type === '(' ? ')' : ']')
-      } else if (customProperty && colon && type === '{') {
-        if (!bracket) bracket = token
-        brackets.push('}')
-      } else if (brackets.length === 0) {
-        if (type === ';') {
-          if (colon) {
-            this.decl(tokens, customProperty)
-            return
-          } else {
-            break
-          }
-        } else if (type === '{') {
-          this.rule(tokens)
-          return
-        } else if (type === '}') {
-          this.tokenizer.back(tokens.pop())
-          end = true
-          break
-        } else if (type === ':') {
-          colon = true
-        }
-      } else if (type === brackets[brackets.length - 1]) {
-        brackets.pop()
-        if (brackets.length === 0) bracket = null
-      }
-
-      token = this.tokenizer.nextToken()
-    }
-
-    if (this.tokenizer.endOfFile()) end = true
-    if (brackets.length > 0) this.unclosedBracket(bracket)
-
-    if (end && colon) {
-      if (!customProperty) {
-        while (tokens.length) {
-          token = tokens[tokens.length - 1][0]
-          if (token !== 'space' && token !== 'comment') break
-          this.tokenizer.back(tokens.pop())
-        }
-      }
-      this.decl(tokens, customProperty)
-    } else {
-      this.unknownWord(tokens)
-    }
-  }
-
-  rule(tokens) {
-    tokens.pop()
-
-    let node = new Rule()
-    this.init(node, tokens[0][2])
-
-    node.raws.between = this.spacesAndCommentsFromEnd(tokens)
-    this.raw(node, 'selector', tokens)
-    this.current = node
+  createTokenizer() {
+    this.tokenizer = tokenizer(this.input)
   }
 
   decl(tokens, customProperty) {
@@ -6701,6 +6778,7 @@ class Parser {
     node.source.end = this.getPosition(
       last[3] || last[2] || findLastWithPosition(tokens)
     )
+    node.source.end.offset++
 
     while (tokens[0][0] !== 'word') {
       if (tokens.length === 1) this.unknownWord(tokens)
@@ -6744,137 +6822,70 @@ class Parser {
     while (tokens.length) {
       next = tokens[0][0]
       if (next !== 'space' && next !== 'comment') break
-      firstSpaces.push(tokens.shift())
-    }
-
-    this.precheckMissedSemicolon(tokens)
-
-    for (let i = tokens.length - 1; i >= 0; i--) {
-      token = tokens[i]
-      if (token[1].toLowerCase() === '!important') {
-        node.important = true
-        let string = this.stringFrom(tokens, i)
-        string = this.spacesFromEnd(tokens) + string
-        if (string !== ' !important') node.raws.important = string
-        break
-      } else if (token[1].toLowerCase() === 'important') {
-        let cache = tokens.slice(0)
-        let str = ''
-        for (let j = i; j > 0; j--) {
-          let type = cache[j][0]
-          if (str.trim().indexOf('!') === 0 && type !== 'space') {
-            break
-          }
-          str = cache.pop()[1] + str
-        }
-        if (str.trim().indexOf('!') === 0) {
-          node.important = true
-          node.raws.important = str
-          tokens = cache
-        }
-      }
-
-      if (token[0] !== 'space' && token[0] !== 'comment') {
-        break
-      }
-    }
-
-    let hasWord = tokens.some(i => i[0] !== 'space' && i[0] !== 'comment')
-
-    if (hasWord) {
-      node.raws.between += firstSpaces.map(i => i[1]).join('')
-      firstSpaces = []
-    }
-    this.raw(node, 'value', firstSpaces.concat(tokens), customProperty)
-
-    if (node.value.includes(':') && !customProperty) {
-      this.checkMissedSemicolon(tokens)
-    }
-  }
-
-  atrule(token) {
-    let node = new AtRule()
-    node.name = token[1].slice(1)
-    if (node.name === '') {
-      this.unnamedAtrule(node, token)
-    }
-    this.init(node, token[2])
-
-    let type
-    let prev
-    let shift
-    let last = false
-    let open = false
-    let params = []
-    let brackets = []
-
-    while (!this.tokenizer.endOfFile()) {
-      token = this.tokenizer.nextToken()
-      type = token[0]
-
-      if (type === '(' || type === '[') {
-        brackets.push(type === '(' ? ')' : ']')
-      } else if (type === '{' && brackets.length > 0) {
-        brackets.push('}')
-      } else if (type === brackets[brackets.length - 1]) {
-        brackets.pop()
-      }
+      firstSpaces.push(tokens.shift())
+    }
 
-      if (brackets.length === 0) {
-        if (type === ';') {
-          node.source.end = this.getPosition(token[2])
-          this.semicolon = true
-          break
-        } else if (type === '{') {
-          open = true
-          break
-        } else if (type === '}') {
-          if (params.length > 0) {
-            shift = params.length - 1
-            prev = params[shift]
-            while (prev && prev[0] === 'space') {
-              prev = params[--shift]
-            }
-            if (prev) {
-              node.source.end = this.getPosition(prev[3] || prev[2])
-            }
+    this.precheckMissedSemicolon(tokens)
+
+    for (let i = tokens.length - 1; i >= 0; i--) {
+      token = tokens[i]
+      if (token[1].toLowerCase() === '!important') {
+        node.important = true
+        let string = this.stringFrom(tokens, i)
+        string = this.spacesFromEnd(tokens) + string
+        if (string !== ' !important') node.raws.important = string
+        break
+      } else if (token[1].toLowerCase() === 'important') {
+        let cache = tokens.slice(0)
+        let str = ''
+        for (let j = i; j > 0; j--) {
+          let type = cache[j][0]
+          if (str.trim().indexOf('!') === 0 && type !== 'space') {
+            break
           }
-          this.end(token)
-          break
-        } else {
-          params.push(token)
+          str = cache.pop()[1] + str
+        }
+        if (str.trim().indexOf('!') === 0) {
+          node.important = true
+          node.raws.important = str
+          tokens = cache
         }
-      } else {
-        params.push(token)
       }
 
-      if (this.tokenizer.endOfFile()) {
-        last = true
+      if (token[0] !== 'space' && token[0] !== 'comment') {
         break
       }
     }
 
-    node.raws.between = this.spacesAndCommentsFromEnd(params)
-    if (params.length) {
-      node.raws.afterName = this.spacesAndCommentsFromStart(params)
-      this.raw(node, 'params', params)
-      if (last) {
-        token = params[params.length - 1]
-        node.source.end = this.getPosition(token[3] || token[2])
-        this.spaces = node.raws.between
-        node.raws.between = ''
-      }
-    } else {
-      node.raws.afterName = ''
-      node.params = ''
+    let hasWord = tokens.some(i => i[0] !== 'space' && i[0] !== 'comment')
+
+    if (hasWord) {
+      node.raws.between += firstSpaces.map(i => i[1]).join('')
+      firstSpaces = []
     }
+    this.raw(node, 'value', firstSpaces.concat(tokens), customProperty)
 
-    if (open) {
-      node.nodes = []
-      this.current = node
+    if (node.value.includes(':') && !customProperty) {
+      this.checkMissedSemicolon(tokens)
     }
   }
 
+  doubleColon(token) {
+    throw this.input.error(
+      'Double colon',
+      { offset: token[2] },
+      { offset: token[2] + token[1].length }
+    )
+  }
+
+  emptyRule(token) {
+    let node = new Rule()
+    this.init(node, token[2])
+    node.selector = ''
+    node.raws.between = ''
+    this.current = node
+  }
+
   end(token) {
     if (this.current.nodes && this.current.nodes.length) {
       this.current.raws.semicolon = this.semicolon
@@ -6886,6 +6897,7 @@ class Parser {
 
     if (this.current.parent) {
       this.current.source.end = this.getPosition(token[2])
+      this.current.source.end.offset++
       this.current = this.current.parent
     } else {
       this.unexpectedClose(token)
@@ -6898,6 +6910,7 @@ class Parser {
       this.current.raws.semicolon = this.semicolon
     }
     this.current.raws.after = (this.current.raws.after || '') + this.spaces
+    this.root.source.end = this.getPosition(this.tokenizer.position())
   }
 
   freeSemicolon(token) {
@@ -6916,23 +6929,128 @@ class Parser {
   getPosition(offset) {
     let pos = this.input.fromOffset(offset)
     return {
-      offset,
+      column: pos.col,
       line: pos.line,
-      column: pos.col
+      offset
     }
   }
 
   init(node, offset) {
     this.current.push(node)
     node.source = {
-      start: this.getPosition(offset),
-      input: this.input
+      input: this.input,
+      start: this.getPosition(offset)
     }
     node.raws.before = this.spaces
     this.spaces = ''
     if (node.type !== 'comment') this.semicolon = false
   }
 
+  other(start) {
+    let end = false
+    let type = null
+    let colon = false
+    let bracket = null
+    let brackets = []
+    let customProperty = start[1].startsWith('--')
+
+    let tokens = []
+    let token = start
+    while (token) {
+      type = token[0]
+      tokens.push(token)
+
+      if (type === '(' || type === '[') {
+        if (!bracket) bracket = token
+        brackets.push(type === '(' ? ')' : ']')
+      } else if (customProperty && colon && type === '{') {
+        if (!bracket) bracket = token
+        brackets.push('}')
+      } else if (brackets.length === 0) {
+        if (type === ';') {
+          if (colon) {
+            this.decl(tokens, customProperty)
+            return
+          } else {
+            break
+          }
+        } else if (type === '{') {
+          this.rule(tokens)
+          return
+        } else if (type === '}') {
+          this.tokenizer.back(tokens.pop())
+          end = true
+          break
+        } else if (type === ':') {
+          colon = true
+        }
+      } else if (type === brackets[brackets.length - 1]) {
+        brackets.pop()
+        if (brackets.length === 0) bracket = null
+      }
+
+      token = this.tokenizer.nextToken()
+    }
+
+    if (this.tokenizer.endOfFile()) end = true
+    if (brackets.length > 0) this.unclosedBracket(bracket)
+
+    if (end && colon) {
+      if (!customProperty) {
+        while (tokens.length) {
+          token = tokens[tokens.length - 1][0]
+          if (token !== 'space' && token !== 'comment') break
+          this.tokenizer.back(tokens.pop())
+        }
+      }
+      this.decl(tokens, customProperty)
+    } else {
+      this.unknownWord(tokens)
+    }
+  }
+
+  parse() {
+    let token
+    while (!this.tokenizer.endOfFile()) {
+      token = this.tokenizer.nextToken()
+
+      switch (token[0]) {
+        case 'space':
+          this.spaces += token[1]
+          break
+
+        case ';':
+          this.freeSemicolon(token)
+          break
+
+        case '}':
+          this.end(token)
+          break
+
+        case 'comment':
+          this.comment(token)
+          break
+
+        case 'at-word':
+          this.atrule(token)
+          break
+
+        case '{':
+          this.emptyRule(token)
+          break
+
+        default:
+          this.other(token)
+          break
+      }
+    }
+    this.endFile()
+  }
+
+  precheckMissedSemicolon(/* tokens */) {
+    // Hook for Safe Parser
+  }
+
   raw(node, prop, tokens, customProperty) {
     let token, type
     let length = tokens.length
@@ -6963,11 +7081,22 @@ class Parser {
     }
     if (!clean) {
       let raw = tokens.reduce((all, i) => all + i[1], '')
-      node.raws[prop] = { value, raw }
+      node.raws[prop] = { raw, value }
     }
     node[prop] = value
   }
 
+  rule(tokens) {
+    tokens.pop()
+
+    let node = new Rule()
+    this.init(node, tokens[0][2])
+
+    node.raws.between = this.spacesAndCommentsFromEnd(tokens)
+    this.raw(node, 'selector', tokens)
+    this.current = node
+  }
+
   spacesAndCommentsFromEnd(tokens) {
     let lastTokenType
     let spaces = ''
@@ -6979,6 +7108,8 @@ class Parser {
     return spaces
   }
 
+  // Errors
+
   spacesAndCommentsFromStart(tokens) {
     let next
     let spaces = ''
@@ -6986,59 +7117,34 @@ class Parser {
       next = tokens[0][0]
       if (next !== 'space' && next !== 'comment') break
       spaces += tokens.shift()[1]
-    }
-    return spaces
-  }
-
-  spacesFromEnd(tokens) {
-    let lastTokenType
-    let spaces = ''
-    while (tokens.length) {
-      lastTokenType = tokens[tokens.length - 1][0]
-      if (lastTokenType !== 'space') break
-      spaces = tokens.pop()[1] + spaces
-    }
-    return spaces
-  }
-
-  stringFrom(tokens, from) {
-    let result = ''
-    for (let i = from; i < tokens.length; i++) {
-      result += tokens[i][1]
-    }
-    tokens.splice(from, tokens.length - from)
-    return result
-  }
-
-  colon(tokens) {
-    let brackets = 0
-    let token, type, prev
-    for (let [i, element] of tokens.entries()) {
-      token = element
-      type = token[0]
-
-      if (type === '(') {
-        brackets += 1
-      }
-      if (type === ')') {
-        brackets -= 1
-      }
-      if (brackets === 0 && type === ':') {
-        if (!prev) {
-          this.doubleColon(token)
-        } else if (prev[0] === 'word' && prev[1] === 'progid') {
-          continue
-        } else {
-          return i
-        }
-      }
+    }
+    return spaces
+  }
 
-      prev = token
+  spacesFromEnd(tokens) {
+    let lastTokenType
+    let spaces = ''
+    while (tokens.length) {
+      lastTokenType = tokens[tokens.length - 1][0]
+      if (lastTokenType !== 'space') break
+      spaces = tokens.pop()[1] + spaces
     }
-    return false
+    return spaces
   }
 
-  // Errors
+  stringFrom(tokens, from) {
+    let result = ''
+    for (let i = from; i < tokens.length; i++) {
+      result += tokens[i][1]
+    }
+    tokens.splice(from, tokens.length - from)
+    return result
+  }
+
+  unclosedBlock() {
+    let pos = this.current.source.start
+    throw this.input.error('Unclosed block', pos.line, pos.column)
+  }
 
   unclosedBracket(bracket) {
     throw this.input.error(
@@ -7048,14 +7154,6 @@ class Parser {
     )
   }
 
-  unknownWord(tokens) {
-    throw this.input.error(
-      'Unknown word',
-      { offset: tokens[0][2] },
-      { offset: tokens[0][2] + tokens[0][1].length }
-    )
-  }
-
   unexpectedClose(token) {
     throw this.input.error(
       'Unexpected }',
@@ -7064,16 +7162,11 @@ class Parser {
     )
   }
 
-  unclosedBlock() {
-    let pos = this.current.source.start
-    throw this.input.error('Unclosed block', pos.line, pos.column)
-  }
-
-  doubleColon(token) {
+  unknownWord(tokens) {
     throw this.input.error(
-      'Double colon',
-      { offset: token[2] },
-      { offset: token[2] + token[1].length }
+      'Unknown word',
+      { offset: tokens[0][2] },
+      { offset: tokens[0][2] + tokens[0][1].length }
     )
   }
 
@@ -7084,32 +7177,6 @@ class Parser {
       { offset: token[2] + token[1].length }
     )
   }
-
-  precheckMissedSemicolon(/* tokens */) {
-    // Hook for Safe Parser
-  }
-
-  checkMissedSemicolon(tokens) {
-    let colon = this.colon(tokens)
-    if (colon === false) return
-
-    let founded = 0
-    let token
-    for (let j = colon - 1; j >= 0; j--) {
-      token = tokens[j]
-      if (token[0] !== 'space') {
-        founded += 1
-        if (founded === 2) break
-      }
-    }
-    // If the token is a word, e.g. `!important`, `red` or any other valid property's value.
-    // Then we need to return the colon after that word token. [3] is the "end" colon of that word.
-    // And because we need it after that one we do +1 to get the next one.
-    throw this.input.error(
-      'Missed semicolon',
-      token[0] === 'word' ? token[3] + 1 : token[2]
-    )
-  }
 }
 
 module.exports = Parser
@@ -7267,22 +7334,37 @@ class PreviousMap {
     return this.consumerCache
   }
 
-  withContent() {
-    return !!(
-      this.consumer().sourcesContent &&
-      this.consumer().sourcesContent.length > 0
-    )
-  }
+  decodeInline(text) {
+    let baseCharsetUri = /^data:application\/json;charset=utf-?8;base64,/
+    let baseUri = /^data:application\/json;base64,/
+    let charsetUri = /^data:application\/json;charset=utf-?8,/
+    let uri = /^data:application\/json,/
 
-  startWith(string, start) {
-    if (!string) return false
-    return string.substr(0, start.length) === start
+    if (charsetUri.test(text) || uri.test(text)) {
+      return decodeURIComponent(text.substr(RegExp.lastMatch.length))
+    }
+
+    if (baseCharsetUri.test(text) || baseUri.test(text)) {
+      return fromBase64(text.substr(RegExp.lastMatch.length))
+    }
+
+    let encoding = text.match(/data:application\/json;([^,]+),/)[1]
+    throw new Error('Unsupported source map encoding ' + encoding)
   }
 
   getAnnotationURL(sourceMapString) {
     return sourceMapString.replace(/^\/\*\s*# sourceMappingURL=/, '').trim()
   }
 
+  isMap(map) {
+    if (typeof map !== 'object') return false
+    return (
+      typeof map.mappings === 'string' ||
+      typeof map._mappings === 'string' ||
+      Array.isArray(map.sections)
+    )
+  }
+
   loadAnnotation(css) {
     let comments = css.match(/\/\*\s*# sourceMappingURL=/gm)
     if (!comments) return
@@ -7297,24 +7379,6 @@ class PreviousMap {
     }
   }
 
-  decodeInline(text) {
-    let baseCharsetUri = /^data:application\/json;charset=utf-?8;base64,/
-    let baseUri = /^data:application\/json;base64,/
-    let charsetUri = /^data:application\/json;charset=utf-?8,/
-    let uri = /^data:application\/json,/
-
-    if (charsetUri.test(text) || uri.test(text)) {
-      return decodeURIComponent(text.substr(RegExp.lastMatch.length))
-    }
-
-    if (baseCharsetUri.test(text) || baseUri.test(text)) {
-      return fromBase64(text.substr(RegExp.lastMatch.length))
-    }
-
-    let encoding = text.match(/data:application\/json;([^,]+),/)[1]
-    throw new Error('Unsupported source map encoding ' + encoding)
-  }
-
   loadFile(path) {
     this.root = dirname(path)
     if (existsSync(path)) {
@@ -7360,12 +7424,15 @@ class PreviousMap {
     }
   }
 
-  isMap(map) {
-    if (typeof map !== 'object') return false
-    return (
-      typeof map.mappings === 'string' ||
-      typeof map._mappings === 'string' ||
-      Array.isArray(map.sections)
+  startWith(string, start) {
+    if (!string) return false
+    return string.substr(0, start.length) === start
+  }
+
+  withContent() {
+    return !!(
+      this.consumer().sourcesContent &&
+      this.consumer().sourcesContent.length > 0
     )
   }
 }
@@ -7389,28 +7456,10 @@ let Root = __nccwpck_require__(9659)
 
 class Processor {
   constructor(plugins = []) {
-    this.version = '8.4.23'
+    this.version = '8.4.31'
     this.plugins = this.normalize(plugins)
   }
 
-  use(plugin) {
-    this.plugins = this.plugins.concat(this.normalize([plugin]))
-    return this
-  }
-
-  process(css, opts = {}) {
-    if (
-      this.plugins.length === 0 &&
-      typeof opts.parser === 'undefined' &&
-      typeof opts.stringifier === 'undefined' &&
-      typeof opts.syntax === 'undefined'
-    ) {
-      return new NoWorkResult(this, css, opts)
-    } else {
-      return new LazyResult(this, css, opts)
-    }
-  }
-
   normalize(plugins) {
     let normalized = []
     for (let i of plugins) {
@@ -7440,6 +7489,24 @@ class Processor {
     }
     return normalized
   }
+
+  process(css, opts = {}) {
+    if (
+      this.plugins.length === 0 &&
+      typeof opts.parser === 'undefined' &&
+      typeof opts.stringifier === 'undefined' &&
+      typeof opts.syntax === 'undefined'
+    ) {
+      return new NoWorkResult(this, css, opts)
+    } else {
+      return new LazyResult(this, css, opts)
+    }
+  }
+
+  use(plugin) {
+    this.plugins = this.plugins.concat(this.normalize([plugin]))
+    return this
+  }
 }
 
 module.exports = Processor
@@ -7518,16 +7585,6 @@ class Root extends Container {
     if (!this.nodes) this.nodes = []
   }
 
-  removeChild(child, ignore) {
-    let index = this.index(child)
-
-    if (!ignore && index === 0 && this.nodes.length > 1) {
-      this.nodes[1].raws.before = this.nodes[index].raws.before
-    }
-
-    return super.removeChild(child)
-  }
-
   normalize(child, sample, type) {
     let nodes = super.normalize(child)
 
@@ -7548,6 +7605,16 @@ class Root extends Container {
     return nodes
   }
 
+  removeChild(child, ignore) {
+    let index = this.index(child)
+
+    if (!ignore && index === 0 && this.nodes.length > 1) {
+      this.nodes[1].raws.before = this.nodes[index].raws.before
+    }
+
+    return super.removeChild(child)
+  }
+
   toResult(opts = {}) {
     let lazy = new LazyResult(new Processor(), this, opts)
     return lazy.stringify()
@@ -7612,17 +7679,17 @@ Container.registerRule(Rule)
 
 
 const DEFAULT_RAW = {
-  colon: ': ',
-  indent: '    ',
-  beforeDecl: '\n',
-  beforeRule: '\n',
-  beforeOpen: ' ',
+  after: '\n',
   beforeClose: '\n',
   beforeComment: '\n',
-  after: '\n',
-  emptyBody: '',
+  beforeDecl: '\n',
+  beforeOpen: ' ',
+  beforeRule: '\n',
+  colon: ': ',
   commentLeft: ' ',
   commentRight: ' ',
+  emptyBody: '',
+  indent: '    ',
   semicolon: false
 }
 
@@ -7630,57 +7697,9 @@ function capitalize(str) {
   return str[0].toUpperCase() + str.slice(1)
 }
 
-class Stringifier {
-  constructor(builder) {
-    this.builder = builder
-  }
-
-  stringify(node, semicolon) {
-    /* c8 ignore start */
-    if (!this[node.type]) {
-      throw new Error(
-        'Unknown AST node type ' +
-          node.type +
-          '. ' +
-          'Maybe you need to change PostCSS stringifier.'
-      )
-    }
-    /* c8 ignore stop */
-    this[node.type](node, semicolon)
-  }
-
-  document(node) {
-    this.body(node)
-  }
-
-  root(node) {
-    this.body(node)
-    if (node.raws.after) this.builder(node.raws.after)
-  }
-
-  comment(node) {
-    let left = this.raw(node, 'left', 'commentLeft')
-    let right = this.raw(node, 'right', 'commentRight')
-    this.builder('/*' + left + node.text + right + '*/', node)
-  }
-
-  decl(node, semicolon) {
-    let between = this.raw(node, 'between', 'colon')
-    let string = node.prop + between + this.rawValue(node, 'value')
-
-    if (node.important) {
-      string += node.raws.important || ' !important'
-    }
-
-    if (semicolon) string += ';'
-    this.builder(string, node)
-  }
-
-  rule(node) {
-    this.block(node, this.rawValue(node, 'selector'))
-    if (node.raws.ownSemicolon) {
-      this.builder(node.raws.ownSemicolon, node, 'end')
-    }
+class Stringifier {
+  constructor(builder) {
+    this.builder = builder
   }
 
   atrule(node, semicolon) {
@@ -7701,20 +7720,33 @@ class Stringifier {
     }
   }
 
-  body(node) {
-    let last = node.nodes.length - 1
-    while (last > 0) {
-      if (node.nodes[last].type !== 'comment') break
-      last -= 1
+  beforeAfter(node, detect) {
+    let value
+    if (node.type === 'decl') {
+      value = this.raw(node, null, 'beforeDecl')
+    } else if (node.type === 'comment') {
+      value = this.raw(node, null, 'beforeComment')
+    } else if (detect === 'before') {
+      value = this.raw(node, null, 'beforeRule')
+    } else {
+      value = this.raw(node, null, 'beforeClose')
     }
 
-    let semicolon = this.raw(node, 'semicolon')
-    for (let i = 0; i < node.nodes.length; i++) {
-      let child = node.nodes[i]
-      let before = this.raw(child, 'before')
-      if (before) this.builder(before)
-      this.stringify(child, last !== i || semicolon)
+    let buf = node.parent
+    let depth = 0
+    while (buf && buf.type !== 'root') {
+      depth += 1
+      buf = buf.parent
+    }
+
+    if (value.includes('\n')) {
+      let indent = this.raw(node, null, 'indent')
+      if (indent.length) {
+        for (let step = 0; step < depth; step++) value += indent
+      }
     }
+
+    return value
   }
 
   block(node, start) {
@@ -7733,6 +7765,44 @@ class Stringifier {
     this.builder('}', node, 'end')
   }
 
+  body(node) {
+    let last = node.nodes.length - 1
+    while (last > 0) {
+      if (node.nodes[last].type !== 'comment') break
+      last -= 1
+    }
+
+    let semicolon = this.raw(node, 'semicolon')
+    for (let i = 0; i < node.nodes.length; i++) {
+      let child = node.nodes[i]
+      let before = this.raw(child, 'before')
+      if (before) this.builder(before)
+      this.stringify(child, last !== i || semicolon)
+    }
+  }
+
+  comment(node) {
+    let left = this.raw(node, 'left', 'commentLeft')
+    let right = this.raw(node, 'right', 'commentRight')
+    this.builder('/*' + left + node.text + right + '*/', node)
+  }
+
+  decl(node, semicolon) {
+    let between = this.raw(node, 'between', 'colon')
+    let string = node.prop + between + this.rawValue(node, 'value')
+
+    if (node.important) {
+      string += node.raws.important || ' !important'
+    }
+
+    if (semicolon) string += ';'
+    this.builder(string, node)
+  }
+
+  document(node) {
+    this.body(node)
+  }
+
   raw(node, own, detect) {
     let value
     if (!detect) detect = own
@@ -7787,42 +7857,20 @@ class Stringifier {
     return value
   }
 
-  rawSemicolon(root) {
-    let value
-    root.walk(i => {
-      if (i.nodes && i.nodes.length && i.last.type === 'decl') {
-        value = i.raws.semicolon
-        if (typeof value !== 'undefined') return false
-      }
-    })
-    return value
-  }
-
-  rawEmptyBody(root) {
-    let value
-    root.walk(i => {
-      if (i.nodes && i.nodes.length === 0) {
-        value = i.raws.after
-        if (typeof value !== 'undefined') return false
-      }
-    })
-    return value
-  }
-
-  rawIndent(root) {
-    if (root.raws.indent) return root.raws.indent
+  rawBeforeClose(root) {
     let value
     root.walk(i => {
-      let p = i.parent
-      if (p && p !== root && p.parent && p.parent === root) {
-        if (typeof i.raws.before !== 'undefined') {
-          let parts = i.raws.before.split('\n')
-          value = parts[parts.length - 1]
-          value = value.replace(/\S/g, '')
+      if (i.nodes && i.nodes.length > 0) {
+        if (typeof i.raws.after !== 'undefined') {
+          value = i.raws.after
+          if (value.includes('\n')) {
+            value = value.replace(/[^\n]+$/, '')
+          }
           return false
         }
       }
     })
+    if (value) value = value.replace(/\S/g, '')
     return value
   }
 
@@ -7864,6 +7912,17 @@ class Stringifier {
     return value
   }
 
+  rawBeforeOpen(root) {
+    let value
+    root.walk(i => {
+      if (i.type !== 'decl') {
+        value = i.raws.between
+        if (typeof value !== 'undefined') return false
+      }
+    })
+    return value
+  }
+
   rawBeforeRule(root) {
     let value
     root.walk(i => {
@@ -7881,71 +7940,53 @@ class Stringifier {
     return value
   }
 
-  rawBeforeClose(root) {
+  rawColon(root) {
     let value
-    root.walk(i => {
-      if (i.nodes && i.nodes.length > 0) {
-        if (typeof i.raws.after !== 'undefined') {
-          value = i.raws.after
-          if (value.includes('\n')) {
-            value = value.replace(/[^\n]+$/, '')
-          }
-          return false
-        }
+    root.walkDecls(i => {
+      if (typeof i.raws.between !== 'undefined') {
+        value = i.raws.between.replace(/[^\s:]/g, '')
+        return false
       }
     })
-    if (value) value = value.replace(/\S/g, '')
     return value
   }
 
-  rawBeforeOpen(root) {
+  rawEmptyBody(root) {
     let value
     root.walk(i => {
-      if (i.type !== 'decl') {
-        value = i.raws.between
+      if (i.nodes && i.nodes.length === 0) {
+        value = i.raws.after
         if (typeof value !== 'undefined') return false
       }
     })
     return value
   }
 
-  rawColon(root) {
+  rawIndent(root) {
+    if (root.raws.indent) return root.raws.indent
     let value
-    root.walkDecls(i => {
-      if (typeof i.raws.between !== 'undefined') {
-        value = i.raws.between.replace(/[^\s:]/g, '')
-        return false
+    root.walk(i => {
+      let p = i.parent
+      if (p && p !== root && p.parent && p.parent === root) {
+        if (typeof i.raws.before !== 'undefined') {
+          let parts = i.raws.before.split('\n')
+          value = parts[parts.length - 1]
+          value = value.replace(/\S/g, '')
+          return false
+        }
       }
     })
     return value
   }
 
-  beforeAfter(node, detect) {
+  rawSemicolon(root) {
     let value
-    if (node.type === 'decl') {
-      value = this.raw(node, null, 'beforeDecl')
-    } else if (node.type === 'comment') {
-      value = this.raw(node, null, 'beforeComment')
-    } else if (detect === 'before') {
-      value = this.raw(node, null, 'beforeRule')
-    } else {
-      value = this.raw(node, null, 'beforeClose')
-    }
-
-    let buf = node.parent
-    let depth = 0
-    while (buf && buf.type !== 'root') {
-      depth += 1
-      buf = buf.parent
-    }
-
-    if (value.includes('\n')) {
-      let indent = this.raw(node, null, 'indent')
-      if (indent.length) {
-        for (let step = 0; step < depth; step++) value += indent
+    root.walk(i => {
+      if (i.nodes && i.nodes.length && i.last.type === 'decl') {
+        value = i.raws.semicolon
+        if (typeof value !== 'undefined') return false
       }
-    }
-
+    })
     return value
   }
 
@@ -7958,6 +7999,32 @@ class Stringifier {
 
     return value
   }
+
+  root(node) {
+    this.body(node)
+    if (node.raws.after) this.builder(node.raws.after)
+  }
+
+  rule(node) {
+    this.block(node, this.rawValue(node, 'selector'))
+    if (node.raws.ownSemicolon) {
+      this.builder(node.raws.ownSemicolon, node, 'end')
+    }
+  }
+
+  stringify(node, semicolon) {
+    /* c8 ignore start */
+    if (!this[node.type]) {
+      throw new Error(
+        'Unknown AST node type ' +
+          node.type +
+          '. ' +
+          'Maybe you need to change PostCSS stringifier.'
+      )
+    }
+    /* c8 ignore stop */
+    this[node.type](node, semicolon)
+  }
 }
 
 module.exports = Stringifier
@@ -8015,21 +8082,21 @@ function registerInput(dependant) {
 }
 
 const HIGHLIGHT_THEME = {
-  'brackets': pico.cyan,
-  'at-word': pico.cyan,
-  'comment': pico.gray,
-  'string': pico.green,
-  'class': pico.yellow,
-  'hash': pico.magenta,
-  'call': pico.cyan,
+  ';': pico.yellow,
+  ':': pico.yellow,
   '(': pico.cyan,
   ')': pico.cyan,
-  '{': pico.yellow,
-  '}': pico.yellow,
   '[': pico.yellow,
   ']': pico.yellow,
-  ':': pico.yellow,
-  ';': pico.yellow
+  '{': pico.yellow,
+  '}': pico.yellow,
+  'at-word': pico.cyan,
+  'brackets': pico.cyan,
+  'call': pico.cyan,
+  'class': pico.yellow,
+  'comment': pico.gray,
+  'hash': pico.magenta,
+  'string': pico.green
 }
 
 function getTokenType([type, value], processor) {
@@ -8104,7 +8171,7 @@ const AT = '@'.charCodeAt(0)
 
 const RE_AT_END = /[\t\n\f\r "#'()/;[\\\]{}]/g
 const RE_WORD_END = /[\t\n\f\r !"#'():;@[\\\]{}]|\/(?=\*)/g
-const RE_BAD_BRACKET = /.[\n"'(/\\]/
+const RE_BAD_BRACKET = /.[\r\n"'(/\\]/
 const RE_HEX_ESCAPE = /[\da-f]/i
 
 module.exports = function tokenizer(input, options = {}) {
@@ -8341,8 +8408,8 @@ module.exports = function tokenizer(input, options = {}) {
 
   return {
     back,
-    nextToken,
     endOfFile,
+    nextToken,
     position
   }
 }
@@ -8396,8 +8463,8 @@ class Warning {
   toString() {
     if (this.node) {
       return this.node.error(this.text, {
-        plugin: this.plugin,
         index: this.index,
+        plugin: this.plugin,
         word: this.word
       }).message
     }
@@ -8441,8 +8508,17 @@ var _path = _interopRequireDefault(__nccwpck_require__(1017));
 var _utils = __nccwpck_require__(1911);
 var _options = _interopRequireDefault(__nccwpck_require__(5814));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const loaderAPI = () => {};
-loaderAPI.pitch = function loader(request) {
+// eslint-disable-next-line consistent-return
+const loader = function loader(content) {
+  if (this._compiler && this._compiler.options && this._compiler.options.experiments && this._compiler.options.experiments.css && this._module && this._module.type === "css") {
+    return content;
+  }
+};
+loader.pitch = function pitch(request) {
+  if (this._compiler && this._compiler.options && this._compiler.options.experiments && this._compiler.options.experiments.css && this._module && this._module.type === "css") {
+    this.emitWarning(new Error('You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `style-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `style-loader` in your webpack config (now `style-loader` does nothing).'));
+    return;
+  }
   const options = this.getOptions(_options.default);
   const injectType = options.injectType || "styleTag";
   const esModule = typeof options.esModule !== "undefined" ? options.esModule : true;
@@ -8459,6 +8535,8 @@ loaderAPI.pitch = function loader(request) {
     case "linkTag":
       {
         const hmrCode = this.hot ? (0, _utils.getLinkHmrCode)(esModule, this, request) : "";
+
+        // eslint-disable-next-line consistent-return
         return `
       ${(0, _utils.getImportLinkAPICode)(esModule, this)}
       ${(0, _utils.getImportInsertBySelectorCode)(esModule, this, insertType, options)}
@@ -8482,6 +8560,8 @@ ${esModule ? "export default {}" : ""}`;
         const isSingleton = injectType === "lazySingletonStyleTag";
         const isAuto = injectType === "lazyAutoStyleTag";
         const hmrCode = this.hot ? (0, _utils.getStyleHmrCode)(esModule, this, request, true) : "";
+
+        // eslint-disable-next-line consistent-return
         return `
       var exported = {};
 
@@ -8539,6 +8619,8 @@ ${(0, _utils.getExportLazyStyleCode)(esModule, this, request)}
         const isSingleton = injectType === "singletonStyleTag";
         const isAuto = injectType === "autoStyleTag";
         const hmrCode = this.hot ? (0, _utils.getStyleHmrCode)(esModule, this, request, false) : "";
+
+        // eslint-disable-next-line consistent-return
         return `
       ${(0, _utils.getImportStyleAPICode)(esModule, this)}
       ${(0, _utils.getImportStyleDomAPICode)(esModule, this, isSingleton, isAuto)}
@@ -8567,7 +8649,7 @@ ${(0, _utils.getExportStyleCode)(esModule, this, request)}
       }
   }
 };
-var _default = loaderAPI;
+var _default = loader;
 exports["default"] = _default;
 
 /***/ }),
@@ -9007,7 +9089,7 @@ module.exports = JSON.parse('{"title":"CSS Loader options","additionalProperties
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"postcss","version":"8.4.23","description":"Tool for transforming styles with JS plugins","engines":{"node":"^10 || ^12 || >=14"},"exports":{".":{"require":"./lib/postcss.js","import":"./lib/postcss.mjs"},"./lib/at-rule":"./lib/at-rule.js","./lib/comment":"./lib/comment.js","./lib/container":"./lib/container.js","./lib/css-syntax-error":"./lib/css-syntax-error.js","./lib/declaration":"./lib/declaration.js","./lib/fromJSON":"./lib/fromJSON.js","./lib/input":"./lib/input.js","./lib/lazy-result":"./lib/lazy-result.js","./lib/no-work-result":"./lib/no-work-result.js","./lib/list":"./lib/list.js","./lib/map-generator":"./lib/map-generator.js","./lib/node":"./lib/node.js","./lib/parse":"./lib/parse.js","./lib/parser":"./lib/parser.js","./lib/postcss":"./lib/postcss.js","./lib/previous-map":"./lib/previous-map.js","./lib/processor":"./lib/processor.js","./lib/result":"./lib/result.js","./lib/root":"./lib/root.js","./lib/rule":"./lib/rule.js","./lib/stringifier":"./lib/stringifier.js","./lib/stringify":"./lib/stringify.js","./lib/symbols":"./lib/symbols.js","./lib/terminal-highlight":"./lib/terminal-highlight.js","./lib/tokenize":"./lib/tokenize.js","./lib/warn-once":"./lib/warn-once.js","./lib/warning":"./lib/warning.js","./package.json":"./package.json"},"main":"./lib/postcss.js","types":"./lib/postcss.d.ts","keywords":["css","postcss","rework","preprocessor","parser","source map","transform","manipulation","transpiler"],"funding":[{"type":"opencollective","url":"https://opencollective.com/postcss/"},{"type":"tidelift","url":"https://tidelift.com/funding/github/npm/postcss"},{"type":"github","url":"https://github.com/sponsors/ai"}],"author":"Andrey Sitnik <andrey@sitnik.ru>","license":"MIT","homepage":"https://postcss.org/","repository":"postcss/postcss","bugs":{"url":"https://github.com/postcss/postcss/issues"},"dependencies":{"nanoid":"^3.3.6","picocolors":"^1.0.0","source-map-js":"^1.0.2"},"browser":{"./lib/terminal-highlight":false,"source-map-js":false,"path":false,"url":false,"fs":false}}');
+module.exports = JSON.parse('{"name":"postcss","version":"8.4.31","description":"Tool for transforming styles with JS plugins","engines":{"node":"^10 || ^12 || >=14"},"exports":{".":{"require":"./lib/postcss.js","import":"./lib/postcss.mjs"},"./lib/at-rule":"./lib/at-rule.js","./lib/comment":"./lib/comment.js","./lib/container":"./lib/container.js","./lib/css-syntax-error":"./lib/css-syntax-error.js","./lib/declaration":"./lib/declaration.js","./lib/fromJSON":"./lib/fromJSON.js","./lib/input":"./lib/input.js","./lib/lazy-result":"./lib/lazy-result.js","./lib/no-work-result":"./lib/no-work-result.js","./lib/list":"./lib/list.js","./lib/map-generator":"./lib/map-generator.js","./lib/node":"./lib/node.js","./lib/parse":"./lib/parse.js","./lib/parser":"./lib/parser.js","./lib/postcss":"./lib/postcss.js","./lib/previous-map":"./lib/previous-map.js","./lib/processor":"./lib/processor.js","./lib/result":"./lib/result.js","./lib/root":"./lib/root.js","./lib/rule":"./lib/rule.js","./lib/stringifier":"./lib/stringifier.js","./lib/stringify":"./lib/stringify.js","./lib/symbols":"./lib/symbols.js","./lib/terminal-highlight":"./lib/terminal-highlight.js","./lib/tokenize":"./lib/tokenize.js","./lib/warn-once":"./lib/warn-once.js","./lib/warning":"./lib/warning.js","./package.json":"./package.json"},"main":"./lib/postcss.js","types":"./lib/postcss.d.ts","keywords":["css","postcss","rework","preprocessor","parser","source map","transform","manipulation","transpiler"],"funding":[{"type":"opencollective","url":"https://opencollective.com/postcss/"},{"type":"tidelift","url":"https://tidelift.com/funding/github/npm/postcss"},{"type":"github","url":"https://github.com/sponsors/ai"}],"author":"Andrey Sitnik <andrey@sitnik.ru>","license":"MIT","homepage":"https://postcss.org/","repository":"postcss/postcss","bugs":{"url":"https://github.com/postcss/postcss/issues"},"dependencies":{"nanoid":"^3.3.6","picocolors":"^1.0.0","source-map-js":"^1.0.2"},"browser":{"./lib/terminal-highlight":false,"source-map-js":false,"path":false,"url":false,"fs":false}}');
 
 /***/ }),