HasVarChange has a calculation problem

[chenyulun]

<script src="http://127.0.0.1:8084/css-vars-ponyfill.js"></script>
<style data-include>
      .test {
          background-color: var(--x, var(--y));
      }
    </style>
<script>
const data = {'--y': 'red'}
        cssVars({
        watch: true,
        onlyLegacy: false,
        worker: true,
        // worker: false,
        include: '[data-include]',
        variables: data
      })
</script>

outputcss

<style data-cssvars="out" data-cssvars-job="1" data-cssvars-group="1">.bgk{background-color:red;}</style>

The console selects a style element,

const test = document.createElement('style');
test.textContent = ':root{--x: green;}';
test.setAttribute('data-include', '');
$0.parentNode.insertBefore(test, $0.nextSibling)

The style can be output correctly

<style data-cssvars="out" data-cssvars-job="4" data-cssvars-group="1">.bgk{background-color:green;}</style>

Console continue typing,

test.textContent = ':root{}';

It doesn't turn red

Deleting a variable is not considered a change

// Detect new variable declaration or changed value
                    hasVarChange =
                        // Ponyfill has been called before with updateDOM
                        counters.job > 0 &&
                        // New/Change
                        Boolean(
                            // New declaration
                            (Object.keys(variableStore.job).length > Object.keys(currentVars).length) ||
                            // Changed declaration value
                            Boolean(
                                // Previous declarations exist
                                Object.keys(currentVars).length &&
                                // At least one job value does has changed
                                Object.keys(variableStore.job).some(key => variableStore.job[key] !== currentVars[key])
                            )
                        );

[jhildenbiddle]

Thanks, @chenyulun. I will investigate.