chore(deps): update dependency prettier-plugin-tailwindcss to v0.5.6 (#…

…592)

.lintstagedrc.mjs

@@ -1,6 +1,6 @@
 export default {
   // Global prettier
-  '*.{js,json,ts,tsx,scss}': 'prettier --write --config ./.prettierrc',
-  // Bee-q linters
-  'libs/bee-q/src/**/*.*': 'npm run test:spec -- --findRelatedTests',
+  '{apps,packages,tools}/**/*.{js,json,ts,tsx,scss}': (files) => `nx format:write --files=${files.join(',')}`,
+  // BEEQ linters
+  'packages/beeq/src/**/*.*': 'npm run test:spec -- --findRelatedTests',
 };

.prettierignore

@@ -4,6 +4,7 @@
 .vscode
 .DS_Store
 .stencil
+.circleci
 
 ### History ###
 # Ignore all local history of files
@@ -28,3 +29,6 @@ www
 # so we need to exclude it from the prettier formatting
 packages/beeq/src/components.d.ts
 packages/beeq/custom-elements.json
+tools/src/generators/plop/*.hbs
+*.md
+*.mdx

.prettierrc

@@ -3,5 +3,6 @@
   "printWidth": 120,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

package.json

@@ -130,7 +130,7 @@
     "postcss-preset-env": "9.2.0",
     "postcss-url": "10.1.3",
     "prettier": "3.0.3",
-    "prettier-plugin-tailwindcss": "0.5.5",
+    "prettier-plugin-tailwindcss": "0.5.6",
     "puppeteer": "21.3.8",
     "rimraf": "5.0.5",
     "stencil-tailwind-plugin": "1.8.0",

packages/beeq/.storybook/assets/css/preview.css

@@ -71,8 +71,8 @@
   border-bottom-right-radius: var(--bq-radius--m) !important;
 }
 
-.docblock-argstable .docblock-argstable-body > tr >td[colspan="1"],
-.docblock-argstable .docblock-argstable-body > tr >td[colspan="2"] {
+.docblock-argstable .docblock-argstable-body > tr > td[colspan='1'],
+.docblock-argstable .docblock-argstable-body > tr > td[colspan='2'] {
   background-color: var(--bq-ui--primary-alt) !important;
 }
 
@@ -89,7 +89,6 @@
   width: 100%;
 }
 
-
 .bq-doc__container {
   font-family: '"Outfit"', sans-serif;
   color: var(--bq-text--primary);

packages/beeq/src/components/checkbox/scss/bq-checkbox.scss

@@ -9,7 +9,7 @@
 }
 
 .bq-checkbox {
-  @apply inline-flex box-border cursor-pointer select-none rounded-s p-xs transition-colors duration-300 ease-in-out;
+  @apply box-border inline-flex cursor-pointer select-none rounded-s p-xs transition-colors duration-300 ease-in-out;
 
   // Default hover state
   &:not(.is-checked),

packages/beeq/src/components/radio/scss/bq-radio.scss

@@ -9,7 +9,7 @@
 }
 
 .bq-radio {
-  @apply inline-flex box-border cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
+  @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;
   @apply rounded-s p-xs;
 
   &.is-disabled {

packages/beeq/src/components/step-item/bq-step-item.tsx

@@ -119,7 +119,7 @@ export class BqStepItem {
           {/* TITLE */}
           <div
             class={{
-              'bq-step-item__content--title pr-xs3 text-m text-text-primary leading-regular': true,
+              'bq-step-item__content--title pr-xs3 text-m leading-regular text-text-primary': true,
               'pointer-events-none text-text-secondary-disabled': this.isDisabled,
               'text-text-brand': this.isCurrent,
             }}

packages/beeq/src/components/step-item/scss/bq-step-item.scss

@@ -43,10 +43,10 @@
 .bq-step-item__prefix.numeric {
   @apply flex items-center justify-center rounded-full;
   @apply h-[--bq-step-item--prefix-num-size] w-[--bq-step-item--prefix-num-size] bg-[--bq-step-item--prefix-num-bg-color];
-  @apply text-m leading-regular font-semibold;
+  @apply text-m font-semibold leading-regular;
 
   &.small {
-    @apply [--bq-step-item--prefix-num-size:--bq-spacing-l] text-s;
+    @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];
   }
 
   // Status

