Extends styling from keys

To minimize code duplication, you can extend classes from another key using the extends notation: {>keyName}.

vueless.config.{js,ts}

export default {
  component: {
    UTable: {
      headerCellBase: "p-4 text-sm ...",
      headerCellCheckbox: "{>headerCellBase} w-10 ...",
      stickyHeaderCell: "{>headerCellBase} flex-none ...",
    }
  }
};

It can be placed directly within the key or inside the base key.

vueless.config.{js,ts}

export default {
  component: {
    UTable: {
      headerCellBase: "p-4 text-sm ...",
      headerCellCheckbox: "{>headerCellBase} w-10 ...",
      stickyHeaderCell: {
        base: "{>headerCellBase} flex-none ...",
        variants: {
          compact: {
            true: "px-4 py-3 ...",
          }
        }
      }
    }
  }
};

Multiple extensions

It’s possible to extend multiple keys within a single key, including those that already extends from other keys (nested extends). Classes are automatically will be merged based on the order of the keys, with the last keys taking higher priority.

vueless.config.{js,ts}

export default {
  component: {
    UTable: {
      headerCellBase: "p-4 text-sm ...",
      headerCellCheckbox: "{>headerCellBase} w-10 ...",
      stickyHeaderCell: "{>headerCellBase} {>headerCellCheckbox} flex-none ...",
    }
  }
};

Conditional styling extensions

The key you extend can also include conditional styling configurations, such as variants and compoundVariants. Classes are fully resolved before extension and then merged with the key where the extension is applied.

vueless.config.{js,ts}

export default {
  component: {
    UTable: {
      headerCellBase: {
        base: "p-4 text-sm ...",
        variants: {
          compact: {
            true: "px-4 py-3 ...",
          },
        },
      },
      headerCellCheckbox: "{>headerCellBase} w-10 ...",
      stickyHeaderCell: "{>headerCellBase} flex-none ...",
    }
  }
};

Nested component extensions

The key you extend can also include styling configurations for nested component keys.

vueless.config.{js,ts}

export default {
  component: {
    UDatepicker: {
      datepickerInput: "", // {UInput}
      datepickerInputActive: {
        base: "{>datepickerInput}",
        wrapper: {
          base: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
          variants: {
            error: {
              true: "ring-red-700/15 border-red-500 hover:border-red-500",
            },
          },
        },
      },
    }
  }
};

For this particular case, extension is limited to a single key.