fix: enhance rule detection

README.md

@@ -3,7 +3,6 @@
 [![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind-cli)](https://github.com/tw-in-js/twind-cli/blob/main/LICENSE)
 [![Latest Release](https://flat.badgen.net/npm/v/@twind/cli?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/@twind/cli)
 [![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind-cli?icon=github&label)](https://github.com/tw-in-js/twind-cli)
-[![Module Size](https://flat.badgen.net/badgesize/brotli/https:/unpkg.com/@twind/cli/cli.js?icon=jsdelivr&label&color=blue&cache=10800)](https://unpkg.com/@twind/cli/cli.js 'brotli module size')
 [![Typescript](https://flat.badgen.net/badge/icon/included?icon=typescript&label)](https://unpkg.com/browse/@twind/cli/cli.d.ts)
 
 ## Installation

src/__fixtures__/test.jsx

@@ -0,0 +1,10 @@
+export default function App() {
+  return (
+    <div className="App text-center">
+    {/* Delete the two lines below */}
+    <h1 className={`text-5xl font-bold pt-20 bottom-[5px] @sm:top-[10px] <sm:top-[5px] >sm:top-[15px]`}>This is a starter template for you!</h1>
+    <h1 className='text-2xl font-bold pt-10'>All the best with your React + Tailwind project! 😃</h1>
+    <a href="https://github.com/tanmayhinge/react-tailwind-template" target="_blank" rel="noreferrer" className="text-blue-500 underline">Read Documentation for this Template</a>
+    </div>
+  );
+}

src/__fixtures__/test.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :class="classObject">
+    <div class="static" v-bind:class="{ underline: isActive, 'text-red-600': hasError }"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: {
+    classObject: {
+      'text-xl': true,
+      'text-sm': false,
+    },
+  },
+}
+</script>

src/extract.ts

@@ -2,30 +2,45 @@ import { match } from 'assert'
 import { readFile } from 'fs/promises'
 
 const cleanCandidate = (candidate: string): string => {
-  // 1. remove leading :class and class:
-  return candidate.replace(/^:?class:/, '')
+  // 1. remove leading class: (svelte)
+  return candidate.replace(/^class:/, '')
 }
 
-const COMMON_INVALID_CANDIDATES = new Set(['!DOCTYPE'])
+const COMMON_INVALID_CANDIDATES = new Set([
+  '!DOCTYPE',
+  'true',
+  'false',
+  'null',
+  'undefined',
+  'class',
+  'className',
+  'currentColor',
+])
 
 const removeInvalidCandidate = (candidate: string): boolean => {
   return !(
     COMMON_INVALID_CANDIDATES.has(candidate) ||
-    // Remove candiate match the following rules
-    // 1. url like
-    // 2. non number fractions and decimals
-    // 3. starting with number like
-    // 4. ending with -, /, @, $, &
-    // 5. empty
-    /^https?:\/\/|^mailto:|^tel:|\D[/.]\D|^[-\d.\/!]+|[-/@$&]$|^\s*$/.test(candidate)
+    // Remove candiate if it matches the following rules
+    // - no lower case char
+    !/[a-z]/.test(candidate) ||
+    // - containing uppercase letters
+    // - non number fractions and decimals
+    // - ending with -, /, @, $, &
+    // - white space only
+    /[A-Z]|\D[/.]\D|[-/@$&]$|^\s*$/.test(candidate) ||
+    // Either of the following two must match
+    // support @sm:..., >sm:..., <sm:...
+    /^[@<>][^:]+:/.test(candidate) !=
+    // - starts with <:#.,;?\d[\]%/$&@_
+    // - v-*: (vue)
+    // - aria-*
+    // - url like
+    /^-?[<:#.,;?\d[\]%/$&@_]|^v-[^:]+:|^aria-|^https?:\/\/|^mailto:|^tel:/.test(candidate)
   )
 }
 
 export const extractRulesFromString = (content: string): string[] => {
-  return (
-    // TODO support @sm:..., >sm:..., <sm:...
-    content.match(/(?![<>"'`\s(){}=:#.,;?\d[\]%/$&])[^<>"'`\s(){}=]+[^<>"'`\s(){}=:#.,;?]/g) || []
-  )
+  return (content.match(/[^>"'`\s(){}[\]=][^<>"'`\s(){}=]*[^<>"'`\s(){}=:#.,;?]/g) || [])
     .map(cleanCandidate)
     .filter(removeInvalidCandidate)
 }