Improve handling of whitespace and duplicate class removal (#276)

* Add tests * Be more careful about whitespace removal in concat expressions * Detect liquid concat expressions in newer ASTs * Make sure string splicing handles changing string length * Add option to preserve duplicate classes This is important when using templating languages * Disable whitespace removal in Svelte We’d have to modify the start/end locations of many nodes in the AST. Technically, only AST nodes appearing _after_ the string on the same line but that might actually be sibling nodes and ancestor nodes. It’s a better option for now to disable it. * Disable whitespace removal in Liquid * Disable duplicate removal in Liquid and Svelte * Update changelog * Update readme * Update CHANGELOG.md * Update README.md --------- Co-authored-by: Jonathan Reinink <[email protected]>
tailwindlabs · May 31, 2024 · 8a9094f · 8a9094f
1 parent afbc487
commit 8a9094f
Show file tree

Hide file tree

Showing 9 changed files with 389 additions and 95 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Added
+
+- Add new `tailwindPreserveDuplicates` option to disable removal of duplicate classes ([#276](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/276))
+
+### Fixed
+
+- Improve handling of whitespace removal when concatenating strings ([#276](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/276))
+- Fix a bug where Angular expressions may produce invalid code after sorting ([#276](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/276))
+- Disabled whitespace and duplicate class removal for Liquid and Svelte ([#276](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/276))
 
 ## [0.6.0] - 2024-05-30
 

diff --git a/README.md b/README.md
@@ -141,6 +141,57 @@ Once added, tag your strings with the function and the plugin will sort them:
 const mySortedClasses = tw`bg-white p-4 dark:bg-black`
 ```
 
+## Preserving whitespace
+
+This plugin automatically removes unnecessary whitespace between classes to ensure consistent formatting. If you prefer to preserve whitespace, you can use the `tailwindPreserveWhitespace` option:
+
+```json5
+// .prettierrc
+{
+  "tailwindPreserveWhitespace": true,
+}
+```
+
+With this configuration, any whitespace surrounding classes will be preserved:
+
+```jsx
+import clsx from 'clsx'
+
+function MyButton({ isHovering, children }) {
+  return (
+    <button className=" rounded  bg-blue-500 px-4  py-2     text-base text-white ">
+      {children}
+    </button>
+  )
+}
+```
+
+## Preserving duplicate classes
+
+This plugin automatically removes duplicate classes from your class lists. However, this can cause issues in some templating languages, like Fluid or Blade, where we can't distinguish between classes and the templating syntax.
+
+If removing duplicate classes is causing issues in your project, you can use the `tailwindPreserveDuplicates` option to disable this behavior:
+
+```json5
+// .prettierrc
+{
+  "tailwindPreserveDuplicates": true,
+}
+```
+
+With this configuration, anything we perceive as duplicate classes will be preserved:
+
+```html
+<div
+  class="
+    {f:if(condition: isCompact, then: 'grid-cols-3', else: 'grid-cols-5')}
+    {f:if(condition: isDark, then: 'bg-black/50', else: 'bg-white/50')}
+    grid gap-4 p-4
+  "
+>
+</div>
+```
+
 ## Compatibility with other Prettier plugins
 
 This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins: