@maizzle/framework 4.1.0 → 4.1.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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/transformers/index.js +1 -1
  3. package/src/transformers/removeInlinedSelectors.js +26 -24
  4. package/test/test-transformers.js +17 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@maizzle/framework",
3
- "version": "4.1.0",
3
+ "version": "4.1.2",
4
4
  "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
5
5
  "license": "MIT",
6
6
  "main": "src/index.js",
package/src/transformers/index.js CHANGED
@@ -26,8 +26,8 @@ exports.process = async (html, config) => {
26
26
  html = await attributeToStyle(html, config)
27
27
  html = await inline(html, config)
28
28
  html = await shorthandInlineCSS(html, config)
29
- html = await removeInlinedClasses(html, config)
30
29
  html = await removeUnusedCSS(html, config)
30
+ html = await removeInlinedClasses(html, config)
31
31
  html = await removeInlineSizes(html, config)
32
32
  html = await removeInlineBgColor(html, config)
33
33
  html = await removeAttributes(html, config)
package/src/transformers/removeInlinedSelectors.js CHANGED
@@ -28,36 +28,38 @@ const plugin = () => tree => {
28
28
  const {selector} = rule
29
29
  const prop = get(rule.nodes[0], 'prop')
30
30
 
31
- // If we find the selector in the HTML...
32
- tree.match(matchHelper(selector), n => {
33
- const parsedAttrs = parseAttrs(n.attrs)
34
- const classAttr = get(parsedAttrs, 'class', [])
35
- const styleAttr = get(parsedAttrs, 'style', {})
31
+ try {
32
+ // If we find the selector in the HTML...
33
+ tree.match(matchHelper(selector), n => {
34
+ const parsedAttrs = parseAttrs(n.attrs)
35
+ const classAttr = get(parsedAttrs, 'class', [])
36
+ const styleAttr = get(parsedAttrs, 'style', {})
36
37
 
37
- // If the class is in the style attribute (inlined), remove it
38
- if (has(styleAttr, prop)) {
39
- // Remove the class attribute
40
- remove(classAttr, s => selector.includes(s))
41
-
42
- // Remove the rule in the <style> tag
43
- rule.remove()
44
- }
38
+ // If the class is in the style attribute (inlined), remove it
39
+ if (has(styleAttr, prop)) {
40
+ // Remove the class attribute
41
+ remove(classAttr, s => selector.includes(s))
45
42
 
46
- /**
47
- * Remove from <style> selectors that were used to create shorthand declarations
48
- * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
49
- */
50
- Object.keys(styleAttr).forEach(key => {
51
- if (prop.includes(key)) {
43
+ // Remove the rule in the <style> tag
52
44
  rule.remove()
53
- remove(classAttr, s => selector.includes(s))
54
45
  }
55
- })
56
46
 
57
- n.attrs = parsedAttrs.compose()
47
+ /**
48
+ * Remove from <style> selectors that were used to create shorthand declarations
49
+ * like `margin: 0 0 0 16px` (transformed with mergeLonghand when inlining).
50
+ */
51
+ Object.keys(styleAttr).forEach(key => {
52
+ if (prop && prop.includes(key)) {
53
+ rule.remove()
54
+ remove(classAttr, s => selector.includes(s))
55
+ }
56
+ })
57
+
58
+ n.attrs = parsedAttrs.compose()
58
59
 
59
- return n
60
- })
60
+ return n
61
+ })
62
+ } catch {}
61
63
  })
62
64
 
63
65
  node.content = root.toString()
package/test/test-transformers.js CHANGED
@@ -395,7 +395,6 @@ test('remove inlined selectors', async t => {
395
395
  border: 0;
396
396
  vertical-align: middle
397
397
  }
398
-
399
398
  .hover-text-blue:hover {
400
399
  color: #00a8ff;
401
400
  }
@@ -412,6 +411,15 @@ test('remove inlined selectors', async t => {
412
411
 
413
412
  #keepId {float:none}
414
413
 
414
+ .foo-class {
415
+ /* COMMENT */
416
+ color: red;
417
+ }
418
+
419
+ .ignore {
420
+ display: inline-block;
421
+ }
422
+
415
423
  @media (max-width: 600px) {
416
424
  .ignore {color: blue}
417
425
  }
@@ -421,7 +429,7 @@ test('remove inlined selectors', async t => {
421
429
  </style>
422
430
  </head>
423
431
  <body>
424
- <div id="keepId" class="remove keep ignore" style="color: red; display: inline">
432
+ <div id="keepId" class="remove keep ignore foo-class" style="color: red; display: inline">
425
433
  <h1 class="m-0 mb-4 mt-0 hover-text-blue" style="margin: 0 0 16px;">Title</h1>
426
434
  <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
427
435
  <div id="keepId" class="remove keep ignore" style="color: red; display: inline">text</div>
@@ -441,6 +449,11 @@ test('remove inlined selectors', async t => {
441
449
 
442
450
  #keepId {float:none}
443
451
 
452
+ .foo-class {
453
+ /* COMMENT */
454
+ color: red;
455
+ }
456
+
444
457
  @media (max-width: 600px) {
445
458
  .ignore {color: blue}
446
459
  }
@@ -450,10 +463,10 @@ test('remove inlined selectors', async t => {
450
463
  </style>
451
464
  </head>
452
465
  <body>
453
- <div id="keepId" class="keep ignore" style="color: red; display: inline">
466
+ <div id="keepId" class="keep foo-class" style="color: red; display: inline">
454
467
  <h1 class="hover-text-blue" style="margin: 0 0 16px">Title</h1>
455
468
  <img src="https://example.com/image.jpg" style="border: 0; vertical-align: middle">
456
- <div id="keepId" class="keep ignore" style="color: red; display: inline">text</div>
469
+ <div id="keepId" class="keep" style="color: red; display: inline">text</div>
457
470
  </div>
458
471
  </body>
459
472
  </html>`