### Install CSS Code Quality Package

Source: https://github.com/projectwallace/css-code-quality/blob/main/readme.md

Install the package using npm. This command is used to add the CSS code quality calculator to your project dependencies.

```bash
npm install @projectwallace/css-code-quality
```

--------------------------------

### Calculate CSS Performance Metrics

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Use this snippet to calculate performance-related metrics for a given CSS string. It analyzes `@import` rules, duplicate selectors, and embedded content. Ensure the `@projectwallace/css-code-quality` package is installed.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

// CSS with @import, duplicate selectors, and embedded content
const css = `
  @import url('reset.css');
  @import url('fonts.css');

  .btn { color: red; }
  .btn { color: blue; }  /* duplicate selector */

  .icon {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...(large base64)');
  }
`

const { performance } = calculate(css)

console.log('Performance score:', performance.score)
// => Performance score: 70 (or lower depending on base64 size)

performance.violations.forEach(v => {
  console.log(`  ${v.id}: -${v.score} (value=${v.value})`, v.actuals ? v.actuals : '')
})
// => Imports: -20 (value=2)  ['url(reset.css)', 'url(fonts.css)']
// => SelectorDuplications: -3 (value=0.333...)
// => TooMuchEmbeddedContent: -8 (value=2048)
```

--------------------------------

### Calculate CSS Maintainability Metrics

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

This snippet calculates maintainability metrics for CSS, focusing on rule complexity, selectors, and declarations. It helps identify CSS that might be difficult to read or modify. Ensure the `@projectwallace/css-code-quality` package is installed.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

// CSS with a bloated rule that has many selectors and declarations
const css = `
  h1, h2, h3, h4, h5, h6, .title, .heading, .display, .lead, .caption, .subtitle {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
  }
`

const { maintainability } = calculate(css)

console.log('Maintainability score:', maintainability.score)
// => Maintainability score: 60 (heavy deductions for selectors and declarations per rule)

maintainability.violations.forEach(v => {
  console.log(`  ${v.id}: -${v.score} (measured: ${v.value})`)
})
// => AverageSelectorsPerRule: -15 (measured: 12)
// => MaxSelectorsPerRule: -1 (measured: 12)
// => AverageDeclarationsPerRule: -15 (measured: 11)
// => MaxDeclarationsPerRule: -1 (measured: 11)
```

--------------------------------

### Calculate CSS Code Quality

Source: https://github.com/projectwallace/css-code-quality/blob/main/readme.md

Import the `calculate` function and use it with your CSS string to get a code quality score. The result object contains detailed scores and lists of violations and passes for performance, maintainability, and complexity.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

let css = `my_css { /* ... */ }`
let result = calculate(css)

/*
The result shape looks something like this:

{
  "violations": [ ],
  "passes": [ ],
  "performance": {
    "score": 90,
    "violations": [ ],
    "passes": [ ]
  },
  "maintainability": {
    "score": 100,
    "violations": [ ],
    "passes": [ ]
  },
  "complexity": {
    "score": 97,
    "violations": [ ],
    "passes": [ ]
  }
}

Each `passes` or `violations` array contains an object that looks like this:

{
  "id": "EmptyRules",
  "score": 0,
  "value": 0
},
{
  "id": "AverageSelectorsPerRule",
  "score": 0,
  "value": 1.5,
  "actuals": [
    2,
    1
  ]
}

etc. etc.

*/
```

--------------------------------

### Process CSS Violations into a Report

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

This example demonstrates how to process the `violations` array from the `calculate` function's result to create a more readable report. It maps each violation to an object containing the guard name, deducted points, measured value, and details.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

const result = calculate(`
  #main { color: red !important; }
  #sidebar { color: blue !important; }
`)

// Filter only violations to build a report
const report = result.violations.map(({ id, score, value, actuals }) => ({
  guard: id,
  deducted: score,
  measuredValue: value,
  details: actuals,
}))

console.log(JSON.stringify(report, null, 2))
// [
//   {
//     "guard": "IdSelectorRatio",
//     "deducted": 5,
//     "measuredValue": 1,
//     "details": ["#main", "#sidebar"]
//   },
//   {
//     "guard": "ImportantRatio",
//     "deducted": 5,
//     "measuredValue": 1,
//     "details": 2
//   }
// ]

// Compute an overall score manually
const totalDeducted = result.violations.reduce((sum, v) => sum + v.score, 0)
console.log('Approximate overall deduction:', totalDeducted) // => 10
```

--------------------------------

### Calculate CSS Quality Score and Violations

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Use the `calculate` function to get a CSS quality score and a list of violations. The output includes the overall score and details for each triggered guard, such as its ID, deducted score, measured value, and actual offending elements.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

// CSS with high specificity, IDs, and !important overuse
const css = `
  #app #sidebar #nav .menu > li > a:hover { color: red; }
  #app #sidebar #nav .menu > li > a:focus { color: blue; }
  #app #content .article p span { font-size: 14px !important; }
  #app #content .article p em  { font-style: italic !important; }
  #app #footer #copyright { font-size: 12px !important; }
`

