82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
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;
|
|
}
|
|
|
|
public 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
|
|
})`;
|
|
}
|
|
|
|
// static builders for convencience
|
|
public static from(): VariableHelper {
|
|
return new VariableHelper();
|
|
}
|
|
|
|
public static fromDefaultValue(value: string | CSSResult) {
|
|
return VariableHelper.from().withDefaultValue(value);
|
|
}
|
|
|
|
public static fromProperty(property: string) {
|
|
return VariableHelper.from().withProperty(property);
|
|
}
|
|
|
|
public static fromVariableName(name: string) {
|
|
return VariableHelper.from().withVariableName(name);
|
|
}
|
|
}
|