feat(tailwind): change how color classes are parsed

Now it expects a color class variant for each element that has varColor related changes
platanus · Jul 28, 2023 · 1f1378e · 1f1378e
1 parent fb888f7
commit 1f1378e
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 25 deletions.
diff --git a/src/components/BnCheckbox/BnCheckbox.vue b/src/components/BnCheckbox/BnCheckbox.vue
@@ -58,7 +58,6 @@ const attrsWithoutClass = Object.fromEntries(Object.entries(attrs).filter(([key]
   <label
     class="bn-checkbox"
     :class="[
-      `bn-checkbox--${props.color}`,
       {'bn-checkbox--error': hasError},
       {'bn-checkbox--disabled': props.disabled},
     ]"
@@ -69,7 +68,10 @@ const attrsWithoutClass = Object.fromEntries(Object.entries(attrs).filter(([key]
       type="checkbox"
       :name="name"
       class="bn-checkbox__input"
-      :class="{'bn-checkbox__input--error': hasError}"
+      :class="[
+        `bn-checkbox__input--${props.color}`,
+        {'bn-checkbox__input--error': hasError}
+      ]"
       v-bind="attrsWithoutClass"
       @change="onChange"
     >

diff --git a/src/components/BnInput/BnInput.vue b/src/components/BnInput/BnInput.vue
@@ -50,7 +50,9 @@ export default {
 <template>
   <div
     class="bn-input"
-    :class="`bn-input--${props.color} ${attrs.class ? attrs.class : ''}`"
+    :class="{
+      [attrs.class as string]: attrs.class
+    }"
   >
     <div class="bn-input__wrapper">
       <div
@@ -72,13 +74,16 @@ export default {
           :value="inputValue"
           :name="name"
           class="bn-input__input"
-          :class="{
-            'bn-input__input--icon-left': $slots['icon-left'],
-            'bn-input__input--icon-right': $slots['icon-right'],
-            'bn-input__input--prefix': $slots['prefix'],
-            'bn-input__input--suffix': $slots['suffix'],
-            'bn-input__input--error': !meta.valid && meta.touched,
-          }"
+          :class="[
+            `bn-input__input--${props.color}`,
+            {
+              'bn-input__input--icon-left': $slots['icon-left'],
+              'bn-input__input--icon-right': $slots['icon-right'],
+              'bn-input__input--prefix': $slots['prefix'],
+              'bn-input__input--suffix': $slots['suffix'],
+              'bn-input__input--error': !meta.valid && meta.touched,
+            }
+          ]"
           @input="onInput"
           @blur="handleBlur"
         >

diff --git a/src/components/BnListbox/BnListbox.vue b/src/components/BnListbox/BnListbox.vue
@@ -158,10 +158,7 @@ const formValue = computed({
 </script>
 
 <template>
-  <div
-    class="bn-listbox"
-    :class="`bn-listbox--${props.color}`"
-  >
+  <div class="bn-listbox">
     <template v-if="!props.keepObjectValue">
       <template v-if="props.multiple">
         <input
@@ -190,10 +187,13 @@ const formValue = computed({
       <ListboxButton
         ref="listboxButtonRef"
         class="bn-listbox__button"
-        :class="{
-          'bn-listbox__button--error': !meta.valid && meta.touched,
-          'bn-listbox__button--disabled': props.disabled
-        }"
+        :class="[
+          `bn-listbox__button--${props.color}`,
+          {
+            'bn-listbox__button--error': !meta.valid && meta.touched,
+            'bn-listbox__button--disabled': props.disabled
+          }
+        ]"
         @blur="setTouched(true)"
       >
         <span
@@ -214,7 +214,10 @@ const formValue = computed({
               name="selected-multiple-template"
               :value="option"
             >
-              <span class="bn-listbox__tag">
+              <span
+                class="bn-listbox__tag"
+                :class="`bn-listbox__tag--${props.color}`"
+              >
                 {{ isObjectValue(option) ? option[props.optionLabel as string] : option }}
               </span>
             </slot>
@@ -254,6 +257,7 @@ const formValue = computed({
             :key="isObjectValue(option) ? (option[props.trackBy as string] as string) : option"
             :value="option"
             class="bn-listbox-options__option"
+            :class="`bn-listbox-options__option--${props.color}`"
           >
             <slot
               name="option-template"

diff --git a/src/components/BnTextarea/BnTextarea.vue b/src/components/BnTextarea/BnTextarea.vue
@@ -45,12 +45,17 @@ const attrsWithoutClass = Object.fromEntries(Object.entries(attrs).filter(([key]
 <template>
   <div
     class="bn-textarea"
-    :class="`bn-textarea--${props.color} ${attrs.class ? attrs.class : ''}`"
+    :class="{
+      [attrs.class as string]: attrs.class
+    }"
   >
     <textarea
       v-bind="attrsWithoutClass"
       class="bn-textarea__textarea"
-      :class="{'bn-textarea__textarea--error': !meta.valid && meta.touched}"
+      :class="[
+        `bn-textarea__textarea--${props.color}`,
+        { 'bn-textarea__textarea--error': !meta.valid && meta.touched }
+      ]"
       :value="(inputValue as string)"
       :name="name"
       @input="onInput"

diff --git a/src/components/BnToggle/BnToggle.vue b/src/components/BnToggle/BnToggle.vue
@@ -90,8 +90,8 @@ const attrsWithoutClass = Object.fromEntries(Object.entries(attrs).filter(([key]
         <div
           class="bn-toggle__track"
           :class="{
-            'bn-toggle__track--checked': checked,
-            'bn-toggle__track--focus-visible': isFocusedVisible,
+            [`bn-toggle__track--checked bn-toggle__track--checked-${props.color}`]: checked,
+            [`bn-toggle__track--focus-visible bn-toggle__track--focus-visible-${props.color}`]: isFocusedVisible,
           }"
         />
         <div

diff --git a/src/components/Btn/Btn.vue b/src/components/Btn/Btn.vue
@@ -41,6 +41,7 @@ const tag = computed(() => {
       `bn-btn--shapes-${props.shape}`,
       `bn-btn--shapes-${props.shape}-${props.size}`,
       `bn-btn--variants-${props.variant}`,
+      `bn-btn--variants-${props.variant}-${props.color}`,
       `bn-btn--${props.color}`,
     ]"
   >

diff --git a/src/tailwind/index.cjs b/src/tailwind/index.cjs
@@ -46,11 +46,19 @@ function parseStyles(obj, colors, componentClass, elementClasses = []) {
     const newElementClasses = [...elementClasses];
     if (key === 'colors') {
       const colorClasses = parseColors(value, colors);
-      const isElement = newElementClasses[1] && newElementClasses[1].startsWith('&__');
       const newElementClass = newElementClasses.join('').replace(/&/g, '');
+      const isBlock = !newElementClass.includes('--') && !newElementClass.includes('__');
+      const isElement = !newElementClass.includes('--') && newElementClass.includes('__');
+      const isModifier = newElementClass.includes('--');
 
       Object.keys(colorClasses).forEach((color) => {
-        prev[`@at-root ${componentClass}--${color}${isElement ? ' ' : ''}${newElementClass}`] = parseStyles(colorClasses[color], colors, componentClass, newElementClasses);
+        let colorClass;
+        if (isBlock || isElement) {
+          colorClass = `&--${color}`;
+        } else if (isModifier) {
+          colorClass = `&-${color}`;
+        }
+        prev[colorClass] = parseStyles(colorClasses[color], colors, componentClass, newElementClasses);
       });
     } else {
       if (!key.startsWith('@')) {