Repository: maizzle/framework
Pull request #855 (2022-12-09 13:07:15)

Refactor `shorthandInlineCSS`
This PR: 

- refactors `shorthandInlineCSS` so that it runs after `removeUnusedCSS`. 

	This was necessary because running it before lead to a situation where CSS in body no longer matched that in the head, resulting in stray classes left over.
- adds consistency between shorthand _inline_ CSS (in the body) and _compiled_ Tailwind CSS (like when you write custom CSS like `.padded { @apply px-4 py-2; }`).
	
	Compiled Tailwind CSS was always shorthanded as long as you were not developing locally, meaning even when you didn't enable `shorthandInlineCSS`. This makes them consistent and opens the way to a more generic `shorthandCSS` option that will replace `shorthandInlineCSS` in the near future, since it doesn't really make sense to have them separated.


Patch:
diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
index 42a9e24..34c4a2f 100644
--- a/src/generators/tailwindcss.js
+++ b/src/generators/tailwindcss.js
@@ -99,7 +99,9 @@ module.exports = {
     const toProcess = [
       postcssNested(),
       tailwindcss(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      get(maizzleConfig, 'shorthandCSS', get(maizzleConfig, 'shorthandInlineCSS')) === true ?
+        mergeLonghand() :
+        () => {},
       ...get(maizzleConfig, 'build.postcss.plugins', [])
     ]
 
diff --git a/src/transformers/index.js b/src/transformers/index.js
index 68b8833..bff21bd 100644
--- a/src/transformers/index.js
+++ b/src/transformers/index.js
@@ -26,8 +26,8 @@ exports.process = async (html, config) => {
   html = await preventWidows(html, config)
   html = await attributeToStyle(html, config)
   html = await inline(html, config)
-  html = await shorthandInlineCSS(html, config)
   html = await removeUnusedCSS(html, config)
+  html = await shorthandInlineCSS(html, config)
   html = await removeInlineSizes(html, config)
   html = await removeInlineBgColor(html, config)
   html = await removeAttributes(html, config)
diff --git a/src/transformers/shorthandInlineCSS.js b/src/transformers/shorthandInlineCSS.js
index 47d1ebf..45fbb25 100644
--- a/src/transformers/shorthandInlineCSS.js
+++ b/src/transformers/shorthandInlineCSS.js
@@ -1,19 +1,25 @@
 const posthtml = require('posthtml')
 const {get, merge, isObject, isEmpty} = require('lodash')
-const mergeLonghand = require('posthtml-postcss-merge-longhand')
+const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
 const defaultConfig = require('../generators/posthtml/defaultConfig')
 
 module.exports = async (html, config, direct = false) => {
-  config = direct ? (isObject(config) ? config : true) : get(config, 'shorthandInlineCSS', [])
+  config = direct ?
+    (isObject(config) ? config : true) :
+    get(config, 'shorthandCSS', get(config, 'shorthandInlineCSS', []))
 
   const posthtmlOptions = merge(defaultConfig, get(config, 'build.posthtml.options', {}))
 
   if (typeof config === 'boolean' && config) {
-    html = await posthtml([mergeLonghand()]).process(html, posthtmlOptions).then(result => result.html)
+    html = await posthtml([mergeInlineLonghand()])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
   }
 
   if (isObject(config) && !isEmpty(config)) {
-    html = await posthtml([mergeLonghand(config)]).process(html, posthtmlOptions).then(result => result.html)
+    html = await posthtml([mergeInlineLonghand(config)])
+      .process(html, posthtmlOptions)
+      .then(result => result.html)
   }
 
   return html


Test patch:
diff --git a/test/test-tailwindcss.js b/test/test-tailwindcss.js
index c38c5df..f17ca89 100644
--- a/test/test-tailwindcss.js
+++ b/test/test-tailwindcss.js
@@ -12,7 +12,7 @@ test('uses defaults if no config specified', async t => {
     '@tailwind utilities;',
     '<p class="xl:z-0"></p>',
     {},
-    {env: 'production'}
+    {env: 'maizzle-ci'}
   )
 
   t.not(css, undefined)
@@ -21,7 +21,7 @@ test('uses defaults if no config specified', async t => {
 
 test('uses css file provided in environment config', async t => {
   const config = {
-    env: 'production',
+    env: 'maizzle-ci',
     build: {
       tailwind: {
         css: './test/stubs/main.css'
@@ -98,7 +98,7 @@ test('uses maizzle template path as content source (single file)', async t => {
 
 test('uses custom postcss plugins from the maizzle config', async t => {
   const maizzleConfig = {
-    env: 'production',
+    env: 'maizzle-ci',
     build: {
       postcss: {
         plugins: [
@@ -108,8 +108,37 @@ test('uses custom postcss plugins from the maizzle config', async t => {
     }
   }
 
-  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test inline">Test</a>', {}, maizzleConfig)
+  const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test inline">Test</div>', {}, maizzleConfig)
 
   t.not(css, undefined)
   t.is(css.trim(), '.inline {display: inline !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })
+
+test('respects `shorthandInlineCSS` in maizzle config', async t => {
+  const shorthandDisabled = await Tailwind.compile(
+    '@layer utilities { .padded {@apply px-4 py-6;} }',
+    '<div class="padded">Test</div>',
+    {},
+    {env: 'maizzle-ci'}
+  )
+
+  const shorthandEnabled = await Tailwind.compile(
+    '@layer utilities { .padded {@apply px-4 py-6;} }',
+    '<div class="padded">Test</div>',
+    {},
+    {
+      env: 'maizzle-ci',
+      shorthandCSS: true
+    }
+  )
+
+  t.is(
+    shorthandDisabled.replace(/\s+/g, '').trim(),
+    '.padded{padding-left:1rem;padding-right:1rem;padding-top:1.5rem;padding-bottom:1.5rem}'
+  )
+
+  t.is(
+    shorthandEnabled.replace(/\s+/g, '').trim(),
+    '.padded{padding:1.5rem1rem}'
+  )
+})