Maintenance: Update Tailwind/Styling packages

app/frontend/apps/mobile/form/theme/global/addAbsoluteFloatingLabel.ts

@@ -9,32 +9,16 @@ import { clean, extendClasses } from '#shared/form/plugins/utils.ts'
  */
 export const addAbsoluteFloatingLabel = (classes: Classes = {}) => {
   return extendClasses(classes, {
-    outer: clean(`
-      absolute-floating-input
-      relative flex flex-col px-2
-    `),
+    outer: clean(`absolute-floating-input relative flex flex-col px-2`),
     wrapper: 'relative flex-1',
     inner: 'flex ltr:pr-2 rtl:pl-2',
     block: 'flex',
     // text-base ensures there is no zoom when you click on the input on iOS
-    input: clean(`
-      formkit-populated:pt-8
-      formkit-label-hidden:pt-2
-      h-14
-      w-full
-      border-none
-      bg-transparent
-      text-base
-      placeholder:text-transparent
-      focus-within:pt-8
-      focus:outline-none
-    `),
-    label: clean(`
-      pointer-events-none absolute top-0 h-14
-      origin-left px-2 py-4
-      text-base
-      transition-all duration-100 ease-in-out ltr:left-0
-      rtl:right-0
-    `),
+    input: clean(
+      `formkit-populated:pt-8 formkit-label-hidden:pt-2 h-14 w-full border-none bg-transparent text-base placeholder:text-transparent focus-within:pt-8 focus:outline-none`,
+    ),
+    label: clean(
+      `pointer-events-none absolute top-0 h-14 origin-left px-2 py-4 text-base transition-all duration-100 ease-in-out ltr:left-0 rtl:right-0`,
+    ),
   })
 }

app/frontend/apps/mobile/form/theme/global/addBlockFloatingLabel.ts

@@ -9,13 +9,9 @@ export const addBlockFloatingLabel = (classes: Classes = {}): Classes => {
   return addStaticFloatingLabel(
     extendClasses(classes, {
       outer: 'floating-input',
-      label: clean(`
-        formkit-populated:-translate-y-[0.4rem]
-        formkit-populated:scale-80
-        formkit-populated:opacity-75
-        formkit-populated:text-xs
-        text-base
-      `),
+      label: clean(
+        `formkit-populated:-translate-y-[0.4rem] formkit-populated:scale-80 formkit-populated:opacity-75 formkit-populated:text-xs text-base`,
+      ),
     }),
   )
 }

app/frontend/apps/mobile/form/theme/global/addFloatingTextareaLabel.ts

@@ -11,30 +11,14 @@ import { clean, extendClasses } from '#shared/form/plugins/utils.ts'
  */
 export const addFloatingTextareaLabel = (classes: Classes = {}) => {
   return extendClasses(classes, {
-    outer: clean(`
-      floating-textarea relative px-2
-    `),
+    outer: clean(`floating-textarea relative px-2`),
     wrapper: 'relative',
     // text-base ensures there is no zoom when you click on the input on iOS
-    input: clean(`
-      w-full
-      border-none
-      bg-transparent
-      text-base
-      placeholder:text-transparent
-      focus:outline-none
-    `),
-    label: clean(`
-      formkit-populated:translate-y-0
-      formkit-populated:text-xs
-      formkit-populated:opacity-75
-      flex
-      h-2
-      origin-left
-      translate-y-4
-      cursor-text
-      items-end px-2 pt-5 text-base
-      transition-all duration-100 ease-in-out
-    `),
+    input: clean(
+      `w-full border-none bg-transparent text-base placeholder:text-transparent focus:outline-none`,
+    ),
+    label: clean(
+      `formkit-populated:translate-y-0 formkit-populated:text-xs formkit-populated:opacity-75 flex h-2 origin-left translate-y-4 cursor-text items-end px-2 pt-5 text-base transition-all duration-100 ease-in-out`,
+    ),
   })
 }

app/frontend/apps/mobile/form/theme/global/addStaticFloatingLabel.ts

