Using in HAML templates

Hello!

I just migrated my Rails app to vite.js. I would like to integrate windicss. I have followed the docs and it kind of works.

I can use @apply in my stylesheets and I can use windi classes in HTML templates. However. I have mixed results in HAML templates - which I use in all my projects. I have added .haml extension to confing, so templates are scanned.

Apparently there are some issues with HAML syntax. I learned that using hash syntax for classes works:

%div{:class => 'my-nice-class other-class'}

But mixing with HAML dot notation (very common) causes troubles:

%div.my-nice-class.other-nice-class

The strange thing is, that sometimes it works, sometimes not. I am trying to find out what could be the source of troubles… I though it was the dashes in class-names, but probably it is not…

I am using normal vite processing from vite_rails gem.

Is somebody using HAML with Windi? I fould some haml references in docs/examples, but technically it is not confirmed anywhere that it should work 😉

thanks in advance for any hints! Jakub

[gaultierq]

Thanks @cmwoodal ;

Your extractor also works with slim

Iterating on your work, I need to match top-1/2

// haml.extractor.js
const classRegex = /(?<=\.)([\w\-]+)|(?<=class[\:=]\s*['"][\w\:\-\/\!\[\]#\s]*)([\w\:\-\/\!\[\]#]+)(?=[\w\:\-\/\!\[\]#\s]*['"])/gm;
const tagRegex = /(?<=\n\s*%)(?!script|meta|style|link)([\w\-]+)(?=[\n\s\.\({])/gm;

export const extractFromHaml = (content) => {
    return {
        classes: content.match(classRegex) || [],
        tags: content.match(tagRegex) || [],
    };
};

// windi.config.js

extractors: [
  {
    extractor: extractFromHaml,
    extensions: ['haml', 'slim'],
  }
]

[cmwoodal]

I’ve run into the same issue – the scanner doesn’t recognize the dot notation classes nor the HAML % notation tags. Fortunately windicss provides the ability to provide custom extractor functions that can be used to provide special handling. For this situation I was able to provide a special extractor function specifically for HAML files

import { defineConfig, transform } from "windicss/helpers";

export default defineConfig({
  theme: {
    extend: {},
  },
  plugins: [
    require("windicss/plugin/aspect-ratio"),
    require("windicss/plugin/forms"),
    require("windicss/plugin/typography"),
    transform("daisyui"),
  ],
  extract: {
    extractors: [
      {
        extractor: (function hamlExtractor() {
          const classRegex =
            /(?<=\.)([\w\-]+)|(?<=class[\:=]\s*['"][\w\:\-\!\[\]#\s]*)([\w\:\-\!\[\]#]+)(?=[\w\:\-\!\[\]#\s]*['"])/gm;
          const tagRegex = /(?<=\n\s*%)(?!script|meta|style|link)([\w\-]+)(?=[\n\s\.\({])/gm;
          return function extractFromHaml(content) {
            return {
              classes: content.match(classRegex) || [],
              tags: content.match(tagRegex) || [],
            };
          };
        })(),
        extensions: ["haml"],
      },
    ],
  },
});

The regexes for both classes and tags have been tested to return a concise list of matches:

classes:

tags:

Hope this is helpful for anyone else who might run into this situation.