Error on embedded imports in data urls (#543)

* properly ignore embedded imports in data urls

* add a warning

* wording

* wording

* cleaner solution

* hard error

Author: romainmenke

lib/parse-styles.js

@@ -92,10 +92,10 @@ async function resolveImportId(result, stmt, options, state, 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
+    // Data urls can't be used as a base url to resolve imports.
+    throw stmt.node.error(
+      `Unable to import '${stmt.uri}' from a stylesheet that is embedded in a data url`
+    )
   }
 
   const atRule = stmt.node

test/data-url.js

@@ -1,8 +1,27 @@
 "use strict"
 // external tooling
 const test = require("ava")
+const postcss = require("postcss")
+
+// plugin
+const atImport = require("..")
 
 // internal tooling
 const checkFixture = require("./helpers/check-fixture")
 
 test("should inline data urls", checkFixture, "data-url")
+
+test("should error on relative urls from stylesheets in data urls", t => {
+  return postcss()
+    .use(atImport())
+    .process(
+      "@import url(data:text/css;base64,QGltcG9ydCB1cmwoZm9vLmNzcyk7CgpwIHsKICBjb2xvcjogYmx1ZTsKfQo=);",
+      { from: undefined }
+    )
+    .catch(error =>
+      t.regex(
+        error.message,
+        /Unable to import '(?:.*?)' from a stylesheet that is embedded in a data url/
+      )
+    )
+})

test/fixtures/data-url.css

@@ -2,7 +2,6 @@
 @import url("DATA:TEXT/CSS;BASE64,QGltcG9ydCB1cmwoZGF0YTp0ZXh0L2NzcztiYXNlNjQsY0NCN0lHTnZiRzl5T2lCbmNtVmxianNnZlE9PSk7CgpwIHsgY29sb3I6IGJsdWU7IH0K") layer(foo) (min-width: 320px);
 
 /* Mixed imports: */
-@import url(data:text/css;base64,QGltcG9ydCB1cmwoZm9vLmNzcyk7CgpwIHsKICBjb2xvcjogYmx1ZTsKfQo=);
 @import url(data-url.css);
 
 /* url encoded: */

test/fixtures/data-url.expected.css

@@ -1,6 +1,24 @@
-@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: green; }
 
-p { color: blue; } } }/* Mixed imports: */p {
-  color: blue;
-}p { color: pink; }/* url encoded: */bar { color: green }bar { color: pink }
+p { color: blue; }
+
+@media (min-width: 320px) {
+
+ @layer foo {
+p { color: green; } } }
+
+@media (min-width: 320px) {
+
+ @layer foo {
+
+p { color: blue; } } }
+
+/* Mixed imports: */
+
+p { color: pink; }
+
+/* url encoded: */
+
+bar { color: green }
+
+bar { color: pink }