Merge pull request #6 from maizzle/2.0

feat: support tailwindcss 3.1.x

Author: cossssmin

README.md

@@ -115,22 +115,6 @@ Result:
 }
 ```
 
-### Outlook (webmail)
-
-Use the `outlook-web` variant to target iOS Mail 15 specifically:
-
-```html
-<div class="outlook-web:hidden">...</div>
-```
-
-Result:
-
-```css
-[class~="x_outlook-web\:hidden"] {
-  display: none;
-}
-```
-
 ### Outlook.com dark mode
 
 Change `color` and `background-color` of elements in [Outlook.com dark mode](https://www.hteumeuleu.com/2021/emails-react-outlook-com-dark-mode/).
@@ -172,38 +156,3 @@ Result:
   display: none;
 }
 ```
-
-## Configuration
-
-You can add your own variants by passing a configuration object to the plugin.
-
-```js
-// tailwind.config.js
-module.exports = {
-  plugins: [
-    require('tailwindcss-email-variants')({
-      thunderbird: '.moz-text-html &', // & is the utility class
-      example: ctx => `.example ${ctx.container.nodes[0].selector}` // using a function
-    }),
-    // ...
-  ],
-}
-```
-
-Use it:
-
-```html
-<div class="thunderbird:hidden example:flex">...</div>
-```
-
-Result:
-
-```css
-.moz-text-html .thunderbird\:hidden {
-  display: none;
-}
-
-.example .flex {
-  display: flex;
-}
-```

package-lock.json

@@ -20,10 +20,10 @@
     "np": "^7.6.1",
     "postcss": "^8.2.2",
     "prettier": "^2.5.1",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.1.3"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0"
+    "tailwindcss": ">=3.1.0"
   },
   "prettier": {
     "printWidth": 100,

package.json

@@ -25,19 +25,8 @@ const emailClientVariants = plugin.withOptions(
       // iOS Mail 15+
       addVariant('ios-15', '@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1)')
 
-      // Outlook (webmail)
-      addVariant('outlook-web', ctx => {
-        const foo = get(ctx.container.nodes[0], 'raws.tailwind.classCandidate', '&')
-        return `[class~="x_outlook-web\\:${foo}"]`
-      })
-
       // Open-Xchange (multiple clients)
       addVariant('ox', '&[class^="ox-"]')
-
-      // User-defined variants
-      Object.keys(userVariants).forEach(key => {
-        addVariant(key, userVariants[key])
-      })
     }
   }
 )

src/index.js

@@ -111,20 +111,6 @@ it('`ios-15` variant', () => {
   })
 })
 
-it('`outlook-web` variant', () => {
-  const config = {
-    content: [{ raw: String.raw`<div class="outlook-web:hidden"></div>` }]
-  }
-
-  return run(config).then((result) => {
-    expect(result.css).toMatchCss(String.raw`
-      [class~="x_outlook-web\:hidden"] {
-        display: none;
-      }
-    `)
-  })
-})
-
 it('`apple-mail` variant', () => {
   const config = {
     content: [{ raw: String.raw`<div class="apple-mail:hidden"></div>` }]
@@ -152,27 +138,3 @@ it('`ox` variant', () => {
     `)
   })
 })
-
-it('user-defined variants', () => {
-  const config = {
-    content: [{ raw: String.raw`<div class="thunderbird:hidden example:hidden"></div>` }],
-    plugins: [
-      etvPlugin({
-        thunderbird: '.moz-text-html &',
-        example: ctx => `.example ${ctx.container.nodes[0].selector}`
-      })
-    ],
-  }
-
-  return run(config).then((result) => {
-    expect(result.css).toMatchCss(String.raw`
-      .moz-text-html .thunderbird\:hidden {
-        display: none;
-      }
-
-      .example .hidden {
-        display: none;
-      }
-    `)
-  })
-})