PliegoCSS

https://pliegocss.dev/docs
Admin
PliegoCSS is a Rust-native CSS toolchain that provides compile-time typed styling, standard CSS...
Tokens:9,297
Snippets:247
Trust Score:3.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and verify the CLI

Source: https://pliegocss.dev/docs/installation

Install the CLI compiler using cargo and verify the installation by checking the version.

```bash
cargo install pliego-cssc --version '=0.1.0-rc.2' --locked
pliego-cssc --version
```

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

### Install PliegoCSS CLI

Source: https://pliegocss.dev/docs/getting-started

Install the 0.1.0-rc.2 release candidate from crates.io using Rust 1.85.

```bash
cargo install pliego-cssc --version '=0.1.0-rc.2' --locked
```

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

### w-{size}

Source: https://pliegocss.dev/docs/utilities

Sets width from the size domain. Example: w-full.

```APIDOC
## w-{size}

### Description
Set width from the size domain.

### Usage
`w-full`

### Parameters
- **size** (size) - Required - The size value to apply as width.

### Supported Domains
- size
- arbitraryValue
- customProperty
```

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

### Utility with typed values

Source: https://pliegocss.dev/docs/syntax

Example of applying spacing, layout, and styling utilities using the validated theme registry.

```text
flex items-center gap-4 rounded-lg bg-surface px-4 py-2 text-sm
```

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

### transition-colors

Source: https://pliegocss.dev/docs/utilities

Transitions the compiler-defined color property bundle. Example: transition-colors.

```APIDOC
## transition-colors

### Description
Transition the compiler-defined color property bundle.

### Usage
`transition-colors`

### Parameters
None.
```

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

### tracking-tight

Source: https://pliegocss.dev/docs/utilities

Sets tight letter spacing, optionally negated. Example: -tracking-tight.

```APIDOC
## tracking-tight

### Description
Set tight letter spacing, optionally negated.

### Usage
`-tracking-tight`

### Parameters
None.

### Supported Modifiers
- negative
```

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

### resize-y

Source: https://pliegocss.dev/docs/utilities

Allows vertical resizing of an element. Example: resize-y.

```APIDOC
## resize-y

### Description
Allow vertical resizing.

### Usage
`resize-y`

### Parameters
None.
```

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

### py-{space}

Source: https://pliegocss.dev/docs/utilities

Sets vertical padding from one spacing value. Example: py-4.

```APIDOC
## py-{space}

### Description
Sets vertical padding from one spacing value.

### Usage
`py-4`

### Parameters
- **space** (spacing) - Required - The spacing value to apply as vertical padding.

### Supported Domains
- spacing
- arbitraryValue
- customProperty
```

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

### shadow-{shadow}

Source: https://pliegocss.dev/docs/utilities

Sets the composed box-shadow value. Example: shadow-md.

```APIDOC
## shadow-{shadow}

### Description
Set the composed box-shadow value.

### Usage
`shadow-md`

### Parameters
- **shadow** (shadow) - Required - The shadow value to apply.

### Supported Domains
- shadow
- arbitraryValue
- customProperty
```

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

### writing-horizontal

Source: https://pliegocss.dev/docs/utilities

Uses horizontal top-to-bottom writing mode. Example: writing-horizontal.

```APIDOC
## writing-horizontal

### Description
Use horizontal top-to-bottom writing mode.

### Usage
`writing-horizontal`

### Parameters
None.
```

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

### writing-vertical-rl

Source: https://pliegocss.dev/docs/utilities

Uses vertical writing with right-to-left block flow. Example: writing-vertical-rl.

```APIDOC
## writing-vertical-rl

### Description
Use vertical writing with right-to-left block flow.

### Usage
`writing-vertical-rl`

### Parameters
None.
```

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

### ring-{width-or-color}

Source: https://pliegocss.dev/docs/utilities

Sets focus-ring width in pixels or sets its color. Example: ring-accent/20.

```APIDOC
## ring-{width-or-color}

### Description
Set focus-ring width in pixels or set its color.

### Usage
`ring-accent/20`

### Parameters
- **width-or-color** (ring-width-or-color) - Required - The width or color of the focus ring.

### Supported Modifiers
- modifier
```

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

### text-{size-or-color}

Source: https://pliegocss.dev/docs/utilities

Sets font size or text color with the supported modifier. Example: text-sm/6.

```APIDOC
## text-{size-or-color}

### Description
Set font size or text color with the supported modifier.

### Usage
`text-sm/6`

### Parameters
- **size-or-color** (font-size-or-color) - Required - The font size or text color to apply.

### Supported Domains
- font-size-or-color
- customProperty

### Supported Modifiers
- modifier
```

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