@@ -10,30 +10,16 @@ import { clean, extendClasses } from '#shared/form/plugins/utils.ts'
  */
 export const addStaticFloatingLabel = (classes: Classes = {}): Classes => {
   return extendClasses(classes, {
-    outer: clean(`
-      focus-within:bg-blue-highlight relative flex flex-col
-      px-2
-    `),
+    outer: clean(`focus-within:bg-blue-highlight relative flex flex-col px-2`),
     wrapper: 'relative flex flex-1 flex-col justify-center self-start py-1',
     inner: 'relative flex pb-1 ltr:pr-2 rtl:pl-2',
     block: 'formkit-disabled:cursor-default flex min-h-[3.5rem] cursor-pointer',
     // text-base ensures there is no zoom when you click on the input on iOS
-    input: clean(`
-      formkit-label-hidden:pt-4
-      w-full border-none
-      bg-transparent
-      pt-6
-      text-base
-      placeholder:text-transparent
-      focus:outline-none
-      ltr:pl-2
-      rtl:pr-2
-    `),
-    label: clean(`
-      pointer-events-none absolute top-0 h-14
-      origin-left px-2 py-4
-      transition-all duration-100 ease-in-out ltr:left-0
-      rtl:right-0
-    `),
+    input: clean(
+      `formkit-label-hidden:pt-4 w-full border-none bg-transparent pt-6 text-base placeholder:text-transparent focus:outline-none ltr:pl-2 rtl:pr-2`,
+    ),
+    label: clean(
+      `pointer-events-none absolute top-0 h-14 origin-left px-2 py-4 transition-all duration-100 ease-in-out ltr:left-0 rtl:right-0`,
+    ),
   })
 }

app/frontend/apps/mobile/form/theme/global/getCoreMobileClasses.ts

@@ -84,11 +84,7 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
     submit: addButtonVariants(classes.submit),
     security: addStaticFloatingLabel(
       extendClasses(classes.security, {
-        label: clean(`
-          scale-80
-          -translate-y-[0.4rem]
-          text-xs
-        `),
+        label: clean(`scale-80 -translate-y-[0.4rem] text-xs`),
       }),
     ),
     file: {

package.json

@@ -68,9 +68,9 @@
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
     "prettier": "3.3.2",
-    "prettier-plugin-tailwindcss": "^0.5.14",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "regenerator-runtime": "^0.14.1",
-    "sass": "^1.77.2",
+    "sass": "^1.77.6",
     "stylelint": "^16.6.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-vue": "^1.5.0",
@@ -80,7 +80,7 @@
     "stylelint-scss": "^6.3.2",
     "svg-baker": "^1.7.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.4",
     "tailwindcss-unimportant": "^2.1.1",
     "timezone-mock": "^1.3.6",
     "type-fest": "^4.20.1",

yarn.lock

@@ -8701,10 +8701,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier-plugin-tailwindcss@^0.5.14:
-  version "0.5.14"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz#4482eed357d5e22eac259541c70aca5a4c7b9d5c"
-  integrity sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==
+prettier-plugin-tailwindcss@^0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz#e05202784a3f41889711ae38c75c5b8cad72f368"
+  integrity sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==
 
 prettier@3.3.2:
   version "3.3.2"
@@ -9434,10 +9434,10 @@ safe-regex@^2.1.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.77.2:
-  version "1.77.2"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.2.tgz#18d4ed2eefc260cdc8099c5439ec1303fd5863aa"
-  integrity sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==
+sass@^1.77.6:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -10178,10 +10178,10 @@ tailwindcss-unimportant@^2.1.1:
   resolved "https://registry.yarnpkg.com/tailwindcss-unimportant/-/tailwindcss-unimportant-2.1.1.tgz#bd4450955dd709e9ae273be9785f4a98732cea3e"
   integrity sha512-8Bh/xzWAI776MdapS94tHGHP+PcsutHApvXjGaP/6CtfshcZZKaKADrJU5fmaVHKs9kbMQ3kR7M2+ZuGTG13bA==
 
-tailwindcss@^3.4.3:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
-  integrity sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==
+tailwindcss@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"
+  integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"