<div id="app" v-cloak class="bg-gray-50 min-h-screen flex flex-col justify-center">
  <div class="w-100 mx-auto max-w-md p-4 space-y-4 md:space-y-6">
    <h1 class="text-2xl font-demibold md:text-4xl">CSS Specificity Calculator</h1>
    <p class="text-gray-600">Enter any css rule and get its specificity score.</p>
    <input class="border border-gray-400 w-full rounded-lg text-lg py-2 px-4 focus:outline-none focus:ring" v-model.trim="selector" type="text">
    <div class="score-grid grid grid-cols-4 gap-4">
      <div v-for="(score, scoreIndex) in selectorSpecificity" :key="scoreIndex" class="rounded-lg bg-gray-300 bg-opacity-60 grid place-items-center p-4">
        <div class="score text-3xl md:text-4xl">{{ score }}</div>
      </div>
    </div>
  </div>
</div>

/*
  For more info on the v-cloak directive:
  https://vuejs.org/v2/api/#v-cloak

  v-cloak spinner inspired by:
  https://gist.github.com/oze4/c4f87f6f83630850fabc5e4426874952
*/

[v-cloak] {
  & > * {
    display: none;
  }
  align-items: center;
  &::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #ccc;
    border-top-color: #333;
    transform: rotate(0deg);
    animation: spinner 0.8s linear infinite;
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* 
  aspect ratio grid boxes:
  https://css-tricks.com/a-grid-of-logos-in-squares/
*/

.score-grid {
  & > div {
    &::before {
      content: "";
      padding-bottom: 100%;
      grid-area: 1 / 1 / 2 / 2;
    }
  }
  .score {
    grid-area: 1 / 1 / 2 / 2;
    line-height: 0;
  }
}

import { calculate } from "https://cdn.skypack.dev/specificity@0.4.1";

new Vue({
  el: "#app",
  data() {
    return {
      selector: ""
    };
  },
  computed: {
    selectorSpecificity() {
      const score = calculate(this.selector);
      return (score[0] && score[0].specificityArray) || [0, 0, 0, 0];
    }
  }
});