Roots Discourse

Run Prettier in Sage 9 with Tailwind

I was just wondering i anyone had any luck running Prettier through Webpack on the latest version of Sage 9? I’m using the Tailwind setup which appears to be running custom Webpack config rather than the Laravel Mix workflow. I can’t get it to work for the life of me.

I’m implementing it with prettier-webpack-plugin@0 which should be compatible with Webpack < 4. I’m just calling it at the top of the plugins section in webpack.config.js and my .prettierrc.js is pretty standard, nothing crazy there. I’ve waded through a few errors but now I’m running into this:

No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:13640
      throw error;
      ^

SyntaxError: Leading decorators must be attached to a class declaration (5:11)
  3 |  * Normalize.css and some additional base styles.
  4 |  */
> 5 | @tailwind base;
    |           ^
  6 | 
  7 | /** Import variables */
  8 | @import 'common/variables';
    at t (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/parser-babel.js:1:317)
    at Object.parse (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/parser-babel.js:1:346164)
    at Object.parse (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier-plugin-tailwind/lib/parsers/babel.js:13:58)
    at Object.parse (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:13625:19)
    at coreFormat (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:14899:14)
    at format (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:15131:14)
    at /Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:57542:12
    at Object.format (/Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier/index.js:57562:12)
    at /Users/matt/Projects/{project}/wp-content/themes/{theme}/node_modules/prettier-webpack-plugin/index.js:56:47
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:75:3) {
  loc: { start: { line: 5, column: 11 } },
  codeFrame: '\x1B[0m \x1B[90m 3 | \x1B[39m\x1B[90m * Normalize.css and some additional base styles.\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 4 | \x1B[39m\x1B[90m */\x1B[39m\x1B[0m\n' +
    '\x1B[0m\x1B[31m\x1B[1m>\x1B[22m\x1B[39m\x1B[90m 5 | \x1B[39m\x1B[33m@\x1B[39mtailwind base\x1B[33m;\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m   | \x1B[39m          \x1B[31m\x1B[1m^\x1B[22m\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 6 | \x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 7 | \x1B[39m\x1B[90m/** Import variables */\x1B[39m\x1B[0m\n' +
    "\x1B[0m \x1B[90m 8 | \x1B[39m\x1B[33m@\x1B[39m\x1B[36mimport\x1B[39m \x1B[32m'common/variables'\x1B[39m\x1B[33m;\x1B[39m\x1B[0m"
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This Sage 9.x update branch updates webpack to version 5 -
which should also resolve compatibility issues:

Yeah, I was actually thinking about an update branch last night. I might give that a try.