### writing-vertical-lr

Source: https://pliegocss.dev/docs/utilities

Uses vertical writing with left-to-right block flow. Example: writing-vertical-lr.

```APIDOC
## writing-vertical-lr

### Description
Use vertical writing with left-to-right block flow.

### Usage
`writing-vertical-lr`

### Parameters
None.
```

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

### rounded-{radius}

Source: https://pliegocss.dev/docs/utilities

Sets all corner radii from one radius value. Example: rounded-lg.

```APIDOC
## rounded-{radius}

### Description
Set all corner radii from one radius value.

### Usage
`rounded-lg`

### Parameters
- **radius** (radius) - Required - The radius value to apply to all corners.

### Supported Domains
- radius
- arbitraryValue
- customProperty
```

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

### View root and compile command help

Source: https://pliegocss.dev/docs/tooling/cli

Use these commands to display the root help and the compile subcommand help. Unknown options, duplicate single-value options, and missing values fail.

```bash
pliego-cssc --help
pliego-cssc compile --help
```

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

### Launch the LSP server via stdio

Source: https://pliegocss.dev/docs/editor-setup

Launch the PliegoCSS language server over stdio for use with any LSP-compliant editor.

```bash
pliego-css-lsp --stdio
```

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

### Run watch mode with CLI options

Source: https://pliegocss.dev/docs/tooling/watch

Executes the watcher with specified source, theme, output, and manifest paths.

```bash
pliego-cssc watch --source src --theme \
  --output dist/app.css --manifest dist/app.manifest.json
```

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

### Generate hash-bound project plan with pliego-cssc migration-project-plan

Source: https://pliegocss.dev/docs/migration/tailwind

Run the project plan command with a migration.json declaration that selects roots and destinations. The plan records exact source and output hashes before any replacement can be applied.

```bash
pliego-cssc migration-project-plan migration.json
```

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

### Inventory exported classes with pliego-cssc migration-inventory css-modules

Source: https://pliegocss.dev/docs/migration/css-modules

Run the PliegoCSS migration inventory scanner for CSS Modules against src/Card.module.css. The scanner identifies bounded module class definitions and their source locations without assuming a particular bundler naming strategy.

```bash
pliego-cssc migration-inventory css-modules src/Card.module.css
```

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

### Run Sass migration inventory

Source: https://pliegocss.dev/docs/migration/sass

Use the pliego-cssc migration-inventory command to record statically visible Sass roles and unresolved dynamic behavior in styles/main.scss.

```bash
pliego-cssc migration-inventory sass styles/main.scss
```

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

### Generate migration project plan

Source: https://pliegocss.dev/docs/migration

Run the pliego-cssc migration-project-plan command to inventory existing CSS and generate a migration plan file. This is the first step in the controlled migration workflow.

```bash
pliego-cssc migration-project-plan ./migration-declaration.json
```

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

### Condition structure syntax

Source: https://pliegocss.dev/docs/syntax

Demonstrates normalized condition paths for responsive, state, and attribute variants.

```text
md:grid-cols-2 hover:bg-accent-strong aria-[expanded=true]:ring-2
```

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

### Run PliegoRS integration command

Source: https://pliegocss.dev/docs/integrations/pliegors

Executes the PliegoRS integration process by setting the root path and running the pnpm command.

```bash
PLIEGORS_ROOT=/path/to/pliegors pnpm integration:pliegors
```

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

### Compile with manifest schema 5 using pliego-cssc

Source: https://pliegocss.dev/docs/manifests

Command to compile source into a manifest file with version 5 and output CSS. The --manifest-version 5 flag enables closed physical tracing. Consumers must pin their contract to the schema version they use.

```bash
pliego-cssc compile --source src --manifest dist/app.manifest.json \
  --manifest-version 5 --output dist/app.css
```

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

### Explain CSS cascade with pliego-cssc

Source: https://pliegocss.dev/docs/cascade

Use the explain-cascade command to inspect why a specific property wins for a given element. Provide the input CSS file, the element selector, and the target longhand property.

```bash
pliego-cssc explain-cascade --input app.css \
  --element 'button#save.action' --property background-color
```

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

### Compile with manifest generation

Source: https://pliegocss.dev/docs/evidence

Command to compile CSS with PliegoCSS, generating a manifest file that contains hashes and provenance data. Use --seed and --theme to include seed and theme information, and --manifest to specify the output manifest path.

```bash
pliego-cssc compile --source src --seed --theme \
  --output dist/app.css --manifest dist/app.manifest.json
```

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

