add data url support (#515)

* add data url support

* more complex tests

* fix older node

* Update lib/data-url.js

Co-authored-by: Ryan Zimmerman <[email protected]>

Co-authored-by: Ryan Zimmerman <[email protected]>

index.js

@@ -10,6 +10,7 @@ const loadContent = require("./lib/load-content")
 const processContent = require("./lib/process-content")
 const parseStatements = require("./lib/parse-statements")
 const assignLayerNames = require("./lib/assign-layer-names")
+const dataURL = require("./lib/data-url")
 
 function AtImport(options) {
   options = {
@@ -290,6 +291,14 @@ function AtImport(options) {
       }
 
       function resolveImportId(result, stmt, options, state) {
+        if (dataURL.isValid(stmt.uri)) {
+          return loadImportContent(result, stmt, stmt.uri, options, state).then(
+            result => {
+              stmt.children = result
+            }
+          )
+        }
+
         const atRule = stmt.node
         let sourceFile
         if (atRule.source?.input?.file) {

lib/data-url.js

@@ -0,0 +1,17 @@
+"use strict"
+
+const dataURLRegexp = /^data:text\/css;base64,/i
+
+function isValid(url) {
+  return dataURLRegexp.test(url)
+}
+
+function contents(url) {
+  // "data:text/css;base64,".length === 21
+  return Buffer.from(url.slice(21), "base64").toString()
+}
+
+module.exports = {
+  isValid,
+  contents,
+}

lib/load-content.js

@@ -1,5 +1,12 @@
 "use strict"
 
 const readCache = require("read-cache")
+const dataURL = require("./data-url")
 
-module.exports = filename => readCache(filename, "utf-8")
+module.exports = filename => {
+  if (dataURL.isValid(filename)) {
+    return dataURL.contents(filename)
+  }
+
+  return readCache(filename, "utf-8")
+}

test/data-url.js

@@ -0,0 +1,8 @@
+"use strict"
+// external tooling
+const test = require("ava")
+
+// internal tooling
+const checkFixture = require("./helpers/check-fixture")
+
+test("should inline data urls", checkFixture, "data-url")

test/fixtures/data-url.css

@@ -0,0 +1,6 @@
+@import url(data:text/css;base64,QGltcG9ydCB1cmwoZGF0YTp0ZXh0L2NzcztiYXNlNjQsY0NCN0lHTnZiRzl5T2lCbmNtVmxianNnZlE9PSk7CgpwIHsgY29sb3I6IGJsdWU7IH0K);
+@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);

test/fixtures/data-url.expected.css

@@ -0,0 +1,24 @@
+p { color: green; }
+
+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 {
+  color: blue;
+}
+
+p { color: pink; }

test/fixtures/imports/data-url.css

@@ -0,0 +1 @@
+@import url("DATA:text/CSS;BASE64,cCB7IGNvbG9yOiBwaW5rOyB9");