[Tailwind-email]: Add new config for tailwind-email #796
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
AlanBreck
requested review from
fallaciousreasoning and
petemill
as code owners
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| }, | ||
| undo: function (dictionary, config) { | ||
| staticFiles.forEach((file) => { | ||
| const target = join(config.buildPath, config.preset, file) |
There was a problem hiding this comment.
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
|
|
||
| module.exports = { | ||
| do: function (dictionary, config) { | ||
| const targetDir = join(config.buildPath, config.preset) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
this is fine.
AlanBreck
force-pushed
the
email-styles
branch
3 times, most recently
from
b245733
to
e158f7b
Compare
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://796.pr.nala.bravesoftware.com/ - ./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 {
|
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://796.pr.nala.bravesoftware.com/ - ./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 {
|
There was a problem hiding this comment.
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?)
|
@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 |
|
Cool, good to know - I'll have a proper look over this tomorrow 😄 |
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
e158f7b
to
6324bf6
Compare
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://796.pr.nala.bravesoftware.com/ - ./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 {
|
There was a problem hiding this comment.
can this be a typescript file?
There was a problem hiding this comment.
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.
| @@ -0,0 +1,3 @@ | |||
| { | |||
There was a problem hiding this comment.
isn't the parent directory already commonjs?
|
|
||
| module.exports = { | ||
| do: function (dictionary, config) { | ||
| const targetDir = join(config.buildPath, config.preset) |
There was a problem hiding this comment.
this is fine.
| const staticFiles = readdirSync(staticFilesPath) | ||
|
|
||
| module.exports = { | ||
| do: function (dictionary, config) { |
There was a problem hiding this comment.
nit:
Suggested change
| do: function (dictionary, config) { | |
| do: (dictionary, config) => { |
or
Suggested change
| do: function (dictionary, config) { | |
| do(dictionary, config) { |
There was a problem hiding this comment.
Can this file be typescript?
|
|
||
| const themes = ['light', 'dark'] | ||
|
|
||
| const kebabCase = (str: string) => str && str.toLowerCase().replaceAll(' ', '-') |
There was a problem hiding this comment.
I'm pretty sure we have this function (or an equivalent) somewhere else, right? Could we share it (maybe in a casing helpers file)?
| * the parent (e.g. the root object, or 'legacy') and uses the | ||
| * appropriate color variable. | ||
| */ | ||
| function createColorTokensFromGroup(tokens, staticTheme = true) { |
There was a problem hiding this comment.
Okay, so the main different here is we output light/dark variables, unlike in normal Tailwind where we can update the colors dynamically?
There was a problem hiding this comment.
Also, any chance we could throw a type on tokens?
| */ | ||
| function createColorTokensFromGroup(tokens, staticTheme = true) { | ||
| const colorTokens = {} | ||
| tokens.forEach(({ type, name, ...t }) => { |
There was a problem hiding this comment.
optional nit: I think its generally nicer/more readable/faster to use a for .. of loop
| return colorTokens | ||
| } | ||
|
|
||
| export default (({ dictionary }) => { |
There was a problem hiding this comment.
nit: Can we throw a type on dictionary?
Suggested change
| export default (({ dictionary }) => { | |
| export default (({ dictionary }: { dictionary: Dictionary }) => { |
| ]) | ||
|
|
||
| // Format all other tokens | ||
| dictionary.allTokens.forEach(({ type, name, ...t }) => { |
There was a problem hiding this comment.
optional nit: for .. of
There was a problem hiding this comment.
hey @AlanBreckthis looks pretty similar to the one in tailwind any chance we could just reuse that one?
There was a problem hiding this comment.
Maybe as
import '../tailwind'
// do customizations
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a greatly pared down version of the Tailwind config with
the constraints of HTML email development in mind.