Why does changing CSS variables in JS break the app?-CodePudding

Let's say I want to implement a text switch with CSS as outlined in

I feel like I'm missing something obvious, but I just don't see it.

What is going on, here?

(And yes, I do realise that since I'm now using JS anyway, I could just use a button, but I want to understand why this is happening.)

EDIT: doing it with CSS variables would also allow me to do things like

.release-version::after {
    content: var(--release-version);
}

which would be nice.

CodePudding user response：

CSS variables are copied as they are from where they are defined to the place where they are used. It is mostly just a dynamic copy and paste which is why stuff like that works:

:root {
   --color: 255,0,;
   --comma: ,;
}

div {
   color: rgba(var(--color) 5 var(--comma) 0.5);
}

When you do:

root.style.setProperty("--release-version", releaseVersion)
root.style.setProperty("--build-version", buildVersion)

It would result into this:

:root {
   --release-version: R1.1.0;
   --build-version: v1.32.0;
}

I mean you would expect that root.style.setProperty("--color", "red") results into --release-version: red; and not into --release-version: "red";. But the text has to be quoted, so you somehow need to add the quotes around the text.

You could utilize JSON.stringify to convert the string a textual representation with those quotes that are required, which would also allow to " in the contents of the value:

//TODO: get versions from a config file or something
let releaseVersion = 'R1.1.0"'
let buildVersion = 'v1.32.0"'

window.onload = () => {
    const root = document.querySelector(":root");
    root.style.setProperty("--release-version", JSON.stringify(releaseVersion))
    root.style.setProperty("--build-version", JSON.stringify(buildVersion))
    
    //cannot change label text with CSS
    document.querySelector("#app-version").innerHTML = releaseVersion
}

:root {
    --release-version: "R0.0.0";
    --build-version: "v0.0.0";
}

/* https://css-tricks.com/swapping-out-text-five-different-ways/#aa-css-only-way */
#app-version {
    position: relative;
}
#app-version-checkbox {
    display: none;
}
#app-version-checkbox:checked   #app-version::after {
    content: var(--build-version);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
}

<input id="app-version-checkbox" type="checkbox">
<label for="app-version-checkbox" id="app-version"></label>