CSS-stiler vil ikke oppdatere før henting fil

Tiltenkt Goal - Brukeren velger ulike farger fra ulike farge innganger og skaper sitt eget tema. Når fargene er valgt, brukeren klikker på nedlastingsknappen og får den genererte CSS fil med fargene han / hun valgte.

Problemet - jeg er i stand til å laste CSS-filen, men jeg får de opprinnelige verdiene til tross for skiftende inngangene til forskjellige farger.

Hva jeg har gjort

CSS-filen som blir lastet ned allerede eksisterer og alle fargene som korresponderer til forskjellige elementer er gjort via CSS variabler.

Jeg oppdaterer den endrer levende ved å gjøre følgende.

import { colors } from './colorHelper'

const inputs = [].slice.call(document.querySelectorAll('input[type=color]'));

const handleThemeUpdate = (colors) => {
  const root = document.querySelector(':root');
  const keys = Object.keys(colors);
  keys.forEach(key => {
    root.style.setProperty(key, colors[key]);
  });
}

inputs.forEach((input) => {
  input.addEventListener('change', (e) => {
    e.preventDefault();
    const cssPropName = `--${e.target.id}`;
    document.styleSheets[2].cssRules[3].style.setProperty(cssPropName, e.target.value);

    handleThemeUpdate({
      [cssPropName]: e.target.value
    });
    console.log(`${cssPropName} is now ${e.target.value}`)
  });
});

Da jeg hentet den stil fra serveren, grep alle CSS Variabler og erstattet dem med deres faktiske verdi (hex fargeverdi).

Etter at jeg fikk returverdien (nytt stilark uten variabler) og sett den for data URI.

async function updatedStylesheet() {
  const res = await fetch(./prism.css);
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

  return updated_css;
}

const newStylesheet = updatedStylesheet().then(css => {
 downloadBtn.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(css));
 downloadBtn.setAttribute('download', 'prism-theme.css');
})

Jeg har allerede en nedlastingsknappen oppsett i min HTML og jeg fanget det tidligere i min skriptet slik at det var tilgjengelig hvor som helst for meg å bruke. downloadBtn

Jeg satt opp for å brann og grep nytt ark.

downloadBtn.addEventListener('click', () => {
  newStylesheet();
});

Resultatet

Jeg får de første fargeverdiene for stilark til tross for å endre fargene i farge inngangene på siden. Så CSS-filen ikke blir oppdatert med de nye fargene før jeg laste ned filen.