JSStyles SDK
The JSStyles SDK is used for writing CSS styles directly in JavaScript. JSStyles are created in the constructor of your application.
Syntax
const styles = new JSSElement("", undefined, [
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.MAIN)}`,
new JSSStyles([new JSSStyle("color", "black")]),
[new JSSElement(`button`, new JSSStyles([new JSSStyle("height", "50px")]))],
),
]);
const compiledStyles = JSSCompiler.compile(styles);
JSSCompiler.add(compiledStyles);
// Compiled to:
// .tridaoknamain {color: black;} .tridaoknamain button {height: 50px;}
This is where the styles for your app are created. First, an empty element is created:
const styles = new JSSElement("", undefined, []);
It has an empty ""
selector and no undefined
styles so it will be skipped. It is used so that you can insert more elements into it.
Subsequently, we will insert another element into it. It will have a class selector that is obtained from the parseClass
function. It will also have one style. It will be color: black;
const styles = new JSSElement("", undefined, [
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.MAIN)}`,
new JSSStyles([new JSSStyle("color", "black")]),
[],
),
]);
Now let's say that inside the MAIN
window there will be a button on which we want to insert height: 50px.
const styles = new JSSElement("", undefined, [
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.MAIN)}`,
new JSSStyles([new JSSStyle("color", "black")]),
[new JSSElement(`button`, new JSSStyles([new JSSStyle("height", "50px")]))],
),
]);
Now we have the final code. Now we just put it in the compiler.
const compiledStyles = JSSCompiler.compile(styles);
JSSCompiler.add(compiledStyles);
More child elements
You can also have multiple child elements. If I wanted to set the style for the input
inside the MAIN
window, I would add an element to the third argument of the constructor of the JSSElement
class. As follows:
const styles = new JSSElement("", undefined, [
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.MAIN)}`,
new JSSStyles([new JSSStyle("color", "black")]),
[
new JSSElement(`button`, new JSSStyles([new JSSStyle("height", "50px")])),
new JSSElement(`input`, new JSSStyles([new JSSStyle("width", "150px")])),
],
),
]);
Or like this:
const styles = new JSSElement("", undefined, [
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.MAIN)}`,
new JSSStyles([new JSSStyle("color", "black")]),
[new JSSElement(`button`, new JSSStyles([new JSSStyle("height", "50px")]))],
),
new JSSElement(
`.${this.app.windowParser.parseClass(this.windowNames.TEST)}`,
new JSSStyles([new JSSStyle("color", "white")]),
[new JSSElement(`input`, new JSSStyles([new JSSStyle("width", "150px")]))],
),
]);
// Compiled it
// .tridaoknamain {color: black;} .tridaoknamain button {height: 50px;} .tridaoknatest {color: white;} .tridaoknatest input {width: 150px;}
//
// Don't forget that you must also have a `TEST` window created