[Tailwind-email]: Add new config for tailwind-email by AlanBreck · Pull Request #796 · brave/leo

AlanBreck · 2024-08-27T22:05:31Z

This is a greatly pared down version of the Tailwind config with
the constraints of HTML email development in mind.

src/tokens/transformation/tailwind-email/copyStaticFiles.js

github-actions · 2024-08-27T22:16:41Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://796.pr.nala.bravesoftware.com/
✅ Commit preview: https://796.pr.nala.bravesoftware.com/commit-b2457336ae89012910d9b67a465d3001c13728b1/

- ./tokens/css/variables-android.old.css: 7424 bytes
+ ./tokens/css/variables-android.css: 7424 bytes
---
- ./tokens/css/variables-browser.old.css: 6670 bytes
+ ./tokens/css/variables-browser.css: 6670 bytes
---
- ./tokens/css/variables-ios.old.css: 7067 bytes
+ ./tokens/css/variables-ios.css: 7067 bytes
---
- ./tokens/css/variables-marketing.old.css: 13561 bytes
+ ./tokens/css/variables-marketing.css: 13561 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1941 bytes
+ ./tokens/css/variables-newtab.css: 1941 bytes
---
- ./tokens/css/variables-search.old.css: 2419 bytes
+ ./tokens/css/variables-search.css: 2419 bytes
---
- ./tokens/css/variables-web3.old.css: 833 bytes
+ ./tokens/css/variables-web3.css: 833 bytes
---
- ./tokens/css/variables.old.css: 111822 bytes
+ ./tokens/css/variables.css: 111822 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2024-08-27 22:15:13.135030192 +0000
+++ ./tokens/css/variables-android.css	2024-08-27 22:14:33.570125915 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2024-08-27 22:15:13.511038985 +0000
+++ ./tokens/css/variables-browser.css	2024-08-27 22:14:33.554125540 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2024-08-27 22:15:13.887047783 +0000
+++ ./tokens/css/variables-ios.css	2024-08-27 22:14:33.586126290 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2024-08-27 22:15:14.287057135 +0000
+++ ./tokens/css/variables-marketing.css	2024-08-27 22:14:33.610126852 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2024-08-27 22:15:14.683066402 +0000
+++ ./tokens/css/variables-news.css	2024-08-27 22:14:33.634127415 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2024-08-27 22:15:15.027074452 +0000
+++ ./tokens/css/variables-newtab.css	2024-08-27 22:14:33.642127602 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2024-08-27 22:15:15.419083617 +0000
+++ ./tokens/css/variables-search.css	2024-08-27 22:14:33.630127321 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2024-08-27 22:15:15.799092344 +0000
+++ ./tokens/css/variables-web3.css	2024-08-27 22:14:33.646127696 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2024-08-27 22:15:16.335103800 +0000
+++ ./tokens/css/variables.css	2024-08-27 22:14:33.418122352 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:14:33 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2024-08-27T22:18:41Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://796.pr.nala.bravesoftware.com/
✅ Commit preview: https://796.pr.nala.bravesoftware.com/commit-e158f7b8f706a02afa4f6be33e1634b98ed87d27/

