search

heybourn / headwind

An opinionated Tailwind CSS class sorter built for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
MIT License
1.39k stars 45 forks source link

Pug Support #59

Open smhmd opened 4 years ago

smhmd commented 4 years ago

Support for Pug (in Vue files).

<!-- index.vue -->
<template lang="pug">
  #app
    .bg-red-500.container.mx-auto.text-white.lg_bg-red-600
</template>
// tailwind.config.js
module.exports = {
  separator: '_', // pug doesn't support colon in classes
  theme: {},
  variants: {},
  plugins: [],
};
han-tyumi commented 3 years ago

Something like \.([\._a-zA-Z0-9-]+) could be used to match class literals, but the problem lies in that these class names are separated by .. Headwind would need to support this through a language separator setting or something else.

Pug also supports HTML like class attributes: div(class="flex flex-col items-center min-h-screen"). These could be matched by the current HTML regex: \bclass\s*=\s*["']([_a-zA-Z0-9\s-:/]+)["']. Additional Headwind support might be needed to allow multiple regexes for a language.