Implement a basic specificity calculator

Author: basuneko

src/App.vue

@@ -1,17 +1,17 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <hello></hello>
+    <img src="./assets/logo.png" class="logo">
+    <selector-form></selector-form>
   </div>
 </template>
 
 <script>
-import Hello from './components/Hello';
+import SelectorForm from './components/SelectorForm';
 
 export default {
   name: 'app',
   components: {
-    Hello,
+    SelectorForm,
   },
 };
 </script>
@@ -23,6 +23,10 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 40px;
+}
+
+.logo {
+  height: 120px;
 }
 </style>

src/components/SelectorForm.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="hello">
+    <h1>CSSpecify</h1>
+    <input class="selector-input" type="text" v-model="selectorString"/>
+    <ul>
+      <li v-for="token in tokens">{{token}}</li>
+    </ul>
+    <h2>specificity: {{ specificity }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data() {
+    return {
+      selectorString: 'ul#bacon.foo li.bar p #crispy',
+      idMatcher: /#[A-z0-9-_]+/g,
+      classMatcher: /\.[A-z0-9-_]+/g,
+      tagMatcher: /(?:^| )\w+/g,
+    };
+  },
+  methods: {
+    extractTokens(regex) {
+      const match = this.selectorString.match(regex);
+      if (!match) {
+        return [];
+      }
+      return match;
+    },
+  },
+  computed: {
+    idTokens() {
+      return this.extractTokens(this.idMatcher);
+    },
+    classTokens() {
+      return this.extractTokens(this.classMatcher);
+    },
+    tagTokens() {
+      return this.extractTokens(this.tagMatcher);
+    },
+    tokens() {
+      return this.idTokens.concat(this.classTokens).concat(this.tagTokens);
+    },
+    specificity() {
+      let result = '';
+      result += this.idTokens.length.toString();
+      result += this.classTokens.length.toString();
+      result += this.tagTokens.length.toString();
+      return result;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+h1 {
+  font-size: 100px;
+  margin: 20px 0 60px;
+}
+
+.selector-input {
+  display: block;
+  margin: 0 auto;
+  height: 60px;
+  width: 600px;
+  font-size: 40px;
+  font-weight: lighter;
+  padding: 10px 20px;
+  text-align: center;
+}
+
+a {
+  color: #42b983;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+</style>