const { complexity } = calculate(css)

console.log('Complexity score:', complexity.score)
// => Complexity score: 65 (deductions across multiple guards)

complexity.violations.forEach(v => {
  console.log(`  ${v.id}: -${v.score} (value=${v.value})`)
  if (Array.isArray(v.actuals) && v.actuals.length <= 5) {
    console.log('    actuals:', v.actuals)
  }
})
// => MoreThanMostCommonSelectorSpecificity: -x  (value=0.8)
// => MaxSelectorComplexity: -5 (value=7)
// => AverageSelectorComplexity: -10 (value=7)
// => IdSelectorRatio: -5 (value=0.6)
// => ImportantRatio: -5 (value=0.6)
```

--------------------------------

### calculate(css: string) — Main entry point

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Accepts a raw CSS string, runs the full analyzer pipeline, and evaluates all 20 guards. Returns a structured result object with top-level violations and passes lists, plus category-level breakdowns.

```APIDOC
## calculate(css: string)

### Description
Accepts a raw CSS string, runs the full analyzer pipeline, and evaluates all 20 guards. Returns a structured result object with a top-level `violations` and `passes` list, plus category-level breakdowns for `performance`, `maintainability`, and `complexity`, each containing a `score` (0–100), their own `violations`, and `passes`.

### Method
`calculate(css: string)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
import { calculate } from '@projectwallace/css-code-quality'

const css = `
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

  .card, .card--featured {
    color: red;
    background: white;
  }

  #header {
    font-size: 2rem !important;
  }

  .empty-rule {}
`

const result = calculate(css)

console.log('Performance score:', result.performance.score)
// => Performance score: 80  (deducted 10 for @import, 1 for empty rule)

console.log('Maintainability score:', result.maintainability.score)
// => Maintainability score: 100

console.log('Complexity score:', result.complexity.score)
// => Complexity score: 87  (deducted for IdSelectorRatio + ImportantRatio)

// Inspect all violations across every category
for (const violation of result.violations) {
  console.log(`[VIOLATION] ${violation.id}: -${violation.score} pts (value: ${violation.value})`)
}
// => [VIOLATION] Imports: -10 pts (value: 1)
// => [VIOLATION] EmptyRules: -1 pts (value: 1)
// => [VIOLATION] IdSelectorRatio: -3 pts (value: 0.5)
// => [VIOLATION] ImportantRatio: -4 pts (value: 0.5)

// Inspect passes (guards that did not deduct)
console.log('Total passes:', result.passes.length)
// => Total passes: 16

// Full result shape for one guard
console.log(result.performance.violations[0])
// => {
//      id: 'Imports',
//      score: 10,
//      value: 1,
//      actuals: ["url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')"]
//    }
```

### Response
#### Success Response (200)
- **performance** (object) - Performance category score and violations.
- **maintainability** (object) - Maintainability category score and violations.
- **complexity** (object) - Complexity category score and violations.
- **violations** (array) - List of all violations across all categories.
- **passes** (array) - List of all guards that passed.

#### Response Example
```json
{
  "performance": {
    "score": 80,
    "violations": [
      {
        "id": "Imports",
        "score": 10,
        "value": 1,
        "actuals": ["url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')"]
      },
      {
        "id": "EmptyRules",
        "score": 1,
        "value": 1,
        "actuals": [""]
      }
    ],
    "passes": []
  },
  "maintainability": {
    "score": 100,
    "violations": [],
    "passes": [
      // ... list of passed guards
    ]
  },
  "complexity": {
    "score": 87,
    "violations": [
      {
        "id": "IdSelectorRatio",
        "score": 3,
        "value": 0.5
      },
      {
        "id": "ImportantRatio",
        "score": 4,
        "value": 0.5
      }
    ],
    "passes": []
  },
  "violations": [
    // ... list of all violations
  ],
  "passes": [
    // ... list of all passes
  ]
}
```
```

--------------------------------

### calculate(analysis) (core subpath) — Pre-analyzed input

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Exported from `@projectwallace/css-code-quality/core`. Accepts an already-computed analysis object from `@projectwallace/css-analyzer`, skipping the parsing step. Useful when the analysis result is already available.

```APIDOC
## calculate(analysis)

### Description
Exported from `@projectwallace/css-code-quality/core`. Accepts an already-computed analysis object from `@projectwallace/css-analyzer`, skipping the parsing step. Useful when the analysis result is already available (e.g., computed elsewhere in the pipeline) to avoid redundant work.

### Method
`calculate(analysis)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
import { analyze } from '@projectwallace/css-analyzer'
import { calculate } from '@projectwallace/css-code-quality/core'

const css = `
  .button { color: blue; }
  .button:hover { color: darkblue; }
  #submit { font-weight: bold !important; }