### Run PliegoCSS as a producer: package.json scripts

Source: https://pliegocss.dev/docs/integrations/build-tools

Adds a CSS script that compiles PliegoCSS source to dist/pliego.css and a build script that runs it before vite build. This ensures the bundler consumes the ordinary CSS output through the normal asset graph.

```json
{
  "scripts": {
    "css": "pliego-cssc compile --source src --output dist/pliego.css",
    "build": "npm run css && vite build"
  }
}
```

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

### Verify artifacts with --check

Source: https://pliegocss.dev/docs/control-artifacts

Recomputes all artifacts and fails if byte drift is detected without modifying files or taking publication locks.

```bash
pliego-cssc compile --source src --output dist/app.css \
  --manifest dist/app.manifest.json --control-dir dist --check
```

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

### Audit asset plan with ownership and budget policy

Source: https://pliegocss.dev/docs/standard-css/policies

Runs an audit that aggregates package and composed-route costs using an ownership sidecar and a budget policy file. Direct files can name budget subjects manually; Asset Plans use the ownership sidecar to assign responsibility.

```bash
pliego-cssc audit --asset-plan dist/pliego.assets.json \
  --ownership pliego.ownership.json --budget-policy budgets.json
```

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

### Generate repair proposal with pliego-cssc plan

Source: https://pliegocss.dev/docs/tooling/repair

Creates a repair proposal from findings, naming exact finding codes, files, byte ranges, replacements, expected hashes, and verification commands. Use before any mutation.

```bash
pliego-cssc plan --findings findings.json \
  --proposal proposal.json --source-root .
```

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

### Compile artifacts with pliego-cssc

Source: https://pliegocss.dev/docs/control-artifacts

Generates CSS, source maps, style manifests, Token Graph, findings, control manifest, and a receipt from a single input snapshot.

```bash
pliego-cssc compile --source src --output dist/app.css \
  --manifest dist/app.manifest.json --control-dir dist
```

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

### Package the VS Code extension

Source: https://pliegocss.dev/docs/editor-setup

Use this command to package the maintained VS Code extension for the PliegoCSS project.

```bash
pnpm --filter pliegocss-vscode package
```

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

### pcx! macro: Compile visible branch combinations and select identity at runtime

Source: https://pliegocss.dev/docs/typed-styles

Use pcx! to compile every visible branch combination and select one identity at runtime. Independent clauses that can collide are rejected at compile time.

```text
COPY
let style = pcx!(
  "block",
  if active { "opacity-100" } else { "opacity-50" }
);

```

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

### Check compatibility against baseline-widely target

Source: https://pliegocss.dev/docs/standard-css/policies

Runs the PliegoCSS compatibility check with the frozen 'baseline-widely' policy profile, which has explicit browser and source-data identities and does not drift with dependency updates.

```bash
pliego-cssc compatibility --targets baseline-widely
```

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

### Add dependencies for Typed Rust authoring

Source: https://pliegocss.dev/docs/installation

Add the pliego-css crate to your Cargo.toml dependencies to enable compile-time style identities.

```toml
[dependencies]
pliego-css = "=0.1.0-rc.2"
```

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

### Run a human-readable CSS audit

Source: https://pliegocss.dev/docs/first-audit

Executes a read-only audit on app.css using the baseline-widely target and outputs the results in a human-readable format.

```bash
pliego-cssc audit --input app.css \
  --targets baseline-widely --format human
```

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

### Transform CSS with pliego-cssc

Source: https://pliegocss.dev/docs/audit-and-transform

Use this command to transform CSS with PliegoCSS, specifying input and output files, target browsers, and output format. Add --check in CI to remain read-only and check output drift.

```bash
pliego-cssc transform-css --input app.css \
  --output dist/app.css --targets modern --format minified
```

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

### Compile with explicit DTCG contexts

Source: https://pliegocss.dev/docs/themes

Use the pliego-cssc CLI to compile styles by specifying the token resolver file and required input modifiers.

```bash
pliego-cssc compile --tokens product.resolver.json \
  --token-input appearance=dark --style "bg-brand"
```

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

### pc! macro: Create a sealed Style from a single string literal

Source: https://pliegocss.dev/docs/typed-styles

Use pc! to accept one visible string literal, parse its semantics, and return a sealed Style. Conflicting slots are rejected at compile time.

```text
COPY
const CARD: Style = pc!(
  "grid gap-4 rounded-xl border border-line p-6 shadow-md"
);

```

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

### Extend the seed theme with TOML

Source: https://pliegocss.dev/docs/themes

Override or add typed tokens like colors by defining an extends property in your TOML theme file.

