CSS modules

[musjj]

I'm wondering if it'd be possible to integrate (s)css modules into ags. Fiddling with traditional css has been a huge pain point for me with a lot of GTK-based bars.

It looks like that bun supports it, apparently. I'm not sure how it works though. I tried:

import style from "./style.module.scss";
print(style);

But it just gives the path to the .scss file. Also tried .module.css, still doesn't work.

[Aylur]

every bundler afaik will just bundle the css file with a hashed name and the style variable will be just a string that will be the relative path to the file gjs doesn't support any of this, but you could build some abstractions over it if you use a bundler like bun

import style from "./style.scss"

function scss(file) {
    const hash = ""// generate a hash
    // file path might need fixing, since the Util function doesn't handle relative paths
    const scss = `
        .${hash} {
            ${Utils.readFileSync(file)}
        }
    `
    const css = "" // compile scss into css
    App.applyCss(css)
    return hash
}

// style will be scoped to this widget
Widget.Box({
    className: scss(style)
})

[musjj]

Thanks, I might look into custom abstractions.

For now I'm experimenting with Vite's library mode bundler. It actually looks like it might work! Though I need to do a huge refactor first and see if I'm gonna hit any roadblocks.

[musjj]

So far it works pretty well! You just need to tweak vite.config.ts a bit:

import { resolve } from "path";
import { defineConfig } from "vite";

export default defineConfig({
  esbuild: {
    supported: {
      "top-level-await": true,
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"), // adjust this according to your project structure
      formats: ["es"],
    },
    cssTarget: "chrome61",
    rollupOptions: {
      external: [/resource:\/\/.*/, /gi:\/\/.*/],
    },
  },
});

Then just run vite build and ags -c dist/config.js (the name depends on the name in your package.json). Make sure that your App's css points to dist/style.css.

Now you can just use Vite to bundle your config, with all the sweet goodies that comes with it! Someone should try if Tailwind works just for the kicks (though I doubt it will).