feat: added support for @supports, @layer and @media from `@imp…

…ort` at-rules

src/runtime/injectStylesIntoStyleTag.js

@@ -30,6 +30,8 @@ function modulesToDom(list, options) {
       css: item[1],
       media: item[2],
       sourceMap: item[3],
+      supports: item[4],
+      layer: item[5],
     };
 
     if (index !== -1) {
@@ -59,7 +61,9 @@ function addStyle(obj, options) {
       if (
         newObj.css === obj.css &&
         newObj.media === obj.media &&
-        newObj.sourceMap === obj.sourceMap
+        newObj.sourceMap === obj.sourceMap &&
+        newObj.supports === obj.supports &&
+        newObj.layer === obj.layer
       ) {
         return;
       }

src/runtime/singletonStyleDomAPI.js

@@ -11,11 +11,41 @@ const replaceText = (function replaceText() {
 
 /* istanbul ignore next  */
 function apply(style, index, remove, obj) {
-  const css = remove
-    ? ""
-    : obj.media
-    ? `@media ${obj.media} {${obj.css}}`
-    : obj.css;
+  let css;
+
+  if (remove) {
+    css = "";
+  } else {
+    css = "";
+
+    if (obj.supports) {
+      css += `@supports (${obj.supports}) {`;
+    }
+
+    if (obj.media) {
+      css += `@media ${obj.media} {`;
+    }
+
+    const needLayer = typeof obj.layer !== "undefined";
+
+    if (needLayer) {
+      css += `@layer${obj.layer.length > 0 ? ` ${obj.layer}` : ""} {`;
+    }
+
+    css += obj.css;
+
+    if (needLayer) {
+      css += "}";
+    }
+
+    if (obj.media) {
+      css += "}";
+    }
+
+    if (obj.supports) {
+      css += "}";
+    }
+  }
 
   // For old IE
   /* istanbul ignore if  */

src/runtime/styleDomAPI.js

@@ -1,15 +1,37 @@
 /* istanbul ignore next  */
 function apply(style, options, obj) {
-  let css = obj.css;
-  const media = obj.media;
-  const sourceMap = obj.sourceMap;
+  let css = "";
+
+  if (obj.supports) {
+    css += `@supports (${obj.supports}) {`;
+  }
+
+  if (obj.media) {
+    css += `@media ${obj.media} {`;
+  }
+
+  const needLayer = typeof obj.layer !== "undefined";
 
-  if (media) {
-    style.setAttribute("media", media);
-  } else {
-    style.removeAttribute("media");
+  if (needLayer) {
+    css += `@layer${obj.layer.length > 0 ? ` ${obj.layer}` : ""} {`;
   }
 
+  css += obj.css;
+
+  if (needLayer) {
+    css += "}";
+  }
+
+  if (obj.media) {
+    css += "}";
+  }
+
+  if (obj.supports) {
+    css += "}";
+  }
+
+  const sourceMap = obj.sourceMap;
+
   if (sourceMap && typeof btoa !== "undefined") {
     css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(
       unescape(encodeURIComponent(JSON.stringify(sourceMap)))

test/loader.test.js

@@ -14,6 +14,8 @@ import {
   runInJsDom,
 } from "./helpers/index";
 
+jest.setTimeout(10000);
+
 describe("loader", () => {
   const injectTypes = [
     "styleTag",

test/manual/index.html

@@ -91,6 +91,14 @@ <h2>Modules</h2>
       <h2>Toggle</h2>
     </section>
 
+    <section>
+      <h2>Media and Supports</h2>
+      <div class="bottom">BLUE</div>
+      <div class="middle">GREEN</div>
+      <div class="top">RED</div>
+      <div class="media-and-supports">RED</div>
+    </section>
+
     <section>
       <h2>Custom element</h2>
       <custom-square w="100" h="100"></custom-square>

test/manual/src/bottom.css

@@ -0,0 +1,7 @@
+.bottom {
+  color: blue;
+}
+
+.media-and-supports {
+  color: blue;
+}

test/manual/src/index.js

@@ -29,6 +29,7 @@ import api2, {
   namedExportLazyBlue,
   namedExportLazyBackground,
 } from "./style.named-export.lazy.module.css";
+import "./top.css";
 
 console.log("___LOCALS___");
 console.log(component);

test/manual/src/middle.css

@@ -0,0 +1,10 @@
+@import url("./bottom.css") supports(display: grid) screen and
+  (max-width: 2400px);
+
+.middle {
+  color: green;
+}
+
+.media-and-supports {
+  color: green;
+}

test/manual/src/style.css

@@ -9,8 +9,3 @@
 .blue {
   color: blue;
 }
-
-.background {
-  height: 1200px;
-  background: url("./logo.png") center no-repeat;
-}

test/manual/src/top.css

@@ -0,0 +1,10 @@
+@import url("./middle.css") supports(display: flex) screen and
+  (min-width: 400px);
+
+.top {
+  color: red;
+}
+
+.media-and-supports {
+  color: red;
+}

test/manual/webpack.config.js

@@ -246,6 +246,7 @@ module.exports = {
   },
   devServer: {
     hot: true,
+    liveReload: false,
     static: __dirname,
   },
 };

test/runtime/__snapshots__/injectStylesIntoStyleTag.test.js.snap

@@ -38,6 +38,8 @@ exports[`addStyle should work with "insert" option 1`] = `"<head><title>Title</t
 
 exports[`addStyle should work with "nonce" attribute and "__webpack_nonce__" variable 1`] = `"<head><title>Title</title><style nonce=\\"87654321\\">.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
 
+exports[`addStyle should work with empty layer 1`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
+
 exports[`addStyle should work with empty modules list #2 1`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with empty modules list #2 2`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
@@ -56,7 +58,9 @@ exports[`addStyle should work with empty modules list 1`] = `"<head><title>Title
 
 exports[`addStyle should work with empty modules list 2`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
 
-exports[`addStyle should work with media 1`] = `"<head><title>Title</title><style media=\\"screen and (min-width:320px)\\">.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
+exports[`addStyle should work with layer 1`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
+
+exports[`addStyle should work with media 1`] = `"<head><title>Title</title><style>@media screen and (min-width:320px) {.foo { color: red }}</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with multiple styles 1`] = `"<head><title>Title</title><style>.foo { color: red }</style><style>.bar { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
 
@@ -67,6 +71,8 @@ exports[`addStyle should work with source maps 1`] = `
 /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS01LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5mb28geyBjb2xvcjogcmVkIH0iXX0= */</style></head><body><h1>Hello world</h1></body>"
 `;
 
+exports[`addStyle should work with supports 1`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
+
 exports[`addStyle should work with updates #2 1`] = `"<head><title>Title</title><style>.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with updates #2 2`] = `"<head><title>Title</title><style>.foo { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
@@ -79,9 +85,9 @@ exports[`addStyle should work with updates #4 1`] = `"<head><title>Title</title>
 
 exports[`addStyle should work with updates #4 2`] = `"<head><title>Title</title></head><body><h1>Hello world</h1></body>"`;
 
-exports[`addStyle should work with updates #5 1`] = `"<head><title>Title</title><style media=\\"screen and (min-width:320px)\\">.foo { color: red }</style></head><body><h1>Hello world</h1></body>"`;
+exports[`addStyle should work with updates #5 1`] = `"<head><title>Title</title><style>@media screen and (min-width:320px) {.foo { color: red }}</style></head><body><h1>Hello world</h1></body>"`;
 
-exports[`addStyle should work with updates #5 2`] = `"<head><title>Title</title><style media=\\"screen and (min-width:640px)\\">.foo { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
+exports[`addStyle should work with updates #5 2`] = `"<head><title>Title</title><style>@media screen and (min-width:640px) {.foo { color: blue }}</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with updates #6 1`] = `"<head><title>Title</title><style>.foo { color: red }.bar { color: yellow }</style></head><body><h1>Hello world</h1></body>"`;
 
@@ -102,14 +108,14 @@ exports[`addStyle should work with updates #7 1`] = `"<head><title>Title</title>
 exports[`addStyle should work with updates #7 2`] = `"<head><title>Title</title><style>.foo { color: green }</style><style>.bar { color: black }</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with updates #8 1`] = `
-"<head><title>Title</title><style media=\\"screen and (min-width: 320px)\\">.foo { color: red }
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTEuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0xLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDMyMHB4KSB7IC5mb28geyBjb2xvcjogcmVkIH0gfSJdfQ== */</style><style media=\\"screen and (max-width: 240px)\\">.bar { color: yellow }
+"<head><title>Title</title><style>@media screen and (min-width: 320px) {.foo { color: red }}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTEuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0xLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDMyMHB4KSB7IC5mb28geyBjb2xvcjogcmVkIH0gfSJdfQ== */</style><style>@media screen and (max-width: 240px) {.bar { color: yellow }}
 /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0yLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDI0MHB4KSB7IC5iYXIgeyBjb2xvcjogeWVsbG93IH0gfSJdfQ== */</style></head><body><h1>Hello world</h1></body>"
 `;
 
 exports[`addStyle should work with updates #8 2`] = `
-"<head><title>Title</title><style media=\\"screen and (min-width: 640px)\\">.foo { color: black }
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTEuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJCQkJCLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0xLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDY0MHB4KSB7IC5mb28geyBjb2xvcjogYmxhY2sgfSB9Il19 */</style><style media=\\"screen and (max-width: 1240px)\\">.bar { color: black }
+"<head><title>Title</title><style>@media screen and (min-width: 640px) {.foo { color: black }}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTEuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJCQkJCLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0xLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDY0MHB4KSB7IC5mb28geyBjb2xvcjogYmxhY2sgfSB9Il19 */</style><style>@media screen and (max-width: 1240px) {.bar { color: black }}
 /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLTI2LTIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJCQkJCLGNBQXFCLGVBQWUsRUFBRSIsImZpbGUiOiJzdHlsZS0yNi0yLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDEyNDBweCkgeyAuYmFyIHsgY29sb3I6IGJsYWNrIH0gfSJdfQ== */</style></head><body><h1>Hello world</h1></body>"
 `;
 
@@ -127,9 +133,9 @@ exports[`addStyle should work with updates #11 1`] = `"<head><title>Title</title
 
 exports[`addStyle should work with updates #11 2`] = `"<head><title>Title</title><style>.foo { color: black }</style><style>.bar { color: white }</style><script src=\\"https://example.com/script.js\\" id=\\"id\\"></script></head><body><h1>Hello world</h1></body>"`;
 
-exports[`addStyle should work with updates #12 1`] = `"<head><title>Title</title><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style media=\\"screen and (min-width: 2000px)\\">.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
+exports[`addStyle should work with updates #12 1`] = `"<head><title>Title</title><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: red }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>@media screen and (min-width: 2000px) {.order { color: blue }}</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
 
-exports[`addStyle should work with updates #12 2`] = `"<head><title>Title</title><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style media=\\"screen and (min-width: 2000px)\\">.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
+exports[`addStyle should work with updates #12 2`] = `"<head><title>Title</title><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: blue }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>.order { color: orange }</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style><style>@media screen and (min-width: 2000px) {.order { color: blue }}</style><style>.@import url(\\"https://fonts.googleapis.com/css?family=Roboto&display=swap\\");</style></head><body><h1>Hello world</h1></body>"`;
 
 exports[`addStyle should work with updates #12 3`] = `"<head><title>Title</title><style>.foo { color: red }</style><style>.bar { color: blue }</style></head><body><h1>Hello world</h1></body>"`;
 

test/runtime/injectStylesIntoStyleTag.test.js

@@ -143,6 +143,44 @@ describe("addStyle", () => {
     expect(document.documentElement.innerHTML).toMatchSnapshot();
   });
 
+  it("should work with supports", () => {
+    injectStylesIntoStyleTag(
+      [
+        [
+          "./style-4.css",
+          ".foo { color: red }",
+          "",
+          // eslint-disable-next-line no-undefined
+          undefined,
+          "display: flex",
+        ],
+      ],
+      defaultOptions
+    );
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it("should work with layer", () => {
+    injectStylesIntoStyleTag(
+      // eslint-disable-next-line no-undefined
+      [["./style-4.css", ".foo { color: red }", "", undefined, "", "default"]],
+      defaultOptions
+    );
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
+  it("should work with empty layer", () => {
+    injectStylesIntoStyleTag(
+      // eslint-disable-next-line no-undefined
+      [["./style-4.css", ".foo { color: red }", "", undefined, "", ""]],
+      defaultOptions
+    );
+
+    expect(document.documentElement.innerHTML).toMatchSnapshot();
+  });
+
   it("should work with source maps", () => {
     injectStylesIntoStyleTag(
       [