@react-email/tailwind 2.0.0-tailwindv4.0 → 2.0.0-tailwindv4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.mts.map +1 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +53 -11
  4. package/dist/index.mjs +53 -11
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +7 -7
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,OAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,OAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,OAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAkET,QAAA,CAlES;EAAA,QAAA;EAAA;AAAA,CAAA,EAkEsB,aAlEtB,CAAA,EAkEmC,OAAA,CAAA,SAlEnC"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,OAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,OAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,OAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,QAAA,CApES;EAAA,QAAA;EAAA;AAAA,CAAA,EAoEsB,aApEtB,CAAA,EAoEmC,OAAA,CAAA,SApEnC"}
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,KAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,KAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,KAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAkET,QAAA,CAlES;EAAA,QAAA;EAAA;AAAA,CAAA,EAkEsB,aAlEtB,CAAA,EAkEmC,KAAA,CAAA,SAlEnC"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/tailwind.tsx"],"sourcesContent":[],"mappings":";;;;KAaY,cAAA,GAAiB,KAAK;UAEjB,aAAA;EAFL,QAAA,EAGA,KAAA,CAAM,SAHQ;EAAA,MAAA,CAAA,EAIf,cAJe;;AAAG,UAOZ,iBAAA,CAPY;EAAI,QAAA,CAAA,EAQpB,KAAA,CAAM,SARc;EAEhB,SAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAQpB,KAAA,CAAM,aARc;;AAEnB,cASE,gBATF,EASoB,cATpB;AAAc,iBAoET,QAAA,CApES;EAAA,QAAA;EAAA;AAAA,CAAA,EAoEsB,aApEtB,CAAA,EAoEmC,KAAA,CAAA,SApEnC"}
package/dist/index.js CHANGED
@@ -19193,7 +19193,7 @@ function resolveCalcExpressions(node) {
19193
19193
  func.children.forEach((child, item) => {
19194
19194
  const left = item.prev;
19195
19195
  const right = item.next;
19196
- if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number") && (right.data.type === "Dimension" || right.data.type === "Number")) {
19196
+ if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
19197
19197
  if (child.value === "*" || child.value === "/") {
19198
19198
  const value = (() => {
19199
19199
  if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
@@ -19235,6 +19235,31 @@ function resolveCalcExpressions(node) {
19235
19235
  };
19236
19236
  func.children.remove(left);
19237
19237
  func.children.remove(right);
19238
+ } else if (left.data.type === "Percentage" && right.data.type === "Number") {
19239
+ item.data = {
19240
+ type: "Percentage",
19241
+ value
19242
+ };
19243
+ func.children.remove(left);
19244
+ func.children.remove(right);
19245
+ } else if (left.data.type === "Number" && right.data.type === "Percentage") {
19246
+ item.data = {
19247
+ type: "Percentage",
19248
+ value
19249
+ };
19250
+ func.children.remove(left);
19251
+ func.children.remove(right);
19252
+ } else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
19253
+ if (child.value === "/") item.data = {
19254
+ type: "Number",
19255
+ value
19256
+ };
19257
+ else item.data = {
19258
+ type: "Percentage",
19259
+ value
19260
+ };
19261
+ func.children.remove(left);
19262
+ func.children.remove(right);
19238
19263
  }
19239
19264
  }
19240
19265
  }
@@ -19278,10 +19303,6 @@ function lrgbToRgb(input) {
19278
19303
  function clamp(value, min, max) {
19279
19304
  return Math.min(Math.max(value, min), max);
19280
19305
  }
19281
- function round(value, digits = 1) {
19282
- const factor = 10 ** digits;
19283
- return Math.round(value * factor) / factor;
19284
- }
19285
19306
  function oklchToOklab(oklch) {
19286
19307
  return {
19287
19308
  l: oklch.l,
@@ -19299,9 +19320,9 @@ function oklchToRgb(oklch) {
19299
19320
  const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
19300
19321
  const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
19301
19322
  return {
19302
- r: round(clamp(r, 0, 255)),
19303
- g: round(clamp(g, 0, 255)),
19304
- b: round(clamp(b, 0, 255))
19323
+ r: clamp(r, 0, 255).toFixed(0),
19324
+ g: clamp(g, 0, 255).toFixed(0),
19325
+ b: clamp(b, 0, 255).toFixed(0)
19305
19326
  };
19306
19327
  }
19307
19328
  function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
@@ -19489,6 +19510,27 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
19489
19510
  hashParentListItem.data = parse(`rgb(${r},${g},${b},${a.toFixed(1)})`, { context: "value" });
19490
19511
  }
19491
19512
  });
19513
+ walk(declaration, {
19514
+ visit: "Function",
19515
+ enter(func, parentListItem) {
19516
+ if (func.name === "color-mix") {
19517
+ const originalColor = find(func, (node) => node.type === "Function" && node.name === "rgb");
19518
+ const percentage$1 = find(func, (node) => node.type === "Percentage");
19519
+ if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && originalColor && percentage$1) {
19520
+ const alpha = Number.parseFloat(percentage$1.value) / 100;
19521
+ originalColor.children.appendData({
19522
+ type: "Operator",
19523
+ value: ","
19524
+ });
19525
+ originalColor.children.appendData({
19526
+ type: "Number",
19527
+ value: alpha.toString()
19528
+ });
19529
+ parentListItem.data = originalColor;
19530
+ }
19531
+ }
19532
+ }
19533
+ });
19492
19534
  if (declaration.property === "padding-inline") {
19493
19535
  const paddingRight = separteShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
19494
19536
  list.insertData(paddingRight, item);
@@ -21457,7 +21499,7 @@ async function setupTailwind(config) {
21457
21499
  };
21458
21500
  throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
21459
21501
  },
21460
- polyfills: 3,
21502
+ polyfills: 0,
21461
21503
  async loadStylesheet(id, base) {
21462
21504
  if (id === "tailwindcss") return {
21463
21505
  base,
@@ -21495,7 +21537,7 @@ async function setupTailwind(config) {
21495
21537
 
21496
21538
  //#endregion
21497
21539
  //#region src/tailwind.tsx
21498
- const pixelBasedPreset = { theme: {
21540
+ const pixelBasedPreset = { theme: { extend: {
21499
21541
  fontSize: {
21500
21542
  xs: ["12px", { lineHeight: "16px" }],
21501
21543
  sm: ["14px", { lineHeight: "20px" }],
@@ -21548,7 +21590,7 @@ const pixelBasedPreset = { theme: {
21548
21590
  80: "320px",
21549
21591
  96: "384px"
21550
21592
  }
21551
- } };
21593
+ } } };
21552
21594
  function Tailwind({ children, config }) {
21553
21595
  const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
21554
21596
  let classesUsed = [];
package/dist/index.mjs CHANGED
@@ -19191,7 +19191,7 @@ function resolveCalcExpressions(node) {
19191
19191
  func.children.forEach((child, item) => {
19192
19192
  const left = item.prev;
19193
19193
  const right = item.next;
19194
- if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number") && (right.data.type === "Dimension" || right.data.type === "Number")) {
19194
+ if (left && right && child.type === "Operator" && (left.data.type === "Dimension" || left.data.type === "Number" || left.data.type === "Percentage") && (right.data.type === "Dimension" || right.data.type === "Number" || right.data.type === "Percentage")) {
19195
19195
  if (child.value === "*" || child.value === "/") {
19196
19196
  const value = (() => {
19197
19197
  if (child.value === "*") return String(Number.parseFloat(left.data.value) * Number.parseFloat(right.data.value));
@@ -19233,6 +19233,31 @@ function resolveCalcExpressions(node) {
19233
19233
  };
19234
19234
  func.children.remove(left);
19235
19235
  func.children.remove(right);
19236
+ } else if (left.data.type === "Percentage" && right.data.type === "Number") {
19237
+ item.data = {
19238
+ type: "Percentage",
19239
+ value
19240
+ };
19241
+ func.children.remove(left);
19242
+ func.children.remove(right);
19243
+ } else if (left.data.type === "Number" && right.data.type === "Percentage") {
19244
+ item.data = {
19245
+ type: "Percentage",
19246
+ value
19247
+ };
19248
+ func.children.remove(left);
19249
+ func.children.remove(right);
19250
+ } else if (left.data.type === "Percentage" && right.data.type === "Percentage") {
19251
+ if (child.value === "/") item.data = {
19252
+ type: "Number",
19253
+ value
19254
+ };
19255
+ else item.data = {
19256
+ type: "Percentage",
19257
+ value
19258
+ };
19259
+ func.children.remove(left);
19260
+ func.children.remove(right);
19236
19261
  }
19237
19262
  }
19238
19263
  }
@@ -19276,10 +19301,6 @@ function lrgbToRgb(input) {
19276
19301
  function clamp(value, min, max) {
19277
19302
  return Math.min(Math.max(value, min), max);
19278
19303
  }
19279
- function round(value, digits = 1) {
19280
- const factor = 10 ** digits;
19281
- return Math.round(value * factor) / factor;
19282
- }
19283
19304
  function oklchToOklab(oklch) {
19284
19305
  return {
19285
19306
  l: oklch.l,
@@ -19297,9 +19318,9 @@ function oklchToRgb(oklch) {
19297
19318
  const g = 255 * lrgbToRgb(LSM_TO_RGB.g[0] * l + LSM_TO_RGB.g[1] * m + LSM_TO_RGB.g[2] * s);
19298
19319
  const b = 255 * lrgbToRgb(LSM_TO_RGB.b[0] * l + LSM_TO_RGB.b[1] * m + LSM_TO_RGB.b[2] * s);
19299
19320
  return {
19300
- r: round(clamp(r, 0, 255)),
19301
- g: round(clamp(g, 0, 255)),
19302
- b: round(clamp(b, 0, 255))
19321
+ r: clamp(r, 0, 255).toFixed(0),
19322
+ g: clamp(g, 0, 255).toFixed(0),
19323
+ b: clamp(b, 0, 255).toFixed(0)
19303
19324
  };
19304
19325
  }
19305
19326
  function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
@@ -19487,6 +19508,27 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
19487
19508
  hashParentListItem.data = parse(`rgb(${r},${g},${b},${a.toFixed(1)})`, { context: "value" });
19488
19509
  }
19489
19510
  });
19511
+ walk(declaration, {
19512
+ visit: "Function",
19513
+ enter(func, parentListItem) {
19514
+ if (func.name === "color-mix") {
19515
+ const originalColor = find(func, (node) => node.type === "Function" && node.name === "rgb");
19516
+ const percentage$1 = find(func, (node) => node.type === "Percentage");
19517
+ if (func.children.last?.type === "Identifier" && func.children.last.name === "transparent" && originalColor && percentage$1) {
19518
+ const alpha = Number.parseFloat(percentage$1.value) / 100;
19519
+ originalColor.children.appendData({
19520
+ type: "Operator",
19521
+ value: ","
19522
+ });
19523
+ originalColor.children.appendData({
19524
+ type: "Number",
19525
+ value: alpha.toString()
19526
+ });
19527
+ parentListItem.data = originalColor;
19528
+ }
19529
+ }
19530
+ }
19531
+ });
19490
19532
  if (declaration.property === "padding-inline") {
19491
19533
  const paddingRight = separteShorthandDeclaration(declaration, ["padding-left", "padding-right"]);
19492
19534
  list.insertData(paddingRight, item);
@@ -21455,7 +21497,7 @@ async function setupTailwind(config) {
21455
21497
  };
21456
21498
  throw new Error(`NO-OP: should we implement support for ${resourceHint}?`);
21457
21499
  },
21458
- polyfills: 3,
21500
+ polyfills: 0,
21459
21501
  async loadStylesheet(id, base) {
21460
21502
  if (id === "tailwindcss") return {
21461
21503
  base,
@@ -21493,7 +21535,7 @@ async function setupTailwind(config) {
21493
21535
 
21494
21536
  //#endregion
21495
21537
  //#region src/tailwind.tsx
21496
- const pixelBasedPreset = { theme: {
21538
+ const pixelBasedPreset = { theme: { extend: {
21497
21539
  fontSize: {
21498
21540
  xs: ["12px", { lineHeight: "16px" }],
21499
21541
  sm: ["14px", { lineHeight: "20px" }],
@@ -21546,7 +21588,7 @@ const pixelBasedPreset = { theme: {
21546
21588
  80: "320px",
21547
21589
  96: "384px"
21548
21590
  }
21549
- } };
21591
+ } } };
21550
21592
  function Tailwind({ children, config }) {
21551
21593
  const tailwindSetup = useSuspensedPromise(() => setupTailwind(config ?? {}), JSON.stringify(config));
21552
21594
  let classesUsed = [];