tailwindcss-email-variants - npm Package Compare versions

Comparing version 2.0.3 to 3.0.0

package.json

 {
   "name": "tailwindcss-email-variants",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Tailwind CSS variants for email client CSS targeting hacks",
   "main": "src/index.js",
+  "files": [
+    "src/index.js"
+  ],
   "scripts": {
     "release": "np",
-    "test": "jest"
+    "dev": "vitest",
+    "test": "vitest run --coverage"
   },
@@ -15,26 +19,12 @@ "license": "MIT",
   },
-  "dependencies": {
-    "lodash.get": "^4.4.2"
-  },
   "devDependencies": {
-    "jest": "^28.0.3",
-    "np": "^8.0.2",
-    "postcss": "^8.2.2",
-    "prettier": "^2.5.1",
-    "tailwindcss": "^3.1.3"
+    "@vitest/coverage-v8": "^1.2.2",
+    "np": "^9.2.0",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.0",
+    "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.1.0"
+    "tailwindcss": ">=3.4.0"
   },
-  "prettier": {
-    "printWidth": 100,
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest/customMatchers.js"
-    ]
-  },
   "keywords": [
@@ -51,4 +41,4 @@ "tailwindcss",
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=18"
   }
 }

README.md

@@ -1,5 +0,11 @@
-# tailwindcss-email-variants
+<div align="center">
+  <img src="./.github/tailwindcss-mark.svg" alt="Tailwind CSS" width="108" height="66">
+  <h1>Tailwind CSS Email Variants</h1>
 
-A plugin that provides variants for email client targeting hacks used in HTML emails.
+  [![Build][github-ci-shield]][github-ci]
+  [![License][license-shield]][license]
+</div>
 
+A Tailwind CSS plugin that provides variants for email client targeting hacks used in HTML emails.
+
 All variants are based on targeting hacks from [howtotarget.email](https://howtotarget.email)
@@ -18,10 +24,7 @@
 ```js
-// tailwind.config.js
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-  theme: {
-    // ...
-  },
+  // ...
   plugins: [
     require('tailwindcss-email-variants'),
-    // ...
   ],
@@ -33,3 +36,3 @@ }
 
-Use the available variants to generate utilities that target specific email clients, or [configure it](#configuration) with your own variants.
+Use the available variants to generate utilities that target specific email clients.
 
@@ -161,1 +164,6 @@ ### Gmail
 ```
+
+[github-ci]: https://github.com/maizzle/tailwindcss-email-variants/actions
+[github-ci-shield]: https://github.com/maizzle/tailwindcss-email-variants/actions/workflows/nodejs.yml/badge.svg
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/github/license/maizzle/tailwindcss-email-variants?color=0e9f6e

src/index.js

@@ -1,31 +0,25 @@
-const get = require('lodash.get')
 const plugin = require('tailwindcss/plugin')
 
-const emailClientVariants = plugin.withOptions(
-  function (options) {
-    const userVariants = options || {}
+const emailClientVariants = plugin(function({ addVariant }) {
+    // Outlook.com dark mode
+    addVariant('ogsc', '[data-ogsc] &')
+    addVariant('ogsb', '[data-ogsb] &')
 
-    return function ({ addVariant }) {
-      // Outlook.com dark mode
-      addVariant('ogsc', '[data-ogsc] &')
-      addVariant('ogsb', '[data-ogsb] &')
+    // Gmail (webmail)
+    addVariant('gmail', 'u + .body &')
 
-      // Gmail (webmail)
-      addVariant('gmail', 'u + .body &')
+    // Gmail (Android)
+    addVariant('gmail-android', 'div > u + .body &')
 
-      // Gmail (Android)
-      addVariant('gmail-android', 'div > u + .body &')
+    // Apple Mail
+    addVariant('apple-mail', '.Singleton &')
 
-      // Apple Mail
-      addVariant('apple-mail', '.Singleton &')
+    // iOS Mail 10+
+    addVariant('ios', '@supports (-webkit-overflow-scrolling:touch) and (color:#ffff)')
 
-      // iOS Mail 10+
-      addVariant('ios', '@supports (-webkit-overflow-scrolling:touch) and (color:#ffff)')
+    // iOS Mail 15+
+    addVariant('ios-15', '@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1)')
 
-      // iOS Mail 15+
-      addVariant('ios-15', '@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1)')
-
-      // Open-Xchange (multiple clients)
-      addVariant('ox', '&[class^="ox-"]')
-    }
+    // Open-Xchange (multiple clients)
+    addVariant('ox', '&[class^="ox-"]')
   }
@@ -32,0 +26,0 @@ )

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

-50%

Number of lines in readme file

167

5.03%

Worsened metrics

Total package byte prevSize

6196

-57.45%

Number of package files

4

-55.56%

Lines of code

20

-92.67%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  tailwindcss@4.1.7
  (transitive)

• - Removed

  lodash.get@^4.4.2

• - Removed

  lodash.get@4.4.2
  (transitive)

• - Removed

  tailwindcss@4.1.6
  (transitive)