Add shorter syntax to target cssModules class

Author: Michael Vurchio

example/webpack/App.svelte

@@ -70,7 +70,7 @@ button {
 }
 </style>
 
-<div class="$style.overlay" />
+<div class="$.overlay" />
 <div class="$style.modal">
   <section>
     <header class="$style.active">My Modal title</header>

example/webpack/Time.svelte

@@ -24,5 +24,5 @@
 </style>
 
 <div
-  class="$style.datetime"
-  class:$style.bold={true}>{time}</div>
+  class="$.datetime"
+  class:$.bold={true}>{time}</div>

index.js

@@ -7,7 +7,7 @@ const pluginOptions = {
 }
 
 const regex = {
-  module: /\$style\.(:?[\w\d-]*)/gm,
+  module: /\$(style)?\.(:?[\w\d-]*)/gm,
   style: /<style(\s[^]*?)?>([^]*?)<\/style>/gi,
   class: (className) => {
     return new RegExp(`\\.(${className})\\b(?![-_])`, 'gm')
@@ -58,7 +58,7 @@ const markup = async ({ content, filename }) => {
   const styles = content.match(regex.style);
   moduleClasses[filename] = {};
 
-  return { code: content.replace(regex.module, (match, className) => {
+  return { code: content.replace(regex.module, (match, key, className) => {
     let replacement = '';
     if (styles.length) {
       if (regex.class(className).test(styles[0])) {