feat: supported supports() and layer() in @import at-rule

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
         "no-param-reassign": "off",
         "no-continue": "off",
         "no-underscore-dangle": "off",
+        "no-undefined": "off",
       },
     },
   ],

src/index.js

@@ -71,7 +71,7 @@ export default async function loader(content, map, meta) {
         context: this.context,
         rootContext: this.rootContext,
         resourcePath: this.resourcePath,
-        filter: getFilter(options.import.filter, this.resourcePath),
+        filter: options.import.filter,
         resolver,
         urlHandler: (url) =>
           stringifyRequest(
@@ -205,13 +205,11 @@ export default async function loader(content, map, meta) {
 
     if (options.sourceMap) {
       imports.unshift({
-        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___",
-        url: stringifyRequest(this, require.resolve("./runtime/noSourceMaps")),
+        url: stringifyRequest(this, require.resolve("./runtime/sourceMaps")),
       });
     } else {
       imports.unshift({
-        type: "api_sourcemap_import",
         importName: "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___",
         url: stringifyRequest(this, require.resolve("./runtime/noSourceMaps")),
       });

src/plugins/postcss-import-parser.js

@@ -118,15 +118,54 @@ function parseNode(atRule, key) {
     throw error;
   }
 
-  const mediaNodes = paramsNodes.slice(1);
+  const additionalNodes = paramsNodes.slice(1);
+
+  let supports;
+  let layer;
   let media;
 
-  if (mediaNodes.length > 0) {
-    media = valueParser.stringify(mediaNodes).trim().toLowerCase();
+  if (additionalNodes.length > 0) {
+    let nodes = [];
+
+    for (const node of additionalNodes) {
+      nodes.push(node);
+
+      const isLayerFunction =
+        node.type === "function" && node.value.toLowerCase() === "layer";
+      const isLayerWord =
+        node.type === "word" && node.value.toLowerCase() === "layer";
+
+      if (isLayerFunction || isLayerWord) {
+        if (isLayerFunction) {
+          nodes.splice(nodes.length - 1, 1, ...node.nodes);
+        } else {
+          nodes.splice(nodes.length - 1, 1, {
+            type: "string",
+            value: "",
+            unclosed: false,
+          });
+        }
+
+        layer = valueParser.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      } else if (
+        node.type === "function" &&
+        node.value.toLowerCase() === "supports"
+      ) {
+        nodes.splice(nodes.length - 1, 1, ...node.nodes);
+
+        supports = valueParser.stringify(nodes).trim().toLowerCase();
+        nodes = [];
+      }
+    }
+
+    if (nodes.length > 0) {
+      media = valueParser.stringify(nodes).trim().toLowerCase();
+    }
   }
 
   // eslint-disable-next-line consistent-return
-  return { atRule, prefix, url, media, isRequestable };
+  return { atRule, prefix, url, layer, supports, media, isRequestable };
 }
 
 const plugin = (options = {}) => {
@@ -160,11 +199,24 @@ const plugin = (options = {}) => {
 
           const resolvedAtRules = await Promise.all(
             parsedAtRules.map(async (parsedAtRule) => {
-              const { atRule, isRequestable, prefix, url, media } =
-                parsedAtRule;
+              const {
+                atRule,
+                isRequestable,
+                prefix,
+                url,
+                layer,
+                supports,
+                media,
+              } = parsedAtRule;
 
               if (options.filter) {
-                const needKeep = await options.filter(url, media);
+                const needKeep = await options.filter(
+                  url,
+                  media,
+                  options.resourcePath,
+                  supports,
+                  layer
+                );
 
                 if (!needKeep) {
                   return;
@@ -192,13 +244,20 @@ const plugin = (options = {}) => {
                 atRule.remove();
 
                 // eslint-disable-next-line consistent-return
-                return { url: resolvedUrl, media, prefix, isRequestable };
+                return {
+                  url: resolvedUrl,
+                  layer,
+                  supports,
+                  media,
+                  prefix,
+                  isRequestable,
+                };
               }
 
               atRule.remove();
 
               // eslint-disable-next-line consistent-return
-              return { url, media, prefix, isRequestable };
+              return { url, layer, supports, media, prefix, isRequestable };
             })
           );
 
@@ -212,10 +271,11 @@ const plugin = (options = {}) => {
               continue;
             }
 
-            const { url, isRequestable, media } = resolvedAtRule;
+            const { url, isRequestable, layer, supports, media } =
+              resolvedAtRule;
 
             if (!isRequestable) {
-              options.api.push({ url, media, index });
+              options.api.push({ url, layer, supports, media, index });
 
               // eslint-disable-next-line no-continue
               continue;
@@ -237,7 +297,7 @@ const plugin = (options = {}) => {
               });
             }
 
-            options.api.push({ importName, media, index });
+            options.api.push({ importName, layer, supports, media, index });
           }
         },
       };

src/runtime/api.js

@@ -8,20 +8,44 @@ module.exports = (cssWithMappingToString) => {
   // return the list of modules as css string
   list.toString = function toString() {
     return this.map((item) => {
-      const content = cssWithMappingToString(item);
+      let content = "";
+
+      const needLayer = typeof item[5] !== "undefined";
+
+      if (item[4]) {
+        content += `@supports (${item[4]}) {`;
+      }
+
+      if (item[2]) {
+        content += `@media ${item[2]} {`;
+      }
+
+      if (needLayer) {
+        content += `@layer${item[5].length > 0 ? ` ${item[5]}` : ""} {`;
+      }
+
+      content += cssWithMappingToString(item);
+
+      if (needLayer) {
+        content += "}";
+      }
 
       if (item[2]) {
-        return `@media ${item[2]} {${content}}`;
+        content += "}";
+      }
+
+      if (item[4]) {
+        content += "}";
       }
 
       return content;
     }).join("");
   };
 
   // import a list of modules into the list
-  list.i = function i(modules, mediaQuery, dedupe) {
+  list.i = function i(modules, media, dedupe, supports, layer) {
     if (typeof modules === "string") {
-      modules = [[null, modules, ""]];
+      modules = [[null, modules, undefined]];
     }
 
     const alreadyImportedModules = {};
@@ -43,11 +67,32 @@ module.exports = (cssWithMappingToString) => {
         continue;
       }
 
-      if (mediaQuery) {
+      if (typeof layer !== "undefined") {
+        if (typeof item[5] === "undefined") {
+          item[5] = layer;
+        } else {
+          item[1] = `@layer${item[5].length > 0 ? ` ${item[5]}` : ""} {${
+            item[1]
+          }}`;
+          item[5] = layer;
+        }
+      }
+
+      if (media) {
         if (!item[2]) {
-          item[2] = mediaQuery;
+          item[2] = media;
+        } else {
+          item[1] = `@media ${item[2]} {${item[1]}}`;
+          item[2] = media;
+        }
+      }
+
+      if (supports) {
+        if (!item[4]) {
+          item[4] = `${supports}`;
         } else {
-          item[2] = `${mediaQuery} and ${item[2]}`;
+          item[1] = `@supports (${item[4]}) {${item[1]}}`;
+          item[4] = supports;
         }
       }
 

src/utils.js

@@ -921,6 +921,34 @@ function normalizeSourceMapForRuntime(map, loaderContext) {
   return JSON.stringify(resultMap);
 }
 
+function printParams(media, dedupe, supports, layer) {
+  let result = "";
+
+  if (typeof layer !== "undefined") {
+    result = `, ${JSON.stringify(layer)}`;
+  }
+
+  if (typeof supports !== "undefined") {
+    result = `, ${JSON.stringify(supports)}${result}`;
+  } else if (result.length > 0) {
+    result = `, undefined${result}`;
+  }
+
+  if (dedupe) {
+    result = `, true${result}`;
+  } else if (result.length > 0) {
+    result = `, false${result}`;
+  }
+
+  if (media) {
+    result = `${JSON.stringify(media)}${result}`;
+  } else if (result.length > 0) {
+    result = `""${result}`;
+  }
+
+  return result;
+}
+
 function getModuleCode(result, api, replacements, options, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
     return "";
@@ -939,15 +967,22 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
   });\n`;
 
   for (const item of api) {
-    const { url, media, dedupe } = item;
-
-    beforeCode += url
-      ? `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify(
-          `@import url(${url});`
-        )}${media ? `, ${JSON.stringify(media)}` : ""}]);\n`
-      : `___CSS_LOADER_EXPORT___.i(${item.importName}${
-          media ? `, ${JSON.stringify(media)}` : dedupe ? ', ""' : ""
-        }${dedupe ? ", true" : ""});\n`;
+    const { url, layer, supports, media, dedupe } = item;
+
+    if (url) {
+      // eslint-disable-next-line no-undefined
+      const printedParam = printParams(media, undefined, supports, layer);
+
+      beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify(
+        `@import url(${url});`
+      )}${printedParam.length > 0 ? `, ${printedParam}` : ""}]);\n`;
+    } else {
+      const printedParam = printParams(media, dedupe, supports, layer);
+
+      beforeCode += `___CSS_LOADER_EXPORT___.i(${item.importName}${
+        printedParam.length > 0 ? `, ${printedParam}` : ""
+      });\n`;
+    }
   }
 
   for (const item of replacements) {
@@ -980,6 +1015,13 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
     }
   }
 
+  // Indexes description:
+  // 0 - module id
+  // 1 - CSS code
+  // 2 - media
+  // 3 - source map
+  // 4 - supports
+  // 5 - layer
   return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`;
 }