Repository: maizzle/framework
Pull request #654 (2022-03-22 18:37:26)

fix: tailwind compilation with user css file
This fixes a regression in the previous release, which resulted in the user's `tailwind.css` not being used.

Now everything should work as expected:

1. if `src/css/tailwind.css` exists -> only its contents are compiled
2. if it's missing, `'@tailwind components; @tailwind utilities;' + yourcss` is compiled

In both cases, `tailwind.config.js` from the current dir will be used; Maizzle falls back to Tailwind's default config if this is unabailable. (note: this is for local dev, if using programmatically the Tailwind config is passed as a parameter).

`yourcss` in point 2 is used when calling `Tailwind.compile` internally, and is the content of `<style postcss>` or `<style tailwindcss>` tags in your template (so you can use Tailwind syntax in there).


Patch:
diff --git a/src/generators/output/to-disk.js b/src/generators/output/to-disk.js
index 51dac39..9e621b2 100644
--- a/src/generators/output/to-disk.js
+++ b/src/generators/output/to-disk.js
@@ -29,7 +29,7 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'tailwind.compiled') === 'string')
     ? config.tailwind.compiled
-    : await Tailwind.compile('@tailwind components; @tailwind utilities;', '', {}, config, spinner)
+    : await Tailwind.compile('', '', {}, config, spinner)
 
   // Parse each template config object
   await asyncForEach(templatesConfig, async templateConfig => {
diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
index 642a865..8c630ab 100644
--- a/src/generators/tailwindcss.js
+++ b/src/generators/tailwindcss.js
@@ -91,6 +91,8 @@ module.exports = {
 
     if (userFileExists) {
       css += await fs.readFile(path.resolve(userFilePath), 'utf8')
+    } else {
+      css = '@tailwind components; @tailwind utilities;' + css
     }
 
     return postcss([
diff --git a/src/transformers/transform.js b/src/transformers/transform.js
index 04634ae..74fbef4 100644
--- a/src/transformers/transform.js
+++ b/src/transformers/transform.js
@@ -15,8 +15,8 @@ module.exports = async (html, config = {}, direct = false) => {
 
   const compileCss = css => Tailwind.compile(css, html, tailwindConfig, maizzleConfig)
 
-  replacements.tailwindcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
-  replacements.postcss = css => compileCss(`@tailwind components; @tailwind utilities; ${css}`)
+  replacements.tailwindcss = css => compileCss(css)
+  replacements.postcss = css => compileCss(css)
 
   return posthtml([posthtmlContent(replacements)]).process(html, posthtmlOptions).then(result => result.html)
 }


Test patch:
diff --git a/test/test-tailwind.js b/test/test-tailwind.js
index afca689..ea16a96 100644
--- a/test/test-tailwind.js
+++ b/test/test-tailwind.js
@@ -113,5 +113,5 @@ test('uses custom postcss plugins from the maizzle config', async t => {
   const css = await Tailwind.compile('.test {transform: scale(0.5)}', '<div class="test">Test</a>', {}, maizzleConfig)
 
   t.not(css, undefined)
-  t.is(css.trim(), '.test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
+  t.is(css.trim(), '.inline {display: inline !important} .table {display: table !important} .contents {display: contents !important} .transform {-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important} .test {-webkit-transform: scale(0.5);transform: scale(0.5)}')
 })