Custom build with prefix doesn't prefix props used as values in other props.

[Cédric Bontems]

Hello!
When making a custom build with a prefix, all output props are properly prefixed, but the props used as values are not.
For example, I get:

--op-animation-fade-in: fade-in .5s var(--ease-3);

Where I expect :

--op-animation-fade-in: fade-in .5s var(--op-ease-3);

In order to fix that, I made a modification to the buildPropsStylesheet() function in the build/to-stylesheet.js file.

On line 20, turning this :

if (prefix && prefix !== "''")
      prop = `--${prefix}-` + prop.slice(2)

Into this :

if (prefix && prefix !== "''") {
      prop = `--${prefix}-` + prop.slice(2);
      if (typeof(val) == "string" &&  val.includes("var(--")) {
        val = val.replaceAll("var(--", `var(--${prefix}-`);
      }
    }

Solves the problem.

Edit :

In props.animations.css, keyframes were not rendered, and undefined was printed instead.
This is because in this same function the prop is prefixed before calling so props[`${prop}-@`] is actualy undefined.

Checking if is animation and adding to appendedMeta before prefixing solves the problem :

Object.entries(props).forEach(([prop, val]) => {
    if (prop.includes("-@")) return;
 
    if (prop.includes("animation")) {
      let keyframes = props[`${prop}-@`];
      appendedMeta += keyframes;
    }

    if (prefix && prefix !== "''") {
      prop = `--${prefix}-` + prop.slice(2);
      if (typeof val == "string" && val.includes("var(--")) {
        val = val.replaceAll("var(--", `var(--${prefix}-`);
      }
    }

    file.write(`  ${prop}: ${val};\n`);
  });

It is also necessary to adjust the shadows OSDark media query for which the props are hard coded without prefix :

if (filename.includes("shadows")) {
    if (prefix && prefix !== "''") {
      appendedMeta += `@media (--${prefix}-OSdark) {
  :where(html) {
    --${prefix}-shadow-strength: 25%;
    --${prefix}-shadow-color: 220 40% 2%;
  }
}`;
    } else {
      appendedMeta += `@media (--OSdark) {
  :where(html) {
    --shadow-strength: 25%;
    --shadow-color: 220 40% 2%;
  }
}`;
    }
  }

[Cédric Bontems]

For better support, let's replace

val = val.replaceAll("var(--", `var(--${prefix}-`);

by

val = val.replace(/var\(--/g, `var(--${prefix}-`);

This will avoid having the TypeError: replaceAll is not a function error as replaceAll() is only supported from node v15.0.0.

[Adam Argyle]

very cool, thanks for the review and suggestions. i'll be able to spend some time on this soon 🙂
glad you're not blocked and could read the code enough to move passed it