Using in HAML templates

[cernyjakub]

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

[jbpfran]

Hello,

I had the same behaviour in a middleman app using vite.js.

%h1.px-4.py-8{class: "md:w-3/5"} My Title
The tag %h1 is correctly identified but only the classes in the class: declaration are identified.

The link_to tags are not scanned correctly too
= link_to "My Page", "/my-page.html"
They appear as standard link (blue and underlined) as if preflight was not applied.

I'm using the vite-padrino gem.

I declared the Windicss plugin in vite with the following options.

WindiCSS({
        root: __dirname,
        scan: {
          fileExtensions: ['erb', 'haml', 'html', 'vue', 'js', 'ts', 'jsx', 'tsx'],
          dirs: ['source', 'app/frontend'], // or app/javascript, or app/packs
        },
      }),

where source contains HAML and ERB files.
I had no issue with ERB.
If I fall back to tailwind everything works fine with HAML files.

Thanks for your help.

[gaultierq]

I have the same issue with slim: dot notations are not scanned.

❌ .absolute.inset-y-0.left-0.flex.items-center

✔ class="absolute inset-y-0 left-0 flex items-center"

[jbpfran]

up

[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.

[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'],
  }
]