🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
@react-email/tailwind
Advanced tools
@react-email/tailwind - npm Package Compare versions
Comparing version 0.0.15-canary.0 to 0.0.15-canary.1
| { | ||
| "name": "@react-email/tailwind", | ||
| "version": "0.0.15-canary.0", | ||
| "version": "0.0.15-canary.1", | ||
| "description": "A React component to wrap emails with Tailwind CSS", | ||
@@ -25,10 +25,2 @@ "sideEffects": false, | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "build": "tsc && vite build", | ||
| "dev": "vite build --watch", | ||
| "clean": "rm -rf dist", | ||
| "lint": "eslint .", | ||
| "test:watch": "vitest --config ../../vitest.config.ts", | ||
| "test": "vitest run --config ../../vitest.config.ts" | ||
| }, | ||
| "repository": { | ||
@@ -54,15 +46,9 @@ "type": "git", | ||
| "devDependencies": { | ||
| "@babel/core": "7.23.7", | ||
| "@babel/preset-react": "7.22.5", | ||
| "@react-email/button": "workspace:^", | ||
| "@react-email/head": "workspace:*", | ||
| "@react-email/hr": "workspace:*", | ||
| "@react-email/html": "workspace:*", | ||
| "@babel/core": "7.23.9", | ||
| "@babel/preset-react": "7.23.3", | ||
| "@testing-library/react": "14.0.0", | ||
| "@types/node": "20.11.5", | ||
| "@types/postcss-css-variables": "0.18.3", | ||
| "eslint-config-custom": "workspace:*", | ||
| "eslint-plugin-regex": "1.10.0", | ||
| "memfs": "4.6.0", | ||
| "postcss": "8.4.31", | ||
| "postcss": "8.4.35", | ||
| "postcss-css-variables": "0.19.0", | ||
@@ -72,12 +58,25 @@ "process": "^0.11.10", | ||
| "tailwindcss": "3.3.2", | ||
| "tsconfig": "workspace:*", | ||
| "tsup": "7.2.0", | ||
| "typescript": "5.1.6", | ||
| "vite": "4.1.5", | ||
| "vite": "4.5.2", | ||
| "vite-plugin-dts": "3.6.3", | ||
| "vite-plugin-node-polyfills": "0.17.0" | ||
| "vite-plugin-node-polyfills": "0.17.0", | ||
| "@react-email/button": "^0.0.14", | ||
| "@react-email/head": "0.0.7", | ||
| "@react-email/html": "0.0.7", | ||
| "eslint-config-custom": "0.0.0", | ||
| "@react-email/hr": "0.0.7", | ||
| "tsconfig": "0.0.0" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "scripts": { | ||
| "build": "tsc && vite build", | ||
| "dev": "vite build --watch", | ||
| "clean": "rm -rf dist", | ||
| "lint": "eslint .", | ||
| "test:watch": "vitest --config ../../vitest.config.ts", | ||
| "test": "vitest run --config ../../vitest.config.ts" | ||
| } | ||
| } | ||
| } |
@@ -62,2 +62,55 @@  | ||
| ## Contributing notes | ||
| These are some things you will need to keep in mind if you are improving the Tailwind component | ||
| with things that might influence certain decisions we have made for better | ||
| email client support that have been made also in the past by other contributors but not documented | ||
| which ended up causing us to have these problems and need to rediscover the best decisions again. | ||
| ### The inlining of all styles | ||
| This is one of the most important because this is not one of the use cases this is | ||
| the main focus point of using the Tailwind component. The support for defining styles with tags | ||
| and using [classes is not the best](https://www.caniemail.com/features/html-style/). | ||
| This though can't be used the same for media queries so we do append the media queries | ||
| and the class names associated with them on a `<style>` tag on the `<head>` element. | ||
| ### The treatment for Tailwind's CSS variables | ||
| This is also something we need to keep in mind here, emails don't really have great support | ||
| for CSS variables, so we needed to use a [postcss plugin](https://github.com/MadLittleMods/postcss-css-variables) | ||
| alongisde Tailwind to resolve all of these variables. | ||
| ### The treatment for media query class names | ||
| For media queries we have made more than one decision that are for the better. The first one | ||
| and most important is sanitizing the media query class names on the `<style>` tag to avoid | ||
| needing to escape the class names which does cause problems. | ||
| ### RGB syntax color changes | ||
| For the best support two things were taken into account here. First thing is that | ||
| the syntax using spaces, which Tailwind generally uses, is not really supported, | ||
| neither for `rgb` nor for `rgba`, so we do a pass through Tailwind's generated | ||
| styles to change the syntax into using commas instead of spaces. | ||
| Second thing is that both `rgba` and using `/` for defining the color's opacity | ||
| are not very well supported, but passing in the opacity as a fourth parameter of `rgb()` | ||
| is what is mostly supported so we also account for that. | ||
| This has an effect like the following: | ||
| ```CSS | ||
| rgb(255 255 255 / 1) -> rgb(255,255,255) | ||
| rgb(212 213 102 / 0.2) -> rgb(212,213,102,0.2) | ||
| ``` | ||
| ### Defining the styles on the React `style` prop | ||
| This is something that comes a bit at the risk of performance but it is a safer way of doing this. | ||
| The reason this is safer is because certain components of ours or even custom ones may modify the | ||
| way styles are applied and defining it directly on the rendered HTML would cause unexpected behavior | ||
| on that. | ||
| ## Support | ||
@@ -64,0 +117,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Dev dependency count
22
-4.35%- Number of package files
53
60.61%- Number of lines in readme file
126
72.6%Worsened metrics
- Total package byte prevSize
6458996
-1.75%- Lines of code
106797
-2.45%No dependency changes