Merge pull request #777 from maizzle/fix-postcss-import

maizzle · Oct 2, 2022 · af1d4e0 · af1d4e0
2 parents ba80622 + 4f5efbf
commit af1d4e0
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 161 deletions.
diff --git a/src/generators/postcss.js b/src/generators/postcss.js
@@ -1,4 +1,3 @@
-const path = require('path')
 const {get} = require('lodash')
 const postcss = require('postcss')
 const postcssImport = require('postcss-import')
@@ -7,10 +6,8 @@ const mergeLonghand = require('postcss-merge-longhand')
 
 module.exports = {
   process: async (css = '', maizzleConfig = {}) => {
-    const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
-
     return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
+      postcssImport(),
       postcssNested(),
       maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
       ...get(maizzleConfig, 'build.postcss.plugins', [])

diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
@@ -89,19 +89,23 @@ module.exports = {
     const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)
 
+    const toProcess = [
+      postcssNested(),
+      tailwindcss(config),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ]
+
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+      toProcess.unshift(
+        postcssImport({path: path.dirname(userFilePath)})
+      )
     } else {
-      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
+      css = `@tailwind components; @tailwind utilities; ${css}`
     }
 
-    return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
-      postcssNested(),
-      tailwindcss(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
-    ])
+    return postcss([...toProcess])
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {

diff --git a/test/expected/transformers/atimport-in-style.html b/test/expected/transformers/atimport-in-style.html
diff --git a/test/expected/transformers/preserve-transform-css.html b/test/expected/transformers/preserve-transform-css.html
diff --git a/test/expected/useConfig.html b/test/expected/useConfig.html
diff --git a/test/fixtures/transformers/atimport-in-style.html b/test/fixtures/transformers/atimport-in-style.html
diff --git a/test/fixtures/transformers/preserve-transform-css.html b/test/fixtures/transformers/preserve-transform-css.html
diff --git a/test/fixtures/useConfig.html b/test/fixtures/useConfig.html
diff --git a/test/test-tostring.js b/test/test-tostring.js
@@ -1,32 +1,18 @@
 const test = require('ava')
 const Maizzle = require('../src')
 
-const path = require('path')
-const fs = require('fs')
-
-const readFile = (dir, filename) => fs.promises
-  .readFile(path.join(__dirname, dir, `${filename}.html`), 'utf8')
-  .then(html => html.trim())
-
-const fixture = file => readFile('fixtures', file)
-const expected = file => readFile('expected', file)
-
 const renderString = (string, options = {}) => Maizzle.render(string, options).then(({html}) => html)
 
-test('compiles HTML string if no options are passed', async t => {
-  const source = await fixture('basic')
-
-  const html = await renderString(source)
-
-  t.is(html, source)
-})
-
 test('uses environment config file(s) if available', async t => {
-  const source = await fixture('useConfig')
+  const source = `<div>{{ page.mail }}</div>`
 
-  const html = await renderString(source, {maizzle: {env: 'maizzle-ci'}})
+  const html = await renderString(source, {
+    maizzle: {
+      mail: 'puzzle'
+    }
+  })
 
-  t.is(html, await expected('useConfig'))
+  t.is(html, '<div>puzzle</div>')
 })
 
 test('throws if first argument is not an HTML string', async t => {
@@ -129,20 +115,48 @@ test('prevents overwriting page object', async t => {
 })
 
 test('preserves css in marked style tags (tailwindcss)', async t => {
-  const source = await fixture('transformers/preserve-transform-css')
+  const source = `<html>
+    <head>
+      <style tailwindcss preserve>
+        div {
+          @apply uppercase;
+        }
+        [data-ogsc] .inexistent {
+          color: #ef4444;
+        }
+        div > u + .body .gmail-android-block {
+          display: block !important;
+        }
+        u + #body a {
+          color: inherit;
+        }
+      </style>
+    </head>
+    <body>
+      <div>test</div>
+    </body>
+  </html>`
+
   const html = await renderString(source, {
     // So that we don't compile twice
     tailwind: {
       compiled: ''
     }
   })
 
-  t.is(html, await expected('transformers/preserve-transform-css'))
+  t.true(html.includes('[data-ogsc] .inexistent'))
+  t.true(html.includes('div > u + .body .gmail-android-block'))
+  t.true(html.includes('u + #body a'))
 })
 
 test('@import css files in marked style tags', async t => {
-  const source = await fixture('transformers/atimport-in-style')
+  const source = `<style postcss>@import "test/stubs/post.css";</style>`
   const html = await renderString(source)
 
-  t.is(html, await expected('transformers/atimport-in-style'))
+  t.is(html, `<style>div {
+  margin-top: 1px;
+  margin-right: 2px;
+  margin-bottom: 3px;
+  margin-left: 4px;
+}</style>`)
 })
diff --git a/test/test-transformers.js b/test/test-transformers.js
@@ -287,31 +287,22 @@ test('filters (tailwindcss)', async t => {
     </style>`
   )
 
-  const expected = `<style>.inline { display: inline !important
-} .table { display: table !important
-} .contents { display: contents !important
-} .hidden { display: none !important
-} .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important
-} .uppercase { text-transform: uppercase !important
-} .lowercase { text-transform: lowercase !important
-} .capitalize { text-transform: capitalize !important
-} div { display: none
-}
-    </style>`
-
-  t.is(html, expected)
+  t.true(html.replace(/\s/g, '').includes(`div{display:none}`))
 })
 
 test('filters (postcss)', async t => {
   const html = await Maizzle.withFilters(
-    `<style postcss>@import 'test/stubs/post.css';</style>`
+    `<style postcss>
+      div {
+        margin-top: 1px;
+        margin-right: 2px;
+        margin-bottom: 3px;
+        margin-left: 4px;
+      }
+    </style>`
   )
 
-  const expected = `<style>div {
-  margin: 1px 2px 3px 4px;
-}</style>`
-
-  t.is(html, expected)
+  t.is(html.replace(/\n {2,}/g, ''), '<style>div {margin: 1px 2px 3px 4px;}</style>')
 })
 
 test('url parameters', async t => {