@react-email/tailwind 0.0.15-canary.0 → 0.0.15

package/dist/tailwind.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../src/tailwind.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,MAAM,IAAI,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAUpE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AA8GD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6E5C,CAAC"}
+{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../src/tailwind.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,MAAM,IAAI,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAMpE,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAQD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2H5C,CAAC"}

package/dist/tailwind.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind.spec.d.ts.map

package/dist/tailwind.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.spec.d.ts","sourceRoot":"","sources":["../src/tailwind.spec.tsx"],"names":[],"mappings":""}

package/dist/utils/compatibility/css-to-jsx-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-to-jsx-style.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/css-to-jsx-style.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,kBAAkB,YAAa,MAAM;;;GASjD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,MAAM,2BAS5C,CAAC"}

package/dist/utils/compatibility/css-to-jsx-style.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-to-jsx-style.spec.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/css-to-jsx-style.spec.ts"],"names":[],"mappings":""}

package/dist/utils/{escape-class-name.d.ts → compatibility/escape-class-name.d.ts}

@@ -3,6 +3,7 @@
  * CSS selectors by using the regex "[^a-zA-Z0-9\-_]".
  *
  * Also does a bit more trickery to avoid escaping already
- * escaped characters.8  */
+ * escaped characters.
+ */
 export declare const escapeClassName: (className: string) => string;
 //# sourceMappingURL=escape-class-name.d.ts.map

package/dist/utils/compatibility/escape-class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-class-name.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/escape-class-name.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,cAAe,MAAM,WAUhD,CAAC"}

package/dist/utils/compatibility/escape-class-name.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape-class-name.spec.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/escape-class-name.spec.ts"],"names":[],"mappings":""}

package/dist/utils/compatibility/make-all-rule-properties-important.d.ts

@@ -0,0 +1,2 @@
+export declare function makeAllRulePropertiesImportant(ruleContent: string): string;
+//# sourceMappingURL=make-all-rule-properties-important.d.ts.map

package/dist/utils/compatibility/make-all-rule-properties-important.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-all-rule-properties-important.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/make-all-rule-properties-important.ts"],"names":[],"mappings":"AAAA,wBAAgB,8BAA8B,CAAC,WAAW,EAAE,MAAM,UASjE"}

package/dist/utils/compatibility/sanitize-class-name.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Replaces special characters to avoid problems on email clients.
+ *
+ * @param className - This should not come with any escaped charcters, it should come the same
+ * as is on the `className` attribute on React elements.
+ */
+export declare const sanitizeClassName: (className: string) => string;
+//# sourceMappingURL=sanitize-class-name.d.ts.map

package/dist/utils/compatibility/sanitize-class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-class-name.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/sanitize-class-name.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,cAAe,MAAM,WAalD,CAAC"}

package/dist/utils/compatibility/sanitize-class-name.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sanitize-class-name.spec.d.ts.map

package/dist/utils/compatibility/sanitize-class-name.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-class-name.spec.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/sanitize-class-name.spec.ts"],"names":[],"mappings":""}

package/dist/utils/compatibility/sanitize-rule-selector.d.ts

@@ -0,0 +1,2 @@
+export declare function sanitizeRuleSelector(classSelector: string): string;
+//# sourceMappingURL=sanitize-rule-selector.d.ts.map

package/dist/utils/compatibility/sanitize-rule-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-rule-selector.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/sanitize-rule-selector.ts"],"names":[],"mappings":"AAGA,wBAAgB,oBAAoB,CAAC,aAAa,EAAE,MAAM,UAIzD"}

package/dist/utils/compatibility/unescape-class.d.ts

@@ -0,0 +1,2 @@
+export declare function unescapeClass(singleClass: string): string;
+//# sourceMappingURL=unescape-class.d.ts.map

package/dist/utils/compatibility/unescape-class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unescape-class.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/unescape-class.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,UAEhD"}

package/dist/utils/compatibility/use-rgb-non-spaced-syntax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rgb-non-spaced-syntax.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/use-rgb-non-spaced-syntax.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAShD,CAAC"}

package/dist/utils/compatibility/use-rgb-non-spaced-syntax.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rgb-non-spaced-syntax.spec.d.ts","sourceRoot":"","sources":["../../../src/utils/compatibility/use-rgb-non-spaced-syntax.spec.ts"],"names":[],"mappings":""}

package/dist/utils/css/media-queries/separate-media-queries-from-css.d.ts

@@ -0,0 +1,2 @@
+export declare function separateMediaQueriesFromCSS(css: string): [cssWithoutMediaQueries: string, mediaQueries: string[]];
+//# sourceMappingURL=separate-media-queries-from-css.d.ts.map

package/dist/utils/css/media-queries/separate-media-queries-from-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separate-media-queries-from-css.d.ts","sourceRoot":"","sources":["../../../../src/utils/css/media-queries/separate-media-queries-from-css.ts"],"names":[],"mappings":"AAAA,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,GACV,CAAC,sBAAsB,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,CAc1D"}

package/dist/utils/css/minify-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"minify-css.d.ts","sourceRoot":"","sources":["../../../src/utils/css/minify-css.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,QAAS,MAAM,KAAG,MAoBvC,CAAC"}

package/dist/utils/css/rules-for.d.ts

@@ -0,0 +1,11 @@
+export interface Rule {
+    value: string;
+    selector: string;
+    content: string;
+}
+export declare function rulesFor(cssWithRules: string): Generator<{
+    value: string;
+    selector: string;
+    content: string;
+}, void, unknown>;
+//# sourceMappingURL=rules-for.d.ts.map

package/dist/utils/css/rules-for.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules-for.d.ts","sourceRoot":"","sources":["../../../src/utils/css/rules-for.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAiB,QAAQ,CAAC,YAAY,EAAE,MAAM;;;;kBAU7C"}

package/dist/utils/quick-safe-render-to-string.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=quick-safe-render-to-string.spec.d.ts.map

package/dist/utils/quick-safe-render-to-string.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-safe-render-to-string.spec.d.ts","sourceRoot":"","sources":["../../src/utils/quick-safe-render-to-string.spec.tsx"],"names":[],"mappings":""}

package/dist/utils/{get-css-for-markup.d.ts → tailwindcss/get-css-for-markup.d.ts}

@@ -1,4 +1,4 @@
-import type { TailwindConfig } from "../tailwind";
+import type { TailwindConfig } from "../../tailwind";
 declare global {
     var __OXIDE__: undefined;
 }

package/dist/utils/tailwindcss/get-css-for-markup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-css-for-markup.d.ts","sourceRoot":"","sources":["../../../src/utils/tailwindcss/get-css-for-markup.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,SAAS,EAAE,SAAS,CAAC;CAC1B;AAOD,eAAO,MAAM,eAAe,WAClB,MAAM,UACN,cAAc,GAAG,SAAS,WA4BnC,CAAC"}

package/dist/utils/tailwindcss/get-css-for-markup.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-css-for-markup.spec.d.ts","sourceRoot":"","sources":["../../../src/utils/tailwindcss/get-css-for-markup.spec.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/tailwind",
-  "version": "0.0.15-canary.0",
+  "version": "0.0.15",
   "description": "A React component to wrap emails with Tailwind CSS",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -22,14 +22,6 @@
     }
   },
   "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": {
     "type": "git",
     "url": "https://github.com/resend/react-email.git",
@@ -50,31 +42,38 @@
     "react": "18.2.0"
   },
   "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",
     "process": "^0.11.10",
     "react-dom": "18.2.0",
     "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",
