css

See more about @plumeria/compiler package

Run compile the plumeria styles, easily integrated into framework build process.
The @plumeria/compiler package is required to run commands.

Overview

Terminal

npx css

Success

Terminal

 ✓ Compiled...

Usage

json

  "scripts": {
    "dev": "css & next dev",
    "build": "css --type-check && next build",
  }

Options

`--view`

Use it to visualize your builds and test them as you go.
Do not include the --view argument in your build script as it will get into the server logs.

Terminal

npx css --view

Example output:

Terminal

defines💫:
 
@keyframes zkwt3li4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
defines💫:
 
@keyframes z19rro1a {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(90deg);
  }
}
 
props💫:
 
.z7akbr5w { width: 800px; }
.z1pokn5x { padding-inline: 24px; }
.z16ywczg { padding-top: 24px; }
.zaibf17c { margin-inline: auto; }
.z105dlb5 { margin-bottom: 40px; }
.z1ka58ui { line-height: 1.7; }
@media (max-width: 768px) { .z1rzn8t7 { width: 100%; } }
 
 ✓ Compiled...

`--paths`

Outputs a list of the files to be compiled. file.

Terminal

npx css --paths

Example output:

Terminal

app/(home)/global.ts
app/layout.config.tsx
app/not-found.tsx
component/CodeBlock.tsx
component/HomeComponent.tsx
component/Plumeria.tsx
 ✓ Compiled...

`--type-check`

Runs Typescript type checking before compiling.

Terminal

npx css --type-check

Success

 ✓ Compiled... Type-check completed

css

See more about @plumeria/compiler package

On this page