feat: support tailwind config (at least theme, darkMode and purge files)

tw-in-js · Mar 3, 2021 · eb268f4 · eb268f4
1 parent b7093cb
commit eb268f4
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -41,14 +41,13 @@
     "esbuild": "^0.8.36",
     "find-up": "^5.0.0",
     "ignore": "^5.1.8",
-    "import-fresh": "^3.3.0",
     "kleur": "^4.1.4",
     "p-debounce": "^2.1.0",
     "p-event": "^4.2.0",
     "sade": "^1.7.4",
     "supports-color": "^8.1.1",
     "time-span": "^4.0.0",
-    "twind": ">=0.15.7",
+    "twind": ">=0.15.8",
     "v8-compile-cache": "^2.2.0"
   },
   "peerDependencies": {

diff --git a/src/__fixtures__/clb.js b/src/__fixtures__/clb.js
@@ -7,11 +7,11 @@ const buttonBuilder = clb({
   },
   variants: {
     color: {
-      gray: props => ({
+      gray: (props) => ({
         'text-gray-800 bg-gray-800': !props.disabled,
         'text-gray-400 bg-gray-200': props.disabled,
       }),
-      red: props => ({
+      red: (props) => ({
         'text-red-800 bg-red-800': !props.disabled,
         'text-red-400 bg-red-200': props.disabled,
       }),

diff --git a/src/__fixtures__/play.html b/src/__fixtures__/play.html
@@ -1,19 +1,31 @@
 <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
   <div class="relative py-3 sm:max-w-xl sm:mx-auto">
-    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
+    <div
+      class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
+    ></div>
     <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
       <div class="max-w-md mx-auto">
         <div>
           <img src="/img/logo.svg" class="h-7 sm:h-8" />
         </div>
         <div class="divide-y divide-gray-200">
           <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
-            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
+            <p>
+              An advanced online playground for Tailwind CSS, including support for things like:
+            </p>
             <ul class="list-disc space-y-2">
               <li class="flex items-start">
                 <span class="h-6 flex items-center sm:h-7">
-                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                  <svg
+                    class="flex-shrink-0 h-5 w-5 text-cyan-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </span>
                 <p class="ml-2">
@@ -23,8 +35,16 @@
               </li>
               <li class="flex items-start">
                 <span class="h-6 flex items-center sm:h-7">
-                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                  <svg
+                    class="flex-shrink-0 h-5 w-5 text-cyan-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </span>
                 <p class="ml-2">
@@ -34,19 +54,32 @@
               </li>
               <li class="flex items-start">
                 <span class="h-6 flex items-center sm:h-7">
-                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                  <svg
+                    class="flex-shrink-0 h-5 w-5 text-cyan-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </span>
                 <p class="ml-2">Code completion with instant preview</p>
               </li>
             </ul>
-            <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
+            <p>
+              Perfect for learning how the framework works, prototyping a new idea, or creating a
+              demo to share online.
+            </p>
           </div>
           <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">
             <p>Want to dig deeper into Tailwind?</p>
             <p>
-              <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700"> Read the docs &rarr; </a>
+              <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700">
+                Read the docs &rarr;
+              </a>
             </p>
           </div>
         </div>

diff --git a/src/__fixtures__/tailwind.config.js b/src/__fixtures__/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/src/__fixtures__/test.html b/src/__fixtures__/test.html
@@ -6,8 +6,6 @@
     <title>Twind</title>
   </head>
   <body>
-    <h1 class="text-3xl sm:text-6xl ">
-      Hello World"
-    </h1>
+    <h1 class="text-3xl sm:text-6xl">Hello World"</h1>
   </body>
 </html>
diff --git a/src/__fixtures__/test.jsx b/src/__fixtures__/test.jsx
@@ -1,10 +1,23 @@
 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>
+      {/* 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>
-  );
+  )
 }
diff --git a/src/__fixtures__/twind.config.js b/src/__fixtures__/twind.config.js
@@ -3,7 +3,7 @@ module.exports = {
   preflight: false,
   theme: {
     extend: {
-      colors: {}
-    }
-  }
+      colors: {},
+    },
+  },
 }
diff --git a/src/cli.ts b/src/cli.ts
@@ -6,17 +6,20 @@ import supportsColor from 'supports-color'
 export const cli = (argv = process.argv) =>
   sade('twind [...globs=**/*.{htm,html,js,jsx,tsx,svelte,vue,mdx}]', /* single commmand */ true)
     .version(version)
-    .option('-o, --output', 'Set output css file path')
-    .option('-c, --config', 'Set config file path')
+    .option('-o, --output', 'Set output css file path (default print to console)')
+    .option(
+      '-c, --config',
+      'Set config file path (default twind.config.[cm]js or tailwind.config.[cm]js',
+    )
     .option('-i, --ignore', 'Any file patterns to ignore')
     .option('-I, --ignore-file', 'gitignore like file', '.gitignore')
     .option('-b, --beautify', 'Generate beautified css file', false)
     .option('-C, --cwd', 'The current directory to resolve from', '.')
     .option('-w, --watch', 'Watch for changes', false)
-    .option('--color', 'Print colorized output', supportsColor.stderr)
-    .action(async (globs = '**/*.{htm,html,js,jsx,tsx,svelte,vue,mdx}', {_, ['ignore-file']: ignoreFile, ...options}) => {
+    .option('--color', 'Print colorized output - to disable use --no-color', supportsColor.stderr)
+    .action(async (globs, { _, ['ignore-file']: ignoreFile, ...options }) => {
       try {
-        await run([globs, ..._], {...options, ignoreFile})
+        await run([globs, ..._], { ...options, ignoreFile })
       } catch (error) {
         console.error(error.stack || error.message)
         process.exit(1)

diff --git a/src/extract.ts b/src/extract.ts
@@ -31,11 +31,11 @@ const removeInvalidCandidate = (candidate: string): boolean => {
     // 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)
+      // - starts with <:#.,;?\d[\]%/$&@_
+      // - v-*: (vue)
+      // - aria-*
+      // - url like
+      /^-?[<:#.,;?\d[\]%/$&@_]|^v-[^:]+:|^aria-|^https?:\/\/|^mailto:|^tel:/.test(candidate)
   )
 }