### 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! ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.