feat: [BREAKING] [v0.3] Allow writing styles inside pug's style(lang='styl') tag; move to new react-pug compilation pipeline and linting (fully TS-compatible)

CHANGELOG.md

@@ -3,6 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0-alpha.9](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.8...v0.3.0-alpha.9) (2026-04-20)
+
+
+### Bug Fixes
+
+* **cssxjs:** add typings for using styl and css as functions ([717efac](https://github.com/startupjs/cssx/commit/717efacd6391fdd9e38abd4fb783a945e6a52309))
+
+
+
+
+
+# [0.3.0-alpha.8](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.7...v0.3.0-alpha.8) (2026-04-19)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.7](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.6...v0.3.0-alpha.7) (2026-04-16)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.6](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.5...v0.3.0-alpha.6) (2026-04-12)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.5](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.4...v0.3.0-alpha.5) (2026-04-09)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.4](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.3...v0.3.0-alpha.4) (2026-04-06)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.3](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.2...v0.3.0-alpha.3) (2026-04-03)
+
+**Note:** Version bump only for package cssx
+
+
+
+
+
+# [0.3.0-alpha.2](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.1...v0.3.0-alpha.2) (2026-03-29)
+
+
+### Bug Fixes
+
+* **eslint-plugin-cssxjs:** update react-pug eslint plugin ([eb62d55](https://github.com/startupjs/cssx/commit/eb62d556f061c2711b9e4803d15bfd97cbfb8fbd))
+
+
+
+
+
+# [0.3.0-alpha.1](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.0...v0.3.0-alpha.1) (2026-03-25)
+
+
+### Performance Improvements
+
+* update babel pug plugin to short-circuit processing of files which don't have pug ([6317ee3](https://github.com/startupjs/cssx/commit/6317ee3d9b30a218cc6a5157327ad85fa46e1ac2))
+
+
+
+
+
+# [0.3.0-alpha.0](https://github.com/startupjs/cssx/compare/v0.2.33...v0.3.0-alpha.0) (2026-03-25)
+
+
+### Features
+
+* use the new pug babel plugn and eslint plugin from 'react-pug' with support for 'style' tags and full TSX support ([28e7a22](https://github.com/startupjs/cssx/commit/28e7a22e8069dec77c4a120f42b951ef90a4bef9))
+
+
+
+
+
 ## [0.2.33](https://github.com/startupjs/cssx/compare/v0.2.32...v0.2.33) (2026-01-25)
 
 

README.md

@@ -17,6 +17,12 @@ Features:
 
 For installation and documentation see [cssx.dev](https://cssx.dev)
 
+## VS Code Extension
+
+Install the following extension for full CSSX support with Pug and CSS/Stylus in `style` or `style(lang='styl')` tags:
+
+[`vscode-react-pug-tsx`](https://marketplace.visualstudio.com/items?itemName=startupjs.vscode-react-pug-tsx)
+
 ## License
 
 MIT

docs-theme/index.tsx

@@ -7,9 +7,9 @@ export * from '@rspress/core/theme-original'
 
 export function Layout () {
   return (
-    <div className="project-layout">
-      <ProjectSidebar activeProject="cssx" />
-      <div className="project-layout-content">
+    <div className='project-layout'>
+      <ProjectSidebar activeProject='cssx' />
+      <div className='project-layout-content'>
         <DefaultLayout />
       </div>
     </div>
@@ -58,16 +58,16 @@ interface ProjectSidebarProps {
 
 function ProjectSidebar ({ activeProject }: ProjectSidebarProps) {
   return (
-    <nav className="project-sidebar">
+    <nav className='project-sidebar'>
       {PROJECTS.map((project) => (
         <a
           key={project.id}
           href={project.url}
           className={`project-sidebar-button project-sidebar-button--${project.id} ${project.id === activeProject ? 'active' : ''}`}
           aria-label={project.name}
         >
-          <span className="project-sidebar-button__text">{project.label}</span>
-          <span className="project-sidebar-button__tooltip">{project.name}</span>
+          <span className='project-sidebar-button__text'>{project.label}</span>
+          <span className='project-sidebar-button__tooltip'>{project.name}</span>
         </a>
       ))}
     </nav>

docs/api/babel.md

@@ -72,8 +72,9 @@ The Babel preset transforms:
 1. **`styl` template literals** → Compiled style objects
 2. **`css` template literals** → Compiled style objects
 3. **`pug` template literals** → JSX elements (if enabled)
-4. **`styleName` props** → Connected to compiled styles
-5. **`part` props** → Part style injection points
+4. **`style` blocks inside `pug` templates** → Local `css` or `styl` template literals
+5. **`styleName` props** → Connected to compiled styles
+6. **`part` props** → Part style injection points
 
 ### Before Transform
 
@@ -105,7 +106,7 @@ The Babel preset converts this into optimized runtime code that:
 
 ## TypeScript
 
-CSSX works with TypeScript. The `styl` and `pug` template literals are removed at compile time, so no runtime types are needed.
+CSSX works with TypeScript. The `styl`, `css`, and `pug` template literals are removed at compile time, so no runtime types are needed.
 
 ```tsx
 import { styl } from 'cssxjs'
@@ -133,4 +134,6 @@ function Card({ title, children }: CardProps) {
 }
 ```
 
-For `styleName` prop typing, you may need to extend JSX types in your project.
+For `styleName` prop typing, you may need to extend JSX types in your project. For Pug-aware type checking, use `npx cssxjs check` instead of relying on `tsc --noEmit` alone.
+
+See [TypeScript Support](/guide/typescript) for the full guide.

docs/api/index.md

@@ -22,7 +22,7 @@ import {
 **Templates:**
 - [styl Template](/api/styl) — Stylus syntax, variables, mixins, `u` unit
 - [css Template](/api/css) — Plain CSS syntax
-- [pug Template](/api/pug) — JSX alternative with Pug syntax
+- [pug Template](/api/pug) — JSX alternative with Pug syntax, TypeScript expressions, and embedded style blocks
 
 **Styling:**
 - [styl() Function](/api/styl-function) — Apply styles via spread
@@ -31,14 +31,15 @@ import {
 
 **Configuration:**
 - [Babel Config](/api/babel) — Preset options
+- [TypeScript Support](/guide/typescript) — Pug-aware type checking with `cssxjs check`
 
 ## Quick Reference
 
 | Export | Type | Description |
 |--------|------|-------------|
 | `styl` | Template literal / Function | Write styles in Stylus syntax, or apply styles via spread |
 | `css` | Template literal | Write styles in plain CSS syntax |
-| `pug` | Template literal | Write JSX in Pug syntax |
+| `pug` | Template literal | Write JSX in Pug syntax, with TypeScript expressions and embedded `style` blocks |
 | `variables` | Observable object | Set CSS variable values at runtime |
 | `setDefaultVariables` | Function | Set default CSS variable values |
 | `defaultVariables` | Object | Read-only default variable values |