From 6be601c3adf8c51d74d40f9e765dc460ef9f54d0 Mon Sep 17 00:00:00 2001
From: Romain Menke <11521496+romainmenke@users.noreply.github.com>
Date: Mon, 2 Oct 2023 18:59:40 +0200
Subject: [PATCH] Error on embedded imports in data urls (#543)

* properly ignore embedded imports in data urls

* add a warning

* wording

* wording

* cleaner solution

* hard error
---
 lib/parse-styles.js                 |  8 ++++----
 test/data-url.js                    | 19 +++++++++++++++++++
 test/fixtures/data-url.css          |  1 -
 test/fixtures/data-url.expected.css | 28 +++++++++++++++++++++++-----
 4 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/lib/parse-styles.js b/lib/parse-styles.js
index 6aaa245b..130ad4af 100644
--- a/lib/parse-styles.js
+++ b/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
diff --git a/test/data-url.js b/test/data-url.js
index 13af7d8d..33e469f3 100644
--- a/test/data-url.js
+++ b/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/
+      )
+    )
+})
diff --git a/test/fixtures/data-url.css b/test/fixtures/data-url.css
index 4b2b4b37..c26bdc03 100644
--- a/test/fixtures/data-url.css
+++ b/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: */
diff --git a/test/fixtures/data-url.expected.css b/test/fixtures/data-url.expected.css
index af160fc5..cad24950 100644
--- a/test/fixtures/data-url.expected.css
+++ b/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 }