= {
+ default: {
+ id: 'default',
+ title: 'Default',
+ description: 'Parse, run plugins, stringify — the same pipeline as the CLI.',
+ exampleId: 'default',
+ plugins: { nested: true, autoprefixer: true },
+ input: demoInput,
+ previewHtml: `PostCSS, rebuilt. Get started Tailwind-shaped CSS
Utility first. Try a class Nuxt + PostCSS Vue scoped styles
src/styles/global.css
SvelteKit webpack + PostCSS
+ Default
+
+ The default setup is a postcss.config.js plus the postcss-go CLI. No bundler
+ is required. The same config file is what Vite, Next.js, and other tools already look for.
+
+ Install
+ Configuration
+
+ Object form is enough for a fixed plugin list. false disables an entry;
+ true calls the plugin with no options.
+
+
+ Use a function when maps or plugins depend on NODE_ENV or the current file.
+ ctx.env is NODE_ENV, then development.
+
+ Input and scripts
+ JavaScript API
+
+ Skip the CLI when you already own the file I/O. process() always returns a Promise —
+ there is no implicit LazyResult.
+
+ CLI
+
+
+
+ Task
+ Command
+
+
+
+
+ One file
+ postcss-go src/index.css -o dist/index.css
+
+ Directory / glob
+ postcss-go src/**/*.css --base src --dir dist
+
+ Watch
+ postcss-go src/index.css -o dist/index.css -w
+
+ Plugin without a config
+ postcss-go src/index.css -u autoprefixer -o dist/index.css
+
+ Disable maps
+ postcss-go src/index.css -o dist/index.css --no-map
+
+
+
diff --git a/src/pages/examples/index.astro b/src/pages/examples/index.astro
new file mode 100644
index 0000000..9c690c4
--- /dev/null
+++ b/src/pages/examples/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.redirect(`${import.meta.env.BASE_URL}examples/default/`);
+---
diff --git a/src/pages/examples/webpack.astro b/src/pages/examples/webpack.astro
new file mode 100644
index 0000000..96541b3
--- /dev/null
+++ b/src/pages/examples/webpack.astro
@@ -0,0 +1,82 @@
+---
+import ExamplesLayout from '../../layouts/ExamplesLayout.astro';
+import CodeSample from '../../components/CodeSample.astro';
+import PlaygroundCta from '../../components/PlaygroundCta.astro';
+
+const install =
+ 'pnpm add -D @postcss-go/core @postcss-go/webpack-loader autoprefixer webpack webpack-cli css-loader style-loader';
+const config = `export default {
+ plugins: {
+ autoprefixer: {},
+ },
+};`;
+const webpackConfig = `export default {
+ module: {
+ rules: [
+ {
+ test: /\\.css$/i,
+ use: ['style-loader', 'css-loader', '@postcss-go/webpack-loader'],
+ },
+ ],
+ },
+};`;
+const webpackConfigInline = `import autoprefixer from 'autoprefixer';
+
+export default {
+ module: {
+ rules: [
+ {
+ test: /\\.css$/i,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ {
+ loader: '@postcss-go/webpack-loader',
+ options: {
+ sourceMap: true,
+ postcssOptions: {
+ config: false,
+ plugins: [autoprefixer()],
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+};`;
+const css = `.button {
+ display: flex;
+ gap: 0.5rem;
+}`;
+const scripts = `{
+ "scripts": {
+ "build": "webpack --mode production",
+ "build:css": "postcss-go src/**/*.css --base src --dir dist/css --no-map"
+ }
+}`;
+---
+
+
+ webpack
+
+ Add @postcss-go/webpack-loader to your CSS rule. It calls the Go engine directly and
+ does not depend on postcss or the official postcss-loader. By default
+ it discovers postcss.config.js from the input file, same as the CLI.
+
+
+ Pass postcssOptions inline when you want to disable config lookup or set plugins in the
+ webpack config. postcssOptions can also be a function that receives mode,
+ env, file, and the loader context.
+
+ You can still run the CLI for a bundler-free CSS pass:
+
diff --git a/src/pages/guide/get-started.md b/src/pages/guide/get-started.md
index 426297b..f16b00d 100644
--- a/src/pages/guide/get-started.md
+++ b/src/pages/guide/get-started.md
@@ -50,6 +50,8 @@ file or environment:
terminal Copy
pnpm postcss-go src/index.css -o dist/index.cssGet started
- Progress
+ Examples
+ Playground
MIT licensed
diff --git a/src/pages/playground/[id].astro b/src/pages/playground/[id].astro
new file mode 100644
index 0000000..3e15f39
--- /dev/null
+++ b/src/pages/playground/[id].astro
@@ -0,0 +1,24 @@
+---
+import PlaygroundLayout from '../../layouts/PlaygroundLayout.astro';
+import CssPlayground from '../../components/CssPlayground.astro';
+import { PLAYGROUND_LINKS, playgroundPreset } from '../../lib/playgrounds';
+
+export function getStaticPaths() {
+ return PLAYGROUND_LINKS.map((item) => ({ params: { id: item.id } }));
+}
+
+const id = Astro.params.id ?? 'default';
+const spec = playgroundPreset(id);
+const exampleHref = `${import.meta.env.BASE_URL}examples/${spec.exampleId}/`;
+---
+
+
+
+
diff --git a/src/pages/playground/index.astro b/src/pages/playground/index.astro
new file mode 100644
index 0000000..52653ab
--- /dev/null
+++ b/src/pages/playground/index.astro
@@ -0,0 +1,3 @@
+---
+return Astro.redirect(`${import.meta.env.BASE_URL}playground/default/`);
+---
diff --git a/src/styles/global.css b/src/styles/global.css
index 805159d..3969df2 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -335,3 +335,230 @@ html[data-theme='light'] .site-nav__github:hover {
html[data-theme='light'] .site-nav__github {
border-color: rgba(10, 11, 13, 0.2) !important;
}
+
+.playground-page {
+ display: flex;
+ min-height: 100dvh;
+ flex-direction: column;
+}
+
+@media (min-width: 761px) {
+ .playground-page {
+ height: 100dvh;
+ overflow: hidden;
+ }
+}
+
+.playground-shell {
+ display: grid;
+ width: 100%;
+ max-width: 100rem;
+ min-height: 0;
+ flex: 1;
+ grid-template-columns: 1fr;
+ gap: clamp(1.5rem, 4vw, 2.5rem);
+ padding: 0 1.5rem 1.5rem;
+}
+
+@media (min-width: 761px) {
+ .playground-shell {
+ grid-template-columns: 13rem minmax(0, 1fr);
+ padding: 0 2.5rem 1.25rem;
+ }
+}
+
+.playground-aside {
+ min-width: 0;
+}
+
+@media (min-width: 761px) {
+ .playground-aside {
+ overflow: auto;
+ padding-bottom: 0.5rem;
+ }
+}
+
+.playground-main {
+ display: flex;
+ min-width: 0;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.playground-intro h1 {
+ margin: 0;
+ font-size: clamp(1.35rem, 2.4vw, 1.85rem);
+ letter-spacing: -0.04em;
+ line-height: 1.15;
+}
+
+.playground-intro p {
+ margin: 0.45rem 0 0.9rem;
+ max-width: 46rem;
+ color: var(--copy-muted);
+ font-size: 0.9rem;
+ line-height: 1.55;
+}
+
+.playground-intro code {
+ border: 1px solid var(--line);
+ border-radius: 0.3rem;
+ background: var(--surface);
+ padding: 0.08rem 0.32rem;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+ font-size: 0.86em;
+ color: var(--accent-readable);
+}
+
+.playground {
+ display: flex;
+ min-height: 28rem;
+ flex: 1;
+ flex-direction: column;
+ overflow: hidden;
+ border: 1px solid var(--line);
+ border-radius: 0.85rem;
+ background: var(--surface-soft);
+}
+
+@media (min-width: 761px) {
+ .playground {
+ min-height: 0;
+ }
+}
+
+.playground__toolbar,
+.playground__footer {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem 1rem;
+ padding: 0.65rem 0.9rem;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+ font-size: 0.68rem;
+}
+
+.playground__toolbar {
+ border-bottom: 1px solid var(--line-soft);
+}
+
+.playground__footer {
+ border-top: 1px solid var(--line-soft);
+ color: var(--copy-faint);
+}
+
+.playground__plugins,
+.playground__actions,
+.playground__tabs {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 0.65rem 0.85rem;
+}
+
+.playground__check {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ color: var(--copy-muted);
+ cursor: pointer;
+ letter-spacing: 0.04em;
+ text-transform: lowercase;
+}
+
+.playground__check input {
+ accent-color: var(--accent-readable);
+}
+
+.playground__actions button,
+.playground__tabs button {
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ background: transparent;
+ padding: 0.28rem 0.75rem;
+ color: var(--copy-muted);
+ cursor: pointer;
+ font: inherit;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ transition:
+ border-color 150ms,
+ color 150ms;
+}
+
+.playground__actions button:hover,
+.playground__tabs button:hover,
+.playground__tabs button[aria-selected='true'] {
+ border-color: var(--accent-readable);
+ color: var(--accent-readable);
+}
+
+.playground__panes {
+ display: grid;
+ min-height: 0;
+ flex: 1;
+ grid-template-columns: 1fr;
+}
+
+@media (min-width: 900px) {
+ .playground__panes {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.playground__pane {
+ display: flex;
+ min-height: 16rem;
+ min-width: 0;
+ flex-direction: column;
+}
+
+@media (min-width: 900px) {
+ .playground__pane {
+ min-height: 0;
+ }
+
+ .playground__pane + .playground__pane {
+ border-left: 1px solid var(--line-soft);
+ }
+}
+
+.playground__label {
+ padding: 0.5rem 0.9rem 0.35rem;
+ color: var(--copy-faint);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+ font-size: 0.65rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.playground__label--tabs {
+ padding-bottom: 0.25rem;
+}
+
+.playground__editor,
+.playground__preview {
+ min-height: 0;
+ flex: 1;
+}
+
+.playground__preview {
+ width: 100%;
+ border: 0;
+ background: var(--canvas);
+}
+
+.playground__error {
+ color: #ff6b6b;
+}
+
+.playground .monaco-editor,
+.playground .monaco-editor-background,
+.playground .margin {
+ background: transparent !important;
+}
+
+html[data-theme='light'] .playground__error {
+ color: #b42318;
+}