Attribute selector not working when combined with other selectors

readme.md

In this code the attribute selector (at line 100, char 16) does not work with other selectors, even though I've tested and it works on it's own.

In my code, only the first and second text boxes should go green when they contain text, but the third and fourth do despite having the hidevalid tag. What is causing this?

I've tested the JS, and all is working. I've tested the SCSS compiler alone, and it works. While this doesn't need vue and tailwind, they were working fine and I will be using them, so I want to make sure the answer works with them.

Ignore the tailwind errors, I'll fix them myself later.

Please comment with a solution.

Preview

index.html

<script src="https://unpkg.com/petite-vue" defer init></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/gh/medialize/sass.js/dist/sass.sync.js"></script>
<script src="https://cdn.jsdelivr.net/gh/LeaVerou/prefixfree/prefixfree.min.js"></script>

<script>
window.addEventListener("load",(async()=>{const t=t=>new Promise(((e,n)=>Sass.compile(t,(t=>{0==t.status?e(t.text):n(t.formatted)})))),e=document.querySelectorAll('style[type="text/tailwindscss"]');for(var n=0;n<e.length;n++)e[n].innerHTML=await t(e[n].innerHTML),e[n].type="text/tailwindcss";const s=document.querySelectorAll('style[type="text/scss"]');for(n=0;n<s.length;n++)s[n].innerHTML=await t(s[n].innerHTML),s[n].type="text/css"}));
AIO={};
AIO.loadSCSS = async(url)=>{const t=t=>new Promise(((e,n)=>Sass.compile(t,(t=>{0==t.status?e(t.text):n(t.formatted)}))));var x=document.createElement('style');x.innerHTML=await t(await (await fetch(url)).text());document.head.appendChild(x);};
</script>

<script>
AIO.autostyls = {};
AIO.autostyls = ()=>{
  Array.prototype.forEach.call(document.querySelectorAll('*[x-type]'),node=>{
    var newElem = document.createElement(AIO.autostyls.typeswaps[node.attributes['x-type'].value].type);
    Array.prototype.forEach.call(node.attributes,attrib=>{
      newElem.setAttribute(attrib.name,attrib.value);
    });
    if (AIO.autostyls.typeswaps[node.attributes['x-type'].value].hasOwnProperty('attributes')) {
      Object.entries(AIO.autostyls.typeswaps[node.attributes['x-type'].value].attributes).forEach(attrib=>{
        newElem.setAttribute(attrib[0],attrib[1]);
      });
    }
    Array.prototype.forEach.call(node.childNodes,child=>{
      newElem.appendChild(child);
    });
    node.replaceWith(newElem);
  });
};
AIO.autostyls.typeswaps = {'button': {type: 'span'}, 'textinput': {type: 'input', attributes: {'type': 'text','onkeyup': 'this.setAttribute("value", this.value);'}}};
window.addEventListener('DOMContentLoaded',AIO.autostyls);
</script>

<style type="text/tailwindscss">
:root {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}
[x-type|="button"] {
  --main-color: hsl(195, 100%, 50%);
  --dark-color: hsl(195, 100%, 25%);
  --light-color: hsl(195, 100%, 65%);
  transition: background-color 0.5s;
  display: inline-block;
  color: white;
  background-color: var(--main-color);
  outline: none;
  border: 1px solid LightGray;
  border-radius: 5px;
  text-align: center;
  padding: 0px 5px;
  margin: 5px;
  height: 1.5em;
  line-height: 1.5em;
  &:hover {
    background-color: var(--light-color);
  }
  &:active {
    background-color: var(--dark-color);
  }
  &[x-extype~="alt"] {
    --main-color: hsl(0, 0%, 95%);
    --dark-color: hsl(0, 0%, 90%);
    --light-color: hsl(0, 0%, 98%);
    color: black;
  }
  &[x-extype~="red"] {
    --main-color: hsl(0, 100%, 50%);
    --dark-color: hsl(0, 100%, 25%);
    --light-color: hsl(0, 100%, 70%);
    color: white;
  }
  &[x-extype~="green"] {
    --main-color: hsl(120, 61%, 50%);
    --dark-color: hsl(120, 61%, 25%);
    --light-color: hsl(120, 61%, 65%);
    color: white;
  }
  &[x-extype~="square"] {
    border-radius: 0px;
  }
}

[x-type|="textinput"] {
  transition: background-color 0.5s;
  display: inline-block;
  color: black;
  background-color: hsl(0, 0%, 95%);
  outline: none;
  border: 1px solid LightGray;
  border-radius: 5px;
  text-align: center;
  padding: 0px 5px;
  margin: 5px;
  height: 1.5em;
  line-height: 1.5em;
  &:hover, &:focus {
    background-color: hsl(0, 0%, 98%);
  }
  &[value]:not([x-extype~="hidevaild"]):not([value=""]):not(:focus):valid {
    border: 1px solid lime;
  }
  &:focus {
    border: 1px solid DeepSkyBlue;
  }
  &:invalid {
    border: 1px solid red;
  }
  &[x-extype~="square"] {
    border-radius: 0px;
  }
}
</style>

<span x-type="button">Button</span>
<span x-type="button" x-extype="alt">Alternative</span>
<span x-type="button" x-extype="green">Green</span>
<span x-type="button" x-extype="red">Red</span>
<br>
<span x-type="button" x-extype="square">Square Button</span>
<span x-type="button" x-extype="square alt">Square Alternative</span>
<span x-type="button" x-extype="square green">Square Green</span>
<span x-type="button" x-extype="square red">Square Red</span>
<br>
<span x-type="textinput" placeholder="Text Input"></span>
<span x-type="textinput" x-extype="square" placeholder="Square Text Input"></span>
<span x-type="textinput" x-extype="hidevalid" placeholder="Text Input hidevalid"></span>
<span x-type="textinput" x-extype="square hidevalid" placeholder="Square Text Input hidevalid"></span>