`

// Produce the analysis object separately (e.g., reused for other tooling)
const analysis = analyze(css)

// Pass the pre-computed analysis directly to the quality calculator
const result = calculate(analysis)

console.log(result.complexity.score)     // => 92
console.log(result.maintainability.score) // => 100
console.log(result.performance.score)    // => 100

// Each category has the same shape: { score, violations, passes }
result.complexity.violations.forEach(v => {
  console.log(`${v.id}: deducted ${v.score} point(s), measured value = ${v.value}`)
})
// => IdSelectorRatio: deducted 3 point(s), measured value = 0.333...
// => ImportantRatio: deducted 5 point(s), measured value = 0.333...
```

### Response
#### Success Response (200)
- **performance** (object) - Performance category score and violations.
- **maintainability** (object) - Maintainability category score and violations.
- **complexity** (object) - Complexity category score and violations.
- **violations** (array) - List of all violations across all categories.
- **passes** (array) - List of all guards that passed.

#### Response Example
```json
{
  "performance": {
    "score": 100,
    "violations": [],
    "passes": []
  },
  "maintainability": {
    "score": 100,
    "violations": [],
    "passes": []
  },
  "complexity": {
    "score": 92,
    "violations": [
      {
        "id": "IdSelectorRatio",
        "score": 3,
        "value": 0.3333333333333333
      },
      {
        "id": "ImportantRatio",
        "score": 5,
        "value": 0.3333333333333333
      }
    ],
    "passes": []
  },
  "violations": [],
  "passes": []
}
```
```

--------------------------------

### Calculate CSS Quality Score from Raw CSS

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Use the main entry point to calculate the quality score from a raw CSS string. Inspect the structured result for category scores, violations, and passes.

```javascript
import { calculate } from '@projectwallace/css-code-quality'

const css = `
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

  .card, .card--featured {
    color: red;
    background: white;
  }

  #header {
    font-size: 2rem !important;
  }

  .empty-rule {}
`

const result = calculate(css)

console.log('Performance score:', result.performance.score)
// => Performance score: 80  (deducted 10 for @import, 1 for empty rule)

console.log('Maintainability score:', result.maintainability.score)
// => Maintainability score: 100

console.log('Complexity score:', result.complexity.score)
// => Complexity score: 87  (deducted for IdSelectorRatio + ImportantRatio)

// Inspect all violations across every category
for (const violation of result.violations) {
  console.log(`[VIOLATION] ${violation.id}: -${violation.score} pts (value: ${violation.value})`)
}
// => [VIOLATION] Imports: -10 pts (value: 1)
// => [VIOLATION] EmptyRules: -1 pts (value: 1)
// => [VIOLATION] IdSelectorRatio: -3 pts (value: 0.5)
// => [VIOLATION] ImportantRatio: -4 pts (value: 0.5)

// Inspect passes (guards that did not deduct)
console.log('Total passes:', result.passes.length)
// => Total passes: 16

// Full result shape for one guard
console.log(result.performance.violations[0])
// => {
//      id: 'Imports',
//      score: 10,
//      value: 1,
//      actuals: ["url('https://fonts.googleapis.com/css2?family=Roboto&display=swap')"]
//    }
```

--------------------------------

### Calculate CSS Quality Score from Pre-Analyzed CSS

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Use the core subpath to calculate the quality score when you already have an analysis object from `@projectwallace/css-analyzer`. This avoids redundant parsing.

```javascript
import { analyze } from '@projectwallace/css-analyzer'
import { calculate } from '@projectwallace/css-code-quality/core'

const css = `
  .button { color: blue; }
  .button:hover { color: darkblue; }
  #submit { font-weight: bold !important; }
`

// Produce the analysis object separately (e.g., reused for other tooling)
const analysis = analyze(css)

// Pass the pre-computed analysis directly to the quality calculator
const result = calculate(analysis)

console.log(result.complexity.score)     // => 92
console.log(result.maintainability.score) // => 100
console.log(result.performance.score)    // => 100

// Each category has the same shape: { score, violations, passes }
result.complexity.violations.forEach(v => {
  console.log(`${v.id}: deducted ${v.score} point(s), measured value = ${v.value}`)
})
// => IdSelectorRatio: deducted 3 point(s), measured value = 0.333...
// => ImportantRatio: deducted 5 point(s), measured value = 0.333...
```

--------------------------------

### GuardResult Type Definition

Source: https://context7.com/projectwallace/css-code-quality/llms.txt

Defines the structure of the result returned by each CSS quality guard. It includes an ID, score, measured value, and optional actuals for detailed violation information.

```typescript
type GuardResult = {
  id: string        // Unique guard identifier, e.g. "Imports", "IdSelectorRatio"
  score: number     // Points deducted (0 = pass, >0 = violation)
  value: number     // The raw measured metric (e.g. number of @imports, ratio of IDs)
  actuals?: unknown // Optional detail data: list of offending selectors, per-rule counts, etc.
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.