Fix issue with expression formatting

Author: Dimitri BARBOT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier-plugin-tailwind-styled-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A Prettier plugin for sorting and formatting Tailwind CSS classes when using Tailwind Styled-Components.",
   "license": "MIT",
   "main": "dist/index.js",

src/index.js

@@ -158,6 +158,11 @@ function transformLitteral(
     newValue = insertLineBreakAtEnd(newValue, options, withIndentationAtEnd)
     return newValue
   }
+  if (withIndentationAtEnd) {
+    let newValue = normalizeLitteral(value)
+    newValue = insertLineBreakAtEnd(newValue, options, withIndentationAtEnd)
+    return newValue
+  }
   return value
 }
 

tests/fixtures/basic/example.styles.formatted.ts

@@ -43,3 +43,15 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/basic/example.styles.ts

@@ -35,3 +35,14 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/cjs/example.styles.formatted.ts

@@ -43,3 +43,15 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/cjs/example.styles.ts

@@ -35,3 +35,14 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/no-prettier-config/example.styles.formatted.ts

@@ -43,3 +43,15 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/no-prettier-config/example.styles.ts

@@ -35,3 +35,14 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/plugins/example.styles.formatted.ts

@@ -45,3 +45,15 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`
+  ${() => fixedComponentCss}
+  flex
+  flex-col
+`;

tests/fixtures/plugins/example.styles.ts

@@ -35,3 +35,14 @@ export const ContainerG = tw.div`
 `;
 
 export const ContainerH = tw.div``;
+
+export const ContainerI = tw.div`
+${() => fixedComponentCss}
+  flex
+  flex-row
+`;
+
+export const ContainerJ = tw.div`${() => fixedComponentCss}
+  flex
+  flex-col
+`;