initial commit

Signed-off-by: Mitch Hijlkema <mitch@hijlkema.codes>

libs/_internal/styles/src/lib/variable.helper.ts

@@ -0,0 +1,64 @@
+import { CSSResult, css, unsafeCSS } from 'lit';
+
+export class VariableHelper {
+  private property: string | undefined;
+  private variableName: string | undefined;
+  private groupModifier: string | undefined;
+
+  private defaultValue: string | CSSResult = '/*! */';
+  private isPrivate = false;
+
+  public asPrivate(isPrivate = true) {
+    this.isPrivate = isPrivate;
+    return this;
+  }
+
+  public withDefaultValue(value: string | CSSResult) {
+    this.defaultValue = value;
+    return this;
+  }
+
+  public withProperty(property: string) {
+    this.property = property;
+    return this;
+  }
+
+  public withVariableName(name: string) {
+    this.variableName = name;
+    return this;
+  }
+
+  public withGroupModifier(modifier: string, ...modifiers: string[]) {
+    this.groupModifier = [modifier, ...modifiers].join('--');
+
+    return this;
+  }
+
+  toCss() {
+    if (!this.property) {
+      return css`
+        ${unsafeCSS(this.buildVariableName())}
+      `;
+    }
+
+    return css`
+      ${unsafeCSS(this.property)}: ${unsafeCSS(this.buildVariableName())};
+    `;
+  }
+
+  private buildVariableName() {
+    const variableName = [];
+
+    if (this.groupModifier) {
+      variableName.push(this.groupModifier);
+    }
+
+    if (this.variableName) {
+      variableName.push(this.variableName);
+    }
+
+    return `var(--${this.isPrivate ? '_' : ''}${variableName.join('--')}, ${
+      this.defaultValue
+    })`;
+  }
+}