		{
		"name": "tailwindcss-email-variants",
		"version": "1.1.0",
		"version": "2.0.0",
		"description": "Tailwind CSS variants for email client CSS targeting hacks",
		@@ -23,6 +23,6 @@ "main": "src/index.js",
		"prettier": "^2.5.1",
		"tailwindcss": "^3.0.24"
		"tailwindcss": "^3.1.3"
		},
		"peerDependencies": {
		"tailwindcss": ">=3.0.0"
		"tailwindcss": ">=3.1.0"
		},
		@@ -29,0 +29,0 @@ "prettier": {

README.md

		@@ -118,18 +118,2 @@ # tailwindcss-email-variants

		### 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
		@@ -176,36 +160,1 @@
		```

		## 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;
		}
		```

src/index.js

		@@ -28,15 +28,4 @@ const get = require('lodash.get')

		// 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])
		})
		}
		@@ -43,0 +32,0 @@ }

src/index.test.js

		@@ -114,16 +114,2 @@ const path = require('path')

		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', () => {
		@@ -156,25 +142,1 @@ const config = {
		})

		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;
		}
		`)
		})
		})

tailwindcss-email-variants - npm Package Compare versions

Worsened metrics