packages/beeq/src/components/switch/scss/bq-switch.scss

@@ -56,7 +56,7 @@
 
 .bq-switch--control__dot {
   @apply absolute h-[var(--switch--dot-size)] w-[var(--switch--dot-size)] justify-end rounded-full;
-  @apply bg-icon-inverse group-[&.is-disabled]:bg-icon-inverse-disabled group-[&.is-checked]:bg-icon-primary-alt;
+  @apply bg-icon-inverse group-[&.is-checked]:bg-icon-primary-alt group-[&.is-disabled]:bg-icon-inverse-disabled;
   @apply transition duration-300;
 }
 

packages/beeq/src/components/tooltip/scss/bq-tooltip.scss

@@ -7,7 +7,7 @@
 .bq-tooltip--panel {
   @include animation-fade-in;
 
-  @apply pointer-events-none fixed box-border bg-[var(--bq-tooltip--background-color)] z-[--bq-tooltip--z-index];
+  @apply pointer-events-none fixed z-[--bq-tooltip--z-index] box-border bg-[var(--bq-tooltip--background-color)];
   @apply w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
   @apply text-[length:var(--bq-tooltip--font-size)] leading-[var(--bq-tooltip--line-height)] text-[color:var(--bq-tooltip--text-color)];
   @apply rounded-[var(--bq-tooltip--border-radius)] border-[length:var(--bq-tooltip--border-width)] border-[color:var(--bq-tooltip--border-color)];

packages/beeq/src/global/styles/mixins/_keyframes.scss

@@ -29,7 +29,9 @@
 }
 
 @mixin animation-slide-in($duration: 0.3s, $delay: 0s, $timing-function: ease) {
-  animation: fade-in $duration $timing-function $delay, slide-in $duration $timing-function $delay;
+  animation:
+    fade-in $duration $timing-function $delay,
+    slide-in $duration $timing-function $delay;
 }
 
 @mixin animation-spin($duration: 1s, $delay: 0s, $timing-function: linear) {

packages/beeq/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />

packages/beeq/src/shared/test-utils/__tests__/computedStyle.spec.ts

@@ -24,7 +24,7 @@ describe(computedStyle.name, () => {
       return div;
     });
 
-    jest.spyOn(global, 'getComputedStyle').mockImplementationOnce(() => ({ width: '20px' } as CSSStyleDeclaration));
+    jest.spyOn(global, 'getComputedStyle').mockImplementationOnce(() => ({ width: '20px' }) as CSSStyleDeclaration);
 
     const page = await StencilCoreTesting.newE2EPage();
 
@@ -41,7 +41,7 @@ describe(computedStyle.name, () => {
       return div;
     });
 
-    jest.spyOn(global, 'getComputedStyle').mockImplementationOnce(() => ({ width: '30px' } as CSSStyleDeclaration));
+    jest.spyOn(global, 'getComputedStyle').mockImplementationOnce(() => ({ width: '30px' }) as CSSStyleDeclaration);
 
     const page = await StencilCoreTesting.newE2EPage();
 
@@ -57,7 +57,7 @@ describe(computedStyle.name, () => {
 
     jest
       .spyOn(global, 'getComputedStyle')
-      .mockImplementationOnce(() => ({ width: '20px', height: '30px' } as CSSStyleDeclaration));
+      .mockImplementationOnce(() => ({ width: '20px', height: '30px' }) as CSSStyleDeclaration);
 
     const page = await StencilCoreTesting.newE2EPage();
 
@@ -73,7 +73,7 @@ describe(computedStyle.name, () => {
 
     jest
       .spyOn(global, 'getComputedStyle')
-      .mockImplementationOnce(() => ({ width: '20px', height: '30px' } as CSSStyleDeclaration));
+      .mockImplementationOnce(() => ({ width: '20px', height: '30px' }) as CSSStyleDeclaration);
 
     const page = await StencilCoreTesting.newE2EPage();