Support to root variables

lib/index.js

@@ -3,6 +3,9 @@ const parseDeclValue = require("./parseDeclValue.js");
 const resolveId = require("./resolveId.js");
 const load = require("./load.js");
 
+const rootSelectorRegExp = /^:root$/i;
+const isRootRule = node => node.type === 'rule' && node.selector.split(',').some(item => rootSelectorRegExp.test(item)) && Object(node.nodes).length;
+
 function removeLoader(loader) {
   if (!loader.error && loader.node.type === "atrule") {
     loader.node.remove();
@@ -35,15 +38,27 @@ module.exports = (opts = {}) => {
       const loadersMap = {};
       const loaders = [];
       const inliners = [];
+      const variables = {};
 
       return {
+        Once (root) {
+          root.nodes.slice().forEach(rule => {
+            if (isRootRule(rule)) {
+              rule.nodes.slice().forEach(decl => {
+                if (decl.variable) {
+                  variables[decl.prop] = decl.value;
+                }
+              });
+            }
+          });
+        },
         AtRule: {
           "svg-load": (node) => {
             try {
               const file =
                 node.source && node.source.input && node.source.input.file;
               const { name, url } = parseRuleDefinition(node.params);
-              const { params, selectors } = getRuleParams(node);
+              const { params, selectors } = getRuleParams(node, variables);
               const loader = {
                 id: resolveId(file, url, opts),
                 parent: file,
@@ -60,6 +75,9 @@ module.exports = (opts = {}) => {
         },
 
         Declaration(node) {
+          if (node.variable && node.parent.selectors[0] === ":root") {
+            variables[node.prop] = node.value;
+          }
           if (
             node.value.includes("svg-load(") ||
             node.value.includes("svg-inline(")

lib/parseRule.js

@@ -18,18 +18,18 @@ function parseRuleDefinition(params) {
   };
 }
 
-function getRuleParams(rule) {
+function getRuleParams(rule, variables) {
   const params = {};
   const selectors = {};
 
   rule.each((node) => {
     if (node.type === "decl") {
-      params[node.prop] = node.value;
+      params[node.prop] = resolveValue(node.value, variables);
     } else if (node.type === "rule") {
       const selector = selectors[node.selectors] || {};
       node.each((child) => {
         if (child.type === "decl") {
-          selector[child.prop] = child.value;
+          selector[child.prop] = resolveValue(child.value, variables);
         }
       });
       selectors[node.selectors] = selector;
@@ -42,6 +42,16 @@ function getRuleParams(rule) {
   };
 }
 
+function resolveValue(value, variables) {
+  if (typeof value === "string" && value.startsWith("var(")) {
+    const name = value.replace("var(", "").replace(")", "");
+    if (Object.hasOwn(variables, name)) {
+      value = resolveValue(variables[name], variables);
+    }
+  }
+  return value;
+}
+
 module.exports = {
   parseRuleDefinition,
   getRuleParams,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-inline-svg",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "PostCSS plugin to reference an SVG file and control its attributes with CSS syntax",
   "keywords": [
     "postcss",

test/extended.test.js

@@ -1,5 +1,6 @@
 /* eslint-env mocha */
 const { compare } = require("./utils.js");
+const cssVariables = require("postcss-css-variables");
 
 process.chdir(__dirname);
 
@@ -79,6 +80,30 @@ test("should rewrite root params", () => {
   );
 });
 
+test("should resolve root variables", () => {
+  return compare(
+    `
+    :root {
+      --black: #000;
+      --white: #fff;
+    }
+    @svg-load icon url(fixtures/basic-black.svg) {
+      fill: var(--white);
+      stroke: var(--black);
+    }
+    background: svg-inline(icon);
+    `,
+    `
+    :root {
+      --black: #000;
+      --white: #fff;
+    }
+    background: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' id='basic-black' fill='#fff' stroke='#000'/>");
+    `,
+    { from: "input.css", encode: false }
+  );
+});
+
 test("should apply params by tag", () => {
   return compare(
     `