initial commit

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

libs/_internal/styles/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/_internal/styles/README.md

@@ -0,0 +1,11 @@
+# \_internal-styles
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build _internal-styles` to build the library.
+
+## Running unit tests
+
+Run `nx test _internal-styles` to execute the unit tests via [Jest](https://jestjs.io).

libs/_internal/styles/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: '_internal-styles',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/_internal/styles',
+};

libs/_internal/styles/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "z-styles",
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "type": "commonjs",
+  "main": "./src/index.js",
+  "typings": "./src/index.d.ts"
+}

libs/_internal/styles/project.json

@@ -0,0 +1,43 @@
+{
+  "name": "_internal-styles",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/_internal/styles/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/_internal/styles",
+        "main": "libs/_internal/styles/src/index.ts",
+        "tsConfig": "libs/_internal/styles/tsconfig.lib.json",
+        "assets": ["libs/_internal/styles/*.md"]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "libs/_internal/styles/**/*.ts",
+          "libs/_internal/styles/package.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/_internal/styles/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

libs/_internal/styles/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/normalize';
+
+export * from './lib/variable.helper';

libs/_internal/styles/src/lib/normalize.ts

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+export const normalize = css`
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  *,
+  ::before,
+  ::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: currentColor;
+  }
+
+  i,
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  :host {
+    display: block;
+  }
+`;

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
+    })`;
+  }
+}

libs/_internal/styles/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/_internal/styles/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/_internal/styles/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}