Creating an applet error for linux mint cinnamon 22

Question

Description: I am trying to build applets for Linux mint, This is the first time I am entering building apps space, I was previously a web developer, so I have an idea on JavaScript. At the moment I have built a very basic applet that has a context menu item called "Configure..."

Problem statement: The St.bin app is somewhat loaded and working. But the CSS isn't loading properly. Let me give you the full Class of this Configure Context Menu Window

const St = imports.gi.St;
const Clutter = imports.gi.Clutter;
const Main = imports.ui.main;
const Gio = imports.gi.Gio;
const Gdk = imports.gi.Gdk;

class ConfigureContextMenuWindow {
  
  //Initializer
  constructor(metadata) {
    this.metadata = metadata
    this.path = metadata.path
    this.window = new St.Bin({
      style_class: "config-window",
      reactive: true,
      visible: false,
      x_align: Clutter.ActorAlign.CENTER,
      y_align: Clutter.ActorAlign.CENTER,
    });
    // this.window.set_style("background-color: yellow; padding: 20px;");
    this.layout = new St.BoxLayout({
      vertical: true,
      style_class: "config-window-content",
    });
    const titleLabel = new St.Label({ text: "Theme Configuration" });
    this.layout.add_child(titleLabel);
    const closeButton = new St.Button({
      label: "Close",
      style_class: "config-window-button",
    });
    // closeButton.set_style("background-color: red; color: white;");
    closeButton.connect("clicked", () => this.hide());
    this.layout.add_child(closeButton);
    this.window.set_child(this.layout);
    Main.uiGroup.add_child(this.window);

    this._loadCSS();
  }

  _loadCSS() {
    const file = Gio.File.new_for_path(`${this.path}/ui/configureContextMenuWindowStyle.css`);
    const content = file.load_contents(null)[1].toString();
    const cssProvider = new Gtk.CssProvider();
    cssProvider.load_from_data(content, content.length, null);
    Gtk.StyleContext.add_provider_for_screen(
        Gdk.Screen.get_default(),
        cssProvider,
        Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
    );
}


  // Show the window
  show() {
    this.window.visible = true;
  }

  // Hide the window
  hide() {
    this.window.visible = false;
  }
}

// Export the class
module.exports = ConfigureContextMenuWindow;

configureContextMenuWindowStyle.css file

/* Style for the entire config window */
.config-window {
    background-color: yellow;
     border-radius: 10px;
    padding: 20px;
    width: 300px;
    height: 200px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/* Style for the close button */
.config-window-button {
    background-color: red;
    color: white;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
    cursor: pointer;
}

/* Style for the title label */
.config-window-content {
    padding: 10px;
    font-size: 16px;
    text-align: center;
}

What I tried:

I have added configureContextMenuWindowStyle.css file in its path. I have tried linking css file using Gdk and Gio

What was expected:

Expected was that styles to be applied to those window but it wasnt updated.

Problems encountered :

I get in Melange an error that width is not defined but the set_style method works properly.

Any help would be much appreciated