```toml
schema = 1
extends = "seed"

[tokens.color]
brand = "oklch(62% 0.18 250)"
```

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

### Generate a SARIF report for automation

Source: https://pliegocss.dev/docs/first-audit

Executes an audit on app.css using the modern target and redirects the output to a findings.sarif file for use in CI or code scanning tools.

```bash
pliego-cssc audit --input app.css --targets modern --format sarif > findings.sarif
```

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

### Inventory Tailwind usage with pliego-cssc migration-inventory

Source: https://pliegocss.dev/docs/migration/tailwind

Run the inventory command to scan bounded class-bearing surfaces and report candidates with source ranges. It does not rewrite template semantics during discovery.

```bash
pliego-cssc migration-inventory tailwind src/App.tsx
```

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

### Canonical JSON Diagnostic Output (pliego-cssc)

Source: https://pliegocss.dev/docs/reference/diagnostics

Runs a style check and emits a canonical JSON diagnostic to stderr on failure. Consumers should rely on stable diagnostic codes instead of localized messages.

```shell
pliego-cssc --diagnostic-format json check --style "p-4 p-6" --seed
```

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

### State and attribute variants: hover:bg-accent focus-visible:ring-2 data-[state=open]:opacity-100

Source: https://pliegocss.dev/docs/variants

Use pseudo-class and bounded attribute variants to style elements based on state. These variants stay in semantic IR so policy and physical lineage can explain their selectors.

```text
hover:bg-accent focus-visible:ring-2 data-[state=open]:opacity-100
```

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

### Transform CSS with pliego-cssc transform-css

Source: https://pliegocss.dev/docs/integrations/plain-html

Use this command to perform compatibility transformations and minification on a source CSS file, outputting the result to a specified destination.

```bash
pliego-cssc transform-css --input src/app.css \
  --output public/app.css --targets modern --format minified
```

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

### Responsive breakpoint variants: grid-cols-1 md:grid-cols-2 lg:grid-cols-3

Source: https://pliegocss.dev/docs/variants

Use responsive variants to apply different grid column counts at different breakpoints. Theme breakpoints are validated once and emitted as ordered media conditions, so assignments at different breakpoints do not conflict.

```text
grid-cols-1 md:grid-cols-2 lg:grid-cols-3
```

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

### Dry-run verify with pliego-cssc fix

Source: https://pliegocss.dev/docs/tooling/repair

Applies the authorized patch inside a staging copy and runs bounded Rust or browser checks without replacing the source tree. Use before applying changes.

```bash
pliego-cssc fix --plan plan.json --findings findings.json \
  --source-root . --dry-run
```

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

### Audit CSS with pliego-cssc audit

Source: https://pliegocss.dev/docs/integrations/plain-html

Use this command to audit a stylesheet against specific browser targets and archive the findings.

```bash
pliego-cssc audit --input public/app.css --targets baseline-widely
```

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

### Check for ambiguous declarations with pliego-cssc check

Source: https://pliegocss.dev/docs/composition

Conflicting declarations in the same semantic slot are rejected by the compiler to prevent ambiguous styling.

```bash
pliego-cssc check --style "p-4 p-6" --seed
```

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

### Define typed CSS identities

Source: https://pliegocss.dev/docs/getting-started

Use the pc! macro to define a typed style constant that compiles to static, standards-compliant CSS.

```rust
use pliego_css::{pc, Style};

const BUTTON: Style = pc!(
  "inline-flex gap-2 rounded-lg bg-accent px-4 py-2"
);
```

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

### Cascade layer variants: layer-components:bg-surface layer-utilities:p-4

Source: https://pliegocss.dev/docs/variants

Use fixed layer variants to model author-controlled precedence without allowing arbitrary source-order dependence to leak into identity.

```text
layer-components:bg-surface layer-utilities:p-4
```

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

### Explicit override composition with pliego-cssc compile

Source: https://pliegocss.dev/docs/composition

Use explicit composition when intentionally replacing one semantic assignment with another to maintain inspectability.

```bash
pliego-cssc compile --compose "p-4" "p-6" --seed
```

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

### Canonicalization of independent semantic slots

Source: https://pliegocss.dev/docs/composition

Utilities occupying independent semantic slots canonicalize to the same identity regardless of their authored order.

```text
flex gap-4 p-6
p-6 flex gap-4
```

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

### Importance modifier syntax

Source: https://pliegocss.dev/docs/syntax

Uses a trailing exclamation mark to mark semantic contributions as important, ensuring authority in synthesized CSS effects.

```text
ring-2! shadow-md!
```
Tokens:
Raw