add: widget css property (#100)

src/widgets/constructor.ts

@@ -18,6 +18,7 @@ interface Connectable extends GObject.Object {
 interface CommonParams {
     className?: string
     style?: string
+    css?: string
     halign?: 'start' | 'center' | 'end' | 'fill'
     valign?: 'start' | 'center' | 'end' | 'fill'
     connections?: (
@@ -31,17 +32,17 @@ interface CommonParams {
 }
 
 function separateCommon({
-    className, style, halign, valign, connections, properties, binds, setup,
+    className, style, css, halign, valign, connections, properties, binds, setup,
     ...rest
 }: CommonParams) {
     return [
-        { className, style, halign, valign, connections, properties, binds, setup },
+        { className, style, css, halign, valign, connections, properties, binds, setup },
         rest,
     ];
 }
 
 function parseCommon(widget: Gtk.Widget, {
-    className, style,
+    className, style, css,
     halign, valign,
     connections = [], properties, binds, setup,
 }: CommonParams) {
@@ -53,6 +54,10 @@ function parseCommon(widget: Gtk.Widget, {
         // @ts-expect-error
         widget.style = style;
 
+    if (css !== undefined)
+        // @ts-expect-error
+        widget.css = css;
+
 
     if (typeof halign === 'string') {
         // @ts-expect-error

src/widgets/overrides.ts

@@ -37,19 +37,14 @@ Object.defineProperty(Gtk.Widget.prototype, 'className', {
 });
 
 const widgetProviders: Map<Gtk.Widget, Gtk.CssProvider> = new Map();
-function setStyle(widget: Gtk.Widget, css: string) {
-    if (typeof css !== 'string') {
-        console.error('style has to be a string');
-        return false;
-    }
-
+function setCss(widget: Gtk.Widget, css: string) {
     const previous = widgetProviders.get(widget);
     if (previous)
         widget.get_style_context().remove_provider(previous);
 
     const provider = new Gtk.CssProvider();
     widgetProviders.set(widget, provider);
-    provider.load_from_data(`* { ${css} }`);
+    provider.load_from_data(css);
     widget.get_style_context()
         .add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
 }
@@ -59,16 +54,39 @@ Object.defineProperty(Gtk.Widget.prototype, 'style', {
         return this._style || '';
     },
     set: function(css: string) {
-        if (!setStyle(this, css))
+        if (typeof css !== 'string') {
+            console.error('style has to be a string');
             return;
+        }
 
+        setCss(this, `* { ${css} }`);
         this._style = css;
     },
 });
 
+Object.defineProperty(Gtk.Widget.prototype, 'css', {
+    get: function() {
+        return this._css || '';
+    },
+    set: function(css: string) {
+        if (typeof css !== 'string') {
+            console.error('css has to be a string');
+            return;
+        }
+
+        setCss(this, css);
+        this._css = css;
+    },
+});
+
+// @ts-expect-error
+Gtk.Widget.prototype.setCss = function(css: string) {
+    setCss(this, css);
+};
+
 // @ts-expect-error
 Gtk.Widget.prototype.setStyle = function(css: string) {
-    setStyle(this, css);
+    setCss(this, `* { ${css} }`);
 };
 
 // @ts-expect-error