Repository: maizzle/framework
Pull request #776 (2022-10-01 14:28:21)

refactor: tailwindcss compilation error
This PR changes the way an error is thrown when Tailwind CSS or PostCSS compilation fails by removing the `console.error` and throwing a `SyntaxError` instead of a plain `Error`.

Given something like this in your `tailwind.css` file:

```css
.example {
  @apply test;
}
```

The build will now fail with a `SyntaxError` that makes clearer where the issue occured:

```
✖ CssSyntaxError: C:\projects\maizzle\src\css\tailwind.css:2:3: The `test` class does not exist. If `test` is a custom class, make sure it is defined within a `@layer` directive.

  1 | .example {
> 2 |   @apply test;
    |   ^
  3 | }
  4 |
```



Patch:
diff --git a/src/generators/output/to-disk.js b/src/generators/output/to-disk.js
index 467adb1..6d48c40 100644
--- a/src/generators/output/to-disk.js
+++ b/src/generators/output/to-disk.js
@@ -28,7 +28,7 @@ module.exports = async (env, spinner, config) => {
 
   const css = (typeof get(config, 'build.tailwind.compiled') === 'string')
     ? config.build.tailwind.compiled
-    : await Tailwind.compile('', '', {}, config, spinner)
+    : await Tailwind.compile('', '', {}, config)
 
   // Parse each template config object
   await asyncForEach(templatesConfig, async templateConfig => {
diff --git a/src/generators/postcss.js b/src/generators/postcss.js
index ecb1354..f6ff8bc 100644
--- a/src/generators/postcss.js
+++ b/src/generators/postcss.js
@@ -6,7 +6,7 @@ const postcssNested = require('tailwindcss/nesting')
 const mergeLonghand = require('postcss-merge-longhand')
 
 module.exports = {
-  process: async (css = '', maizzleConfig = {}, spinner = null) => {
+  process: async (css = '', maizzleConfig = {}) => {
     const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
 
     return postcss([
@@ -18,12 +18,7 @@ module.exports = {
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {
-        console.error(error)
-        if (spinner) {
-          spinner.stop()
-        }
-
-        throw new Error(`PostCSS processing failed`)
+        throw new SyntaxError(error)
       })
   }
 }
diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
index 907c396..5c1bd2a 100644
--- a/src/generators/tailwindcss.js
+++ b/src/generators/tailwindcss.js
@@ -9,7 +9,7 @@ const mergeLonghand = require('postcss-merge-longhand')
 const {get, isObject, isEmpty, merge} = require('lodash')
 
 module.exports = {
-  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}, spinner = null) => {
+  compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
     tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
 
     // Compute the Tailwind config to use
@@ -105,12 +105,7 @@ module.exports = {
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {
-        console.error(error)
-        if (spinner) {
-          spinner.stop()
-        }
-
-        throw new Error(`Tailwind CSS compilation failed`)
+        throw new SyntaxError(error)
       })
   }
 }


Test patch:
diff --git a/test/test-postcss.js b/test/test-postcss.js
index ad16673..353b939 100644
--- a/test/test-postcss.js
+++ b/test/test-postcss.js
@@ -4,5 +4,5 @@ const PostCSS = require('../src/generators/postcss')
 test('throws on processing error', async t => {
   await t.throwsAsync(async () => {
     await PostCSS.process(null, {})
-  }, {instanceOf: Error, message: 'PostCSS processing failed'})
+  }, {instanceOf: SyntaxError})
 })
diff --git a/test/test-tailwindcss.js b/test/test-tailwindcss.js
index 63a27d1..398fb42 100644
--- a/test/test-tailwindcss.js
+++ b/test/test-tailwindcss.js
@@ -1,12 +1,10 @@
 const test = require('ava')
-const ora = require('ora')
 const Tailwind = require('../src/generators/tailwindcss')
 
 test('throws on compile error', async t => {
   await t.throwsAsync(async () => {
-    const spinner = ora('Compiling Tailwind CSS...').start()
-    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {}, spinner)
-  }, {instanceOf: Error, message: 'Tailwind CSS compilation failed'})
+    await Tailwind.compile('.test {@apply inexistent;}', '<div class="test">Test</a>', {}, {})
+  }, {instanceOf: SyntaxError})
 })
 
 test('uses defaults if no config specified', async t => {