- ./tokens/css/variables-android.old.css: 7424 bytes
+ ./tokens/css/variables-android.css: 7424 bytes
---
- ./tokens/css/variables-browser.old.css: 6670 bytes
+ ./tokens/css/variables-browser.css: 6670 bytes
---
- ./tokens/css/variables-ios.old.css: 7067 bytes
+ ./tokens/css/variables-ios.css: 7067 bytes
---
- ./tokens/css/variables-marketing.old.css: 13561 bytes
+ ./tokens/css/variables-marketing.css: 13561 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1941 bytes
+ ./tokens/css/variables-newtab.css: 1941 bytes
---
- ./tokens/css/variables-search.old.css: 2419 bytes
+ ./tokens/css/variables-search.css: 2419 bytes
---
- ./tokens/css/variables-web3.old.css: 833 bytes
+ ./tokens/css/variables-web3.css: 833 bytes
---
- ./tokens/css/variables.old.css: 111822 bytes
+ ./tokens/css/variables.css: 111822 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2024-08-27 22:17:16.256035872 +0000
+++ ./tokens/css/variables-android.css	2024-08-27 22:16:38.264092552 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2024-08-27 22:17:16.640035089 +0000
+++ ./tokens/css/variables-browser.css	2024-08-27 22:16:38.248092582 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2024-08-27 22:17:16.996034368 +0000
+++ ./tokens/css/variables-ios.css	2024-08-27 22:16:38.280092523 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2024-08-27 22:17:17.364033621 +0000
+++ ./tokens/css/variables-marketing.css	2024-08-27 22:16:38.304092477 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2024-08-27 22:17:17.712033772 +0000
+++ ./tokens/css/variables-news.css	2024-08-27 22:16:38.328092432 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2024-08-27 22:17:18.108035377 +0000
+++ ./tokens/css/variables-newtab.css	2024-08-27 22:16:38.336092417 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2024-08-27 22:17:18.252035959 +0000
+++ ./tokens/css/variables-search.css	2024-08-27 22:16:38.324092440 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2024-08-27 22:17:18.608037398 +0000
+++ ./tokens/css/variables-web3.css	2024-08-27 22:16:38.340092409 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2024-08-27 22:17:19.132039521 +0000
+++ ./tokens/css/variables.css	2024-08-27 22:16:38.112092837 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue Aug 27 2024 01:52:26 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 27 2024 22:16:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning

Hey, this is just a more general comment before I do a more in depth review, but do you think Tailwind is the right approach for email?

As far as I knew, they rely pretty heavily on variables in their internals (for example, handling opacity), and that sort of stuff probably won't work properly in emails?

