Merge remote-tracking branch 'origin/master' into check-cycles--empat…

…hetic-numbat-90ac1e6ee1

lib/data-url.js

@@ -1,14 +1,26 @@
 "use strict"
 
-const dataURLRegexp = /^data:text\/css;base64,/i
+const anyDataURLRegexp = /^data:text\/css(?:;(base64|plain))?,/i
+const base64DataURLRegexp = /^data:text\/css;base64,/i
+const plainDataURLRegexp = /^data:text\/css;plain,/i
 
 function isValid(url) {
-  return dataURLRegexp.test(url)
+  return anyDataURLRegexp.test(url)
 }
 
 function contents(url) {
-  // "data:text/css;base64,".length === 21
-  return Buffer.from(url.slice(21), "base64").toString()
+  if (base64DataURLRegexp.test(url)) {
+    // "data:text/css;base64,".length === 21
+    return Buffer.from(url.slice(21), "base64").toString()
+  }
+
+  if (plainDataURLRegexp.test(url)) {
+    // "data:text/css;plain,".length === 20
+    return decodeURIComponent(url.slice(20))
+  }
+
+  // "data:text/css,".length === 14
+  return decodeURIComponent(url.slice(14))
 }
 
 module.exports = {

lib/parse-styles.js

@@ -91,6 +91,11 @@ async function resolveImportId(result, stmt, options, state, postcss) {
       postcss
     )
 
+    return
+  } else if (dataURL.isValid(stmt.from.slice(-1))) {
+    // Data urls can't be used a base url to resolve imports.
+    // When the parent statement has a data url
+    // and the current statement doesn't have a data url we ignore the statement.
     return
   }
 

test/fixtures/data-url.css

@@ -4,3 +4,7 @@
 /* Mixed imports: */
 @import url(data:text/css;base64,QGltcG9ydCB1cmwoZm9vLmNzcyk7CgpwIHsKICBjb2xvcjogYmx1ZTsKfQo=);
 @import url(data-url.css);
+
+/* url encoded: */
+@import url(data:text/css;plain,bar%20%7B%20color%3A%20green%20%7D);
+@import url(data:text/css,bar%20%7B%20color%3A%20pink%20%7D);

test/fixtures/data-url.expected.css

@@ -1,24 +1,6 @@
-p { color: green; }
+@import url(foo.css);p { color: green; }p { color: blue; }@media (min-width: 320px){@layer foo{
+p { color: green; } } }@media (min-width: 320px){@layer foo{
 
-p { color: blue; }
-
-@media (min-width: 320px) {
-
- @layer foo {
-p { color: green; } } }
-
-@media (min-width: 320px) {
-
- @layer foo {
-
-p { color: blue; } } }
-
-/* Mixed imports: */
-
-foo{}
-
-p {
+p { color: blue; } } }/* Mixed imports: */p {
   color: blue;
-}
-
-p { color: pink; }
+}p { color: pink; }/* url encoded: */bar { color: green }bar { color: pink }