fix: test files

KieranAltman · Dec 20, 2023 · 5947b18 · 5947b18
1 parent 999b0ee
commit 5947b18
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 105 deletions.
diff --git a/jest/customMatchers.js b/jest/customMatchers.js
@@ -54,15 +54,15 @@ expect.extend({
 
     return { actual: received, message, pass }
   },
-  toIncludeCss(received, argument) {
+  async toIncludeCss(received, argument) {
     const options = {
       comment: 'stripped(received).includes(stripped(argument))',
       isNot: this.isNot,
       promise: this.promise,
     }
 
-    const actual = format(received)
-    const expected = format(argument)
+    const actual = await format(received)
+    const expected = await format(argument)
 
     const pass = actual.includes(expected)
 

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "src/index.js",
   "scripts": {
     "release": "np",
-    "test": "c8 jest"
+    "test": "NODE_OPTIONS=--experimental-vm-modules c8 jest"
   },
   "license": "MIT",
   "repository": "https://github.com/zh-kai/tailwindcss-mask",

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 
-module.exports = plugin((addUtilities, matchUtilities) => {
+module.exports = plugin(({ addUtilities, matchUtilities }) => {
   const directions = {
     t: 'top',
     tr: 'top right',
@@ -18,7 +18,7 @@ module.exports = plugin((addUtilities, matchUtilities) => {
       return [
         `.mask-gradient-${shorthand}`,
         {
-          maskImage: `linear-gradient(to ${direction}, rgba(0, 0, 0, 1.0) 0, transparent 100%)`,
+          maskImage: `linear-gradient(to ${direction}, rgba(0, 0, 0, 1.0) 0, transparent 100%);`,
         },
       ]
     })
@@ -31,7 +31,7 @@ module.exports = plugin((addUtilities, matchUtilities) => {
       return [
         `.mask-radial-gradient.mask-gradient-${shorthand}`, // class name
         {
-          maskImage: `radial-gradient(circle at ${direction}, rgba(0, 0, 0, 1.0) 0, transparent 100%)`,
+          maskImage: `radial-gradient(circle at ${direction}, rgba(0, 0, 0, 1.0) 0, transparent 100%);`,
         },
       ]
     })

diff --git a/src/index.test.js b/src/index.test.js
@@ -1,17 +1,12 @@
 const path = require('path')
-const examplePlugin = require('.')
+const twPlugin = require('./index.js')
 const postcss = require('postcss')
 const tailwindcss = require('tailwindcss')
 
 function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
   let { currentTestName } = expect.getState()
   config = {
-    ...{
-      plugins: [examplePlugin],
-      corePlugins: {
-        preflight: false,
-      }
-    },
+    ...{ plugins: [twPlugin], corePlugins: { preflight: false } },
     ...config,
   }
 
@@ -20,101 +15,16 @@ function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
   })
 }
 
-
-
 it('addUtilities', () => {
   const config = {
-    content: [{ raw: String.raw`
-    <div class="content-hidden"></div>
-    <div class="content-visible"></div>`
-  }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      .content-hidden {
-        content-visibility: hidden;
-      }
-
-      .content-visible {
-        content-visibility: visible;
-      }
-    `)
-  })
-})
-
-it('matchUtilities', () => {
-  const config = { content: [{ raw: String.raw`<div class="tab-2"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      .tab-2 {
-        tab-size: 2;
-      }
-    `)
-  })
-})
-
-it('addComponents', () => {
-  const config = {
-    content: [{ raw: String.raw`<div class="btn"></div>` }],
-    plugins: [
-      examplePlugin({
-        className: 'btn',
-      })
-    ],
-  }
-
-  return run(config, '@tailwind components').then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      .btn {
-        padding: .5rem 1rem;
-        font-weight: 600;
-      }
-    `)
-  })
-})
-
-it('addVariant', () => {
-  const config = { content: [{ raw: String.raw`<div class="optional:hidden"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      .optional\:hidden:optional {
-        display: none;
-      }
-    `)
-  })
-})
-
-it('addVariant (array)', () => {
-  const config = { content: [{ raw: String.raw`<div class="hocus:opacity-0"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      .hocus\:opacity-0:hover {
-        opacity: 0;
-      }
-      .hocus\:opacity-0:focus {
-        opacity: 0;
-      }
-    `)
-  })
-})
-
-it('addVariant (media)', () => {
-  const config = { content: [{ raw: String.raw`<div class="supports-grid:hidden"></div>` }],
+    content: [{ raw: String.raw`<div class="mask-gradient-t"></div>` }],
   }
 
-  return run(config).then(result => {
-    expect(result.css).toMatchCss(String.raw`
-      @supports (display: grid) {
-        .supports-grid\:hidden {
-          display: none;
-        }
+  return run(config).then((result) => {
+    console.log(result.css)
+    expect(result.css).toIncludeCss(String.raw`
+      .mask-gradient-t {
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 0, transparent 100%);
       }
     `)
   })