Unexpected output when using prettier-plugin-tailwindcss + daisyUI

[Tohsig]

When reporting an issue, please include the following information in your post:

• Explain the Issue and Expected Behavior
• Prettier version
• JsPrettier Plug-in Version
• Platform Details
• Generated Prettier command line arguments
• Is the same behavior observed when run against Prettier directly?
• The contents of your User/JsPrettier.sublime-settings file
• The contents of your <project_name>.sublime-project file (if applicable)
• Steps to reproduce the behavior

---

Explain the Issue and Expected Behavior

I've hit a weird interaction between JsPrettier, prettier-plugin-tailwindcss, and daisyUI. Tailwind's Prettier plugin re-orders class names according to Tailwind's recommendations, and DaisyUI is a component library for Tailwind.

When you add daisyui to the plugins list in tailwind-config.js, JsPrettier will still format the code correctly but it will also add some of the daisyUI log output to the top of the file:

�[35m🌼 daisyUI components 2.19.0�[0m �[0m https://github.com/saadeghi/daisyui
  �[32m✔︎ Including:�[0m �[0m base, components, themes[29], utilities

When daisyui is removed from Tailwind's plugin list, then JsPrettier and prettier-plugin-tailwindcss work flawlessly.

Super niche issue that seems to only happen in Sublime and not when I run prettier directly or in VS Code. I'm not sure which part of the chain is actually causing the interaction, so I figured I'd start here.

Prettier version

v2.7.1

JsPrettier Plug-in Version

v1.60.6

Platform Details

• Sublime Text Version: 4
• Sublime Text Build: 4126
• Operating System Name: macOS
• Operating System Version: 12.3.1
• Operating System Architecture: m1

Generated Prettier command line arguments

----------------------------------------
 JsPrettier DEBUG - Prettier CLI Command 
-----------------------------------------

/Users/eric/Library/pnpm/prettier 
  --config /Users/eric/code/experiments/sublime-jsprettier-test/prettier.config.js 
  --parser html 
  --use-tabs false 
  --stdin-filepath /Users/eric/code/experiments/sublime-jsprettier-test/src/test.html 
  --loglevel debug 
  --config-precedence file-override 
  --cursor-offset 49

Prettier reported the following output:

[debug] normalized argv: {"_":[],"cache":false,"color":true,"editorconfig":true,"useTabs":false,"config":"/Users/eric/code/experiments/sublime-jsprettier-test/prettier.config.js","parser":"html","filepath":"/Users/eric/code/experiments/sublime-jsprettier-test/src/test.html","loglevel":"debug","configPrecedence":"file-override","cursorOffset":49,"debugRepeat":0,"ignorePath":".prettierignore","plugins":[],"pluginSearchDirs":[],"__raw":{"_":[],"cache":false,"color":true,"editorconfig":true,"use-tabs":false,"config":"/Users/eric/code/experiments/sublime-jsprettier-test/prettier.config.js","parser":"html","stdin-filepath":"/Users/eric/code/experiments/sublime-jsprettier-test/src/test.html","loglevel":"debug","config-precedence":"file-override","cursor-offset":"49","debug-repeat":0,"ignore-path":".prettierignore","plugin":[],"plugin-search-dir":[]}}
[debug] load config file from '/Users/eric/code/experiments/sublime-jsprettier-test/prettier.config.js'
[debug] loaded options `{"plugins":[{"languages":[{"name":"svelte","parsers":["svelte"],"extensions":[".svelte"],"vscodeLanguageIds":["svelte"]}],"options":{"svelteSortOrder":{"since":"0.6.0","category":"Svelte","type":"choice","default":"options-scripts-markup-styles","description":"Sort order for scripts, markup, and styles","choices":[{"value":"options-scripts-markup-styles","description":"options-scripts-markup-styles"},{"value":"options-scripts-styles-markup","description":"options-scripts-styles-markup"},{"value":"options-markup-styles-scripts","description":"options-markup-styles-scripts"},{"value":"options-markup-scripts-styles","description":"options-markup-scripts-styles"},{"value":"options-styles-markup-scripts","description":"options-styles-markup-scripts"},{"value":"options-styles-scripts-markup","description":"options-styles-scripts-markup"},{"value":"scripts-options-markup-styles","description":"scripts-options-markup-styles"},{"value":"scripts-options-styles-markup","description":"scripts-options-styles-markup"},{"value":"markup-options-styles-scripts","description":"markup-options-styles-scripts"},{"value":"markup-options-scripts-styles","description":"markup-options-scripts-styles"},{"value":"styles-options-markup-scripts","description":"styles-options-markup-scripts"},{"value":"styles-options-scripts-markup","description":"styles-options-scripts-markup"},{"value":"scripts-markup-options-styles","description":"scripts-markup-options-styles"},{"value":"scripts-styles-options-markup","description":"scripts-styles-options-markup"},{"value":"markup-styles-options-scripts","description":"markup-styles-options-scripts"},{"value":"markup-scripts-options-styles","description":"markup-scripts-options-styles"},{"value":"styles-markup-options-scripts","description":"styles-markup-options-scripts"},{"value":"styles-scripts-options-markup","description":"styles-scripts-options-markup"},{"value":"scripts-markup-styles-options","description":"scripts-markup-styles-options"},{"value":"scripts-styles-markup-options","description":"scripts-styles-markup-options"},{"value":"markup-styles-scripts-options","description":"markup-styles-scripts-options"},{"value":"markup-scripts-styles-options","description":"markup-scripts-styles-options"},{"value":"styles-markup-scripts-options","description":"styles-markup-scripts-options"},{"value":"styles-scripts-markup-options","description":"styles-scripts-markup-options"},{"value":"scripts-markup-styles","description":"scripts-markup-styles"},{"value":"scripts-styles-markup","description":"scripts-styles-markup"},{"value":"markup-styles-scripts","description":"markup-styles-scripts"},{"value":"markup-scripts-styles","description":"markup-scripts-styles"},{"value":"styles-markup-scripts","description":"styles-markup-scripts"},{"value":"styles-scripts-markup","description":"styles-scripts-markup"}]},"svelteStrictMode":{"since":"0.7.0","category":"Svelte","type":"boolean","default":false,"description":"More strict HTML syntax: self-closed tags, quotes in attributes"},"svelteBracketNewLine":{"since":"0.6.0","category":"Svelte","type":"boolean","description":"Put the `>` of a multiline element on a new line","deprecated":"2.5.0"},"svelteAllowShorthand":{"since":"1.0.0","category":"Svelte","type":"boolean","default":true,"description":"Option to enable/disable component attribute shorthand if attribute name and expressions are same"},"svelteIndentScriptAndStyle":{"since":"1.2.0","category":"Svelte","type":"boolean","default":true,"description":"Whether or not to indent the code inside <script> and <style> tags in Svelte files"},"tailwindConfig":{"type":"string","category":"Tailwind CSS","description":"TODO"}},"parsers":{"html":{"astFormat":"html"},"glimmer":{"astFormat":"glimmer"},"lwc":{"astFormat":"html"},"angular":{"astFormat":"html"},"vue":{"astFormat":"html"},"css":{"astFormat":"postcss"},"scss":{"astFormat":"postcss"},"less":{"astFormat":"postcss"},"babel":{"astFormat":"estree"},"babel-flow":{"astFormat":"estree"},"flow":{"astFormat":"estree"},"typescript":{"astFormat":"estree"},"babel-ts":{"astFormat":"estree"},"espree":{"astFormat":"estree"},"meriyah":{"astFormat":"estree"},"__js_expression":{"astFormat":"estree"},"svelte":{"astFormat":"svelte-ast"}},"printers":{"svelte-ast":{}}}]}`
[debug] applied config-precedence (file-override): {"filepath":"/Users/eric/code/experiments/sublime-jsprettier-test/src/test.html","cursorOffset":49,"parser":"html","plugins":[{"languages":[{"name":"svelte","parsers":["svelte"],"extensions":[".svelte"],"vscodeLanguageIds":["svelte"]}],"options":{"svelteSortOrder":{"since":"0.6.0","category":"Svelte","type":"choice","default":"options-scripts-markup-styles","description":"Sort order for scripts, markup, and styles","choices":[{"value":"options-scripts-markup-styles","description":"options-scripts-markup-styles"},{"value":"options-scripts-styles-markup","description":"options-scripts-styles-markup"},{"value":"options-markup-styles-scripts","description":"options-markup-styles-scripts"},{"value":"options-markup-scripts-styles","description":"options-markup-scripts-styles"},{"value":"options-styles-markup-scripts","description":"options-styles-markup-scripts"},{"value":"options-styles-scripts-markup","description":"options-styles-scripts-markup"},{"value":"scripts-options-markup-styles","description":"scripts-options-markup-styles"},{"value":"scripts-options-styles-markup","description":"scripts-options-styles-markup"},{"value":"markup-options-styles-scripts","description":"markup-options-styles-scripts"},{"value":"markup-options-scripts-styles","description":"markup-options-scripts-styles"},{"value":"styles-options-markup-scripts","description":"styles-options-markup-scripts"},{"value":"styles-options-scripts-markup","description":"styles-options-scripts-markup"},{"value":"scripts-markup-options-styles","description":"scripts-markup-options-styles"},{"value":"scripts-styles-options-markup","description":"scripts-styles-options-markup"},{"value":"markup-styles-options-scripts","description":"markup-styles-options-scripts"},{"value":"markup-scripts-options-styles","description":"markup-scripts-options-styles"},{"value":"styles-markup-options-scripts","description":"styles-markup-options-scripts"},{"value":"styles-scripts-options-markup","description":"styles-scripts-options-markup"},{"value":"scripts-markup-styles-options","description":"scripts-markup-styles-options"},{"value":"scripts-styles-markup-options","description":"scripts-styles-markup-options"},{"value":"markup-styles-scripts-options","description":"markup-styles-scripts-options"},{"value":"markup-scripts-styles-options","description":"markup-scripts-styles-options"},{"value":"styles-markup-scripts-options","description":"styles-markup-scripts-options"},{"value":"styles-scripts-markup-options","description":"styles-scripts-markup-options"},{"value":"scripts-markup-styles","description":"scripts-markup-styles"},{"value":"scripts-styles-markup","description":"scripts-styles-markup"},{"value":"markup-styles-scripts","description":"markup-styles-scripts"},{"value":"markup-scripts-styles","description":"markup-scripts-styles"},{"value":"styles-markup-scripts","description":"styles-markup-scripts"},{"value":"styles-scripts-markup","description":"styles-scripts-markup"}]},"svelteStrictMode":{"since":"0.7.0","category":"Svelte","type":"boolean","default":false,"description":"More strict HTML syntax: self-closed tags, quotes in attributes"},"svelteBracketNewLine":{"since":"0.6.0","category":"Svelte","type":"boolean","description":"Put the `>` of a multiline element on a new line","deprecated":"2.5.0"},"svelteAllowShorthand":{"since":"1.0.0","category":"Svelte","type":"boolean","default":true,"description":"Option to enable/disable component attribute shorthand if attribute name and expressions are same"},"svelteIndentScriptAndStyle":{"since":"1.2.0","category":"Svelte","type":"boolean","default":true,"description":"Whether or not to indent the code inside <script> and <style> tags in Svelte files"},"tailwindConfig":{"type":"string","category":"Tailwind CSS","description":"TODO"}},"parsers":{"html":{"astFormat":"html"},"glimmer":{"astFormat":"glimmer"},"lwc":{"astFormat":"html"},"angular":{"astFormat":"html"},"vue":{"astFormat":"html"},"css":{"astFormat":"postcss"},"scss":{"astFormat":"postcss"},"less":{"astFormat":"postcss"},"babel":{"astFormat":"estree"},"babel-flow":{"astFormat":"estree"},"flow":{"astFormat":"estree"},"typescript":{"astFormat":"estree"},"babel-ts":{"astFormat":"estree"},"espree":{"astFormat":"estree"},"meriyah":{"astFormat":"estree"},"__js_expression":{"astFormat":"estree"},"svelte":{"astFormat":"svelte-ast"}},"printers":{"svelte-ast":{}}}],"useTabs":false}

Prettier process finished with exit code 0.

Is the same behavior observed when run against Prettier directly?

No.

The contents of your User/JsPrettier.sublime-settings file

{
  "debug": true,
  "auto_format_on_save": true,
  "prettier_cli_path": "/Users/eric/Library/pnpm/prettier",
}

The contents of your <project_name>.sublime-project file (if applicable)

N/A

Steps to reproduce the behavior

1. Create a fresh project folder.
2. npm add -D prettier prettier-plugin-tailwindcss tailwindcss daisyui
3. Create a file called test.html with <div class="grid-cols-2 grid">Hello world</div>
4. Run JsPrettier: Format code

I've set up a sample repo for quick testing: https://github.com/Tohsig/sublime-jsprettier-test. I generally use pnpm, but I also tested this with npm on the off chance that it mattered. Seems to be consistent regardless.

[jonlabelle]

Hi @Tohsig. So the culprit is the daisyUI library writing log messages to stdout, seen here.

And it looks like you can disable this behavior by turning the logs option off in your tailwind.config.js file.

module.exports = {
  plugins: [require("daisyui")],

  daisyui: {
    logs: false, // turns console logging off
  },
};

[Tohsig]

Well I clearly overlooked that. Thanks!

[github-actions]

This issue has been automatically locked due to inactivity. Please open a new issue for related bugs.