(I might just be imagining that this is how it works though, and if this works fine for email I guess we're all good?)

AlanBreck · 2024-08-28T01:50:23Z

@fallaciousreasoning, normally that'd be right, however Maizzle changes that. The immediate use case is here: https://github.com/brave-experiments/email-template-builder

Maybe we should name it tailwind-maizzle to make that dependency more clear? It doesn't have to be used with Maizzle, strictly speaking, but Maizzle handles all of the inlining, variable resolution, etc.

fallaciousreasoning · 2024-08-28T02:48:11Z

Cool, good to know - I'll have a proper look over this tomorrow 😄

github-actions · 2024-09-13T19:13:35Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://796.pr.nala.bravesoftware.com/
✅ Commit preview: https://796.pr.nala.bravesoftware.com/commit-6324bf687b449851ef617c4b2c0ed9e9f092295e/

- ./tokens/css/variables-android.old.css: 7424 bytes
+ ./tokens/css/variables-android.css: 7424 bytes
---
- ./tokens/css/variables-browser.old.css: 6874 bytes
+ ./tokens/css/variables-browser.css: 6874 bytes
---
- ./tokens/css/variables-ios.old.css: 7067 bytes
+ ./tokens/css/variables-ios.css: 7067 bytes
---
- ./tokens/css/variables-marketing.old.css: 13561 bytes
+ ./tokens/css/variables-marketing.css: 13561 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1941 bytes
+ ./tokens/css/variables-newtab.css: 1941 bytes
---
- ./tokens/css/variables-search.old.css: 2419 bytes
+ ./tokens/css/variables-search.css: 2419 bytes
---
- ./tokens/css/variables-web3.old.css: 905 bytes
+ ./tokens/css/variables-web3.css: 905 bytes
---
- ./tokens/css/variables.old.css: 114834 bytes
+ ./tokens/css/variables.css: 114834 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2024-09-13 19:12:03.957657742 +0000
+++ ./tokens/css/variables-android.css	2024-09-13 19:11:25.532571859 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2024-09-13 19:12:04.269666989 +0000
+++ ./tokens/css/variables-browser.css	2024-09-13 19:11:25.516571308 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2024-09-13 19:12:04.569675875 +0000
+++ ./tokens/css/variables-ios.css	2024-09-13 19:11:25.548572411 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2024-09-13 19:12:04.841683935 +0000
+++ ./tokens/css/variables-marketing.css	2024-09-13 19:11:25.568573101 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2024-09-13 19:12:05.325698274 +0000
+++ ./tokens/css/variables-news.css	2024-09-13 19:11:25.596574066 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2024-09-13 19:12:05.645707760 +0000
+++ ./tokens/css/variables-newtab.css	2024-09-13 19:11:25.604574342 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2024-09-13 19:12:05.925716054 +0000
+++ ./tokens/css/variables-search.css	2024-09-13 19:11:25.592573928 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2024-09-13 19:12:06.209724466 +0000
+++ ./tokens/css/variables-web3.css	2024-09-13 19:11:25.608574480 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2024-09-13 19:12:06.629735105 +0000
+++ ./tokens/css/variables.css	2024-09-13 19:11:25.384566756 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Sep 13 2024 16:35:10 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Sep 13 2024 19:11:25 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning · 2024-09-16T07:14:17Z

src/tokens/transformation/tailwind-email/static/index.js

can this be a typescript file?

fallaciousreasoning

Hey, so this seems fine - my only concern is that there's definitely a bit of duplication between this and the tailwind transformation, and I worry a bit about falling out of sync.

WDYT? It'd be great if we could share stuff (where it makes sense), as these two targets are kinda similar.

fallaciousreasoning · 2024-09-16T07:14:58Z

src/tokens/transformation/tailwind-email/static/package.json

@@ -0,0 +1,3 @@
+{


isn't the parent directory already commonjs?

src/tokens/transformation/tailwind-email/copyStaticFiles.js

fallaciousreasoning · 2024-09-16T07:15:48Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

+const staticFiles = readdirSync(staticFilesPath)
+
+module.exports = {
+  do: function (dictionary, config) {


nit:

Suggested change

do: function (dictionary, config) {

do: (dictionary, config) => {

or

Suggested change

do: function (dictionary, config) {

do(dictionary, config) {

fallaciousreasoning · 2024-09-16T07:15:58Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

Can this file be typescript?

fallaciousreasoning · 2024-09-16T07:16:58Z

src/tokens/transformation/tailwind-email/formatTokens.ts

+
+const themes = ['light', 'dark']
+
+const kebabCase = (str: string) => str && str.toLowerCase().replaceAll(' ', '-')


I'm pretty sure we have this function (or an equivalent) somewhere else, right? Could we share it (maybe in a casing helpers file)?

fallaciousreasoning · 2024-09-16T07:18:29Z

src/tokens/transformation/tailwind-email/formatTokens.ts

+ * the parent (e.g. the root object, or 'legacy') and uses the
+ * appropriate color variable.
+ */
+function createColorTokensFromGroup(tokens, staticTheme = true) {


Okay, so the main different here is we output light/dark variables, unlike in normal Tailwind where we can update the colors dynamically?

Also, any chance we could throw a type on tokens?

fallaciousreasoning · 2024-09-16T07:19:25Z

src/tokens/transformation/tailwind-email/formatTokens.ts

+ */
+function createColorTokensFromGroup(tokens, staticTheme = true) {
+  const colorTokens = {}
+  tokens.forEach(({ type, name, ...t }) => {


optional nit: I think its generally nicer/more readable/faster to use a for .. of loop

fallaciousreasoning · 2024-09-16T07:20:51Z

src/tokens/transformation/tailwind-email/formatTokens.ts

+  return colorTokens
+}
+
+export default (({ dictionary }) => {


nit: Can we throw a type on dictionary?

Suggested change

export default (({ dictionary }) => {

export default (({ dictionary }: { dictionary: Dictionary }) => {

fallaciousreasoning · 2024-09-16T07:21:46Z

src/tokens/transformation/tailwind-email/formatTokens.ts

+  ])
+
+  // Format all other tokens
+  dictionary.allTokens.forEach(({ type, name, ...t }) => {


optional nit: for .. of

fallaciousreasoning · 2024-09-16T07:23:21Z

src/tokens/transformation/tailwind-email/index.ts

hey @AlanBreckthis looks pretty similar to the one in tailwind any chance we could just reuse that one?

Maybe as

import '../tailwind' // do customizations

github-actions · 2025-08-12T16:15:36Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

+
+export default {
+  do: function (dictionary, config) {
+    const targetDir = path.join(config.buildPath, config.preset)


_{reported by reviewdog 🐶}
[semgrep] Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.

Source: https://semgrep.dev/r/javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal

Cc @thypon @kdenhartog

github-actions · 2025-08-12T16:15:36Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

+  },
+  undo: function (dictionary, config) {
+    staticFiles.forEach((file) => {
+      const target = path.join(config.buildPath, config.preset, file)


_{reported by reviewdog 🐶}
[semgrep] Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.

Source: https://semgrep.dev/r/javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal

Cc @thypon @kdenhartog

github-actions · 2025-08-12T16:15:42Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://796.pr.nala.bravesoftware.com/
✅ Commit preview: https://796.pr.nala.bravesoftware.com/commit-e3a50fed9421c8b8038f506ca1af669bdfeaae47/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2409 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 124825 bytes
+ ./tokens/css/variables.css: 124825 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2025-08-12 16:14:22.636685829 +0000
+++ ./tokens/css/variables-android.css	2025-08-12 16:13:46.847885109 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2025-08-12 16:14:23.015693336 +0000
+++ ./tokens/css/variables-browser.css	2025-08-12 16:13:46.834884489 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2025-08-12 16:14:23.319699359 +0000
+++ ./tokens/css/variables-ios.css	2025-08-12 16:13:46.862885824 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2025-08-12 16:14:23.615705222 +0000
+++ ./tokens/css/variables-marketing.css	2025-08-12 16:13:46.879886634 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2025-08-12 16:14:23.911711084 +0000
+++ ./tokens/css/variables-news.css	2025-08-12 16:13:46.902887730 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2025-08-12 16:14:24.186716534 +0000
+++ ./tokens/css/variables-newtab.css	2025-08-12 16:13:46.909888064 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2025-08-12 16:14:24.479722337 +0000
+++ ./tokens/css/variables-search.css	2025-08-12 16:13:46.898887540 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2025-08-12 16:14:24.627725269 +0000
+++ ./tokens/css/variables-web3.css	2025-08-12 16:13:46.913888255 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2025-08-12 16:14:25.080734243 +0000
+++ ./tokens/css/variables.css	2025-08-12 16:13:46.697877959 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Aug 06 2025 14:26:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Tue Aug 12 2025 16:13:46 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

This is a greatly pared down version of the Tailwind config with the constraints of HTML email development in mind.

github-actions · 2025-12-20T00:13:41Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://796.pr.nala.bravesoftware.com/
✅ Commit preview: https://796.pr.nala.bravesoftware.com/commit-4f0deee933d649758fbbda973841ad29f84edf0e/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7390 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6644 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8180 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13501 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1933 bytes
---
- ./tokens/css/variables-search.old.css: 17733 bytes
+ ./tokens/css/variables-search.css: 17733 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 125593 bytes
+ ./tokens/css/variables.css: 125593 bytes

Variables Diff: variables-android.diff

--- ./tokens/css/variables-android.old.css	2025-12-20 00:12:27.232529906 +0000
+++ ./tokens/css/variables-android.css	2025-12-20 00:11:55.706896594 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-browser.diff

--- ./tokens/css/variables-browser.old.css	2025-12-20 00:12:27.477526051 +0000
+++ ./tokens/css/variables-browser.css	2025-12-20 00:11:55.692896784 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-ios.diff

--- ./tokens/css/variables-ios.old.css	2025-12-20 00:12:27.699522558 +0000
+++ ./tokens/css/variables-ios.css	2025-12-20 00:11:55.722896377 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-marketing.diff

--- ./tokens/css/variables-marketing.old.css	2025-12-20 00:12:27.927518971 +0000
+++ ./tokens/css/variables-marketing.css	2025-12-20 00:11:55.743896092 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-news.diff

--- ./tokens/css/variables-news.old.css	2025-12-20 00:12:28.150515462 +0000
+++ ./tokens/css/variables-news.css	2025-12-20 00:11:55.779895604 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-newtab.diff

--- ./tokens/css/variables-newtab.old.css	2025-12-20 00:12:28.395511607 +0000
+++ ./tokens/css/variables-newtab.css	2025-12-20 00:11:55.786895509 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-search.diff

--- ./tokens/css/variables-search.old.css	2025-12-20 00:12:28.512509766 +0000
+++ ./tokens/css/variables-search.css	2025-12-20 00:11:55.766895780 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

Variables Diff: variables-web3.diff

--- ./tokens/css/variables-web3.old.css	2025-12-20 00:12:28.768505738 +0000
+++ ./tokens/css/variables-web3.css	2025-12-20 00:11:55.791895441 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {

Variables Diff: variables.diff

--- ./tokens/css/variables.old.css	2025-12-20 00:12:29.147499774 +0000
+++ ./tokens/css/variables.css	2025-12-20 00:11:55.581898289 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Dec 18 2025 19:40:40 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Dec 20 2025 00:11:55 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2025-12-20T00:14:03Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

+
+export default {
+  do: function (dictionary, config) {
+    const targetDir = path.join(config.buildPath, config.preset)


_{reported by reviewdog 🐶}
[opengrep] Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.

Source: https://semgrep.dev/r/javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal

Cc @thypon @kdenhartog

github-actions · 2025-12-20T00:14:03Z

src/tokens/transformation/tailwind-email/copyStaticFiles.js

+  },
+  undo: function (dictionary, config) {
+    staticFiles.forEach((file) => {
+      const target = path.join(config.buildPath, config.preset, file)


_{reported by reviewdog 🐶}
[opengrep] Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.

Source: https://semgrep.dev/r/javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal

Cc @thypon @kdenhartog

AlanBreck requested review from fallaciousreasoning and petemill as code owners August 27, 2024 22:05

github-actions bot reviewed Aug 27, 2024

View reviewed changes

src/tokens/transformation/tailwind-email/copyStaticFiles.js Outdated Show resolved Hide resolved

github-actions bot added the needs-security-review label Aug 27, 2024

github-actions bot assigned thypon Aug 27, 2024

AlanBreck force-pushed the email-styles branch 3 times, most recently from b245733 to e158f7b Compare August 27, 2024 22:14

fallaciousreasoning reviewed Aug 27, 2024

View reviewed changes

AlanBreck force-pushed the email-styles branch from e158f7b to 6324bf6 Compare September 13, 2024 19:10

fallaciousreasoning reviewed Sep 16, 2024

View reviewed changes

src/tokens/transformation/tailwind-email/static/index.js

Copy link

Collaborator

fallaciousreasoning Sep 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this be a typescript file?

fallaciousreasoning reviewed Sep 16, 2024

View reviewed changes

thypon removed the needs-security-review label Jan 28, 2025

thypon removed their assignment Jan 29, 2025

AlanBreck force-pushed the email-styles branch 2 times, most recently from 17741f3 to e3a50fe Compare August 12, 2025 16:13

github-actions bot reviewed Aug 12, 2025

View reviewed changes

[Tailwind-email]: Add new config for tailwind-email

4f0deee

This is a greatly pared down version of the Tailwind config with the constraints of HTML email development in mind.

AlanBreck force-pushed the email-styles branch from e3a50fe to 4f0deee Compare December 20, 2025 00:09

github-actions bot reviewed Dec 20, 2025

View reviewed changes

	do: function (dictionary, config) {
	do: (dictionary, config) => {


		const themes = ['light', 'dark']

		const kebabCase = (str: string) => str && str.toLowerCase().replaceAll(' ', '-')

	export default (({ dictionary }) => {
	export default (({ dictionary }: { dictionary: Dictionary }) => {

Conversation

AlanBreck commented Aug 27, 2024

Uh oh!

Uh oh!

github-actions bot commented Aug 27, 2024

Uh oh!

github-actions bot commented Aug 27, 2024

Uh oh!

fallaciousreasoning left a comment

Choose a reason for hiding this comment

Uh oh!

AlanBreck commented Aug 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fallaciousreasoning commented Aug 28, 2024

Uh oh!

github-actions bot commented Sep 13, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fallaciousreasoning left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 12, 2025

Uh oh!

github-actions bot commented Dec 20, 2025

Uh oh!

github-actions bot Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Dec 20, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

AlanBreck commented Aug 28, 2024 •

edited

Loading