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

✅Generated global CSS
 
:root {
  --mini: 12px;
  --medium: 16px;
  --large: 24px;
}
 
✅Generated global CSS
 
:root {
  --white: white;
  --black: black;
  --text-primary: #eaeaea;
  --text-secondary: #333;
  --link: lightblue;
  --accent: purple;
}
 
✅Generated global CSS
 
:root {
  --text-primary: rgb(60,60,60);
}
:root[data-theme="light"] {
  --text-primary: black;
  --bg-primary: white;
}
:root[data-theme="dark"] {
  --text-primary: white;
  --bg-primary: black;
}
 
✅Generated global CSS
 
h1 {
  color: #ffa0a0;
}
 
✅Generated create CSS
 
.s1dc3zs0 { color: orange; }
 
✅Generated create CSS
 
.s13vu618 { color: pink; }
@media (max-width: 1024px) { .y1ndonkg { color: aqua; } }
 
✅Generated create CSS
 
.s1x6w4y4 { font-size: 14px; }
.a14a2jwa { line-height: var(--mini); }
 
✅Generated create CSS
 
.k1f4cjxk { color: green; }
 
 ✓ 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