+    "eslint-config-custom": "0.0.0",
+    "@react-email/html": "0.0.7",
+    "tsconfig": "0.0.0",
+    "@react-email/hr": "0.0.7"
   },
   "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"
   }
-}
+}

package/readme.md

@@ -59,6 +59,59 @@ const Email = () => {
 };
 ```
 
+## 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
 
 This component was tested using the most popular email clients.

package/dist/utils/css-to-jsx-style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-to-jsx-style.d.ts","sourceRoot":"","sources":["../../src/utils/css-to-jsx-style.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,kBAAkB,YAAa,MAAM;;;GASjD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,MAAM,2BAS5C,CAAC"}

package/dist/utils/css-to-jsx-style.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-to-jsx-style.spec.d.ts","sourceRoot":"","sources":["../../src/utils/css-to-jsx-style.spec.ts"],"names":[],"mappings":""}

package/dist/utils/escape-class-name.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"escape-class-name.d.ts","sourceRoot":"","sources":["../../src/utils/escape-class-name.ts"],"names":[],"mappings":"AAAA;;;;;2BAK2B;AAC3B,eAAO,MAAM,eAAe,cAAe,MAAM,WAUhD,CAAC"}

package/dist/utils/escape-class-name.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"escape-class-name.spec.d.ts","sourceRoot":"","sources":["../../src/utils/escape-class-name.spec.ts"],"names":[],"mappings":""}

package/dist/utils/get-css-class-properties-map.d.ts

@@ -1,2 +0,0 @@
-export declare const getStylesPerClassMap: (css: string) => Record<string, string>;
-//# sourceMappingURL=get-css-class-properties-map.d.ts.map

package/dist/utils/get-css-class-properties-map.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-css-class-properties-map.d.ts","sourceRoot":"","sources":["../../src/utils/get-css-class-properties-map.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAS,MAAM,KAAG,OAAO,MAAM,EAAE,MAAM,CAWvE,CAAC"}

package/dist/utils/get-css-for-markup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-css-for-markup.d.ts","sourceRoot":"","sources":["../../src/utils/get-css-for-markup.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,SAAS,EAAE,SAAS,CAAC;CAC1B;AAOD,eAAO,MAAM,eAAe,WAClB,MAAM,UACN,cAAc,GAAG,SAAS,WA4BnC,CAAC"}

package/dist/utils/get-css-for-markup.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-css-for-markup.spec.d.ts","sourceRoot":"","sources":["../../src/utils/get-css-for-markup.spec.tsx"],"names":[],"mappings":""}

package/dist/utils/index.d.ts

@@ -1,6 +0,0 @@
-export * from "./get-css-for-markup";
-export * from "./escape-class-name";
-export * from "./get-css-class-properties-map";
-export * from "./css-to-jsx-style";
-export * from "./minify-css";
-//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/utils/minify-css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"minify-css.d.ts","sourceRoot":"","sources":["../../src/utils/minify-css.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,QAAS,MAAM,KAAG,MAoBvC,CAAC"}

package/dist/utils/use-rgb-non-spaced-syntax.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-rgb-non-spaced-syntax.d.ts","sourceRoot":"","sources":["../../src/utils/use-rgb-non-spaced-syntax.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAShD,CAAC"}

package/dist/utils/use-rgb-non-spaced-syntax.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-rgb-non-spaced-syntax.spec.d.ts","sourceRoot":"","sources":["../../src/utils/use-rgb-non-spaced-syntax.spec.ts"],"names":[],"mappings":""}