Create Common Styles Lib

Overview

The Common Styles Lib is the library that facilitates the management and sharing of common styles across your project. The Common Styles Lib helps maintain a consistent and cohesive design system across different applications.

Features

1. Centralized Style Definitions:

The Common Styles Lib centralizes style definitions, ensuring that consistent styles are applied across multiple projects.
It acts as a single source of truth for styles, reducing redundancy and making it easier to update the design system.

2. Reusability:

Styles defined in the library can be easily reused across different Angular applications in the NX workspace.
This promotes code reusability and helps in building a coherent user interface across various parts of the project.

3. Custom Theming:

The library supports custom theming, allowing developers to define a set of variables for colors, fonts, and other style properties.
Custom theming ensures flexibility in adapting the design system to different project requirements.

4. Built-in NX Integration:

The Common Styles Lib seamlessly integrates with the NX workspace, leveraging its powerful features for managing monorepos.
It can be easily shared and consumed by other NX projects, providing a streamlined approach to styling in a monorepo environment.

libs

common

styles

src

lib

styles.module.ts

index.ts

test-setup.ts

.eslintrc.json

README.md

jest.config.ts

project.json

tsconfig.json

tsconfig.lib.json

tsconfig.spec.json

{
  "extends": ["<%= relativePathFromRoot %>.eslintrc.json"],
  "ignorePatterns": ["!**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        "plugin:@nx/angular",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "<%= projectName %>",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "<%= projectName %>",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@nx/angular-template"],
      "rules": {}
    }
  ]
}

Leave Feedback