Alpha

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/guide/installation.mdx

@@ -121,7 +121,13 @@ You can also use CSSX in pure React web projects (without React Native). Just ad
 
 CSSX is written in JavaScript but works seamlessly with TypeScript. The `styl` and `pug` template literals are typed to accept template strings.
 
-For better IDE support with Stylus syntax, consider installing the Stylus language extension for your editor.
+## 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)
+
+For support of the Stylus syntax itself, install the Stylus language extension.
 
 ## Next Steps
 

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig } from 'eslint/config'
+import neostandard, { resolveIgnoresFromGitignore } from 'neostandard'
+import cssxjs from 'eslint-plugin-cssxjs'
+
+export default defineConfig([
+  ...neostandard({
+    ignores: resolveIgnoresFromGitignore(),
+    ts: true
+  }),
+  {
+    plugins: {
+      cssxjs
+    },
+    processor: 'cssxjs/react-pug'
+  }
+])

example/CHANGELOG.md

@@ -3,6 +3,65 @@
 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)
+
+**Note:** Version bump only for package example
+
+
+
+
+
+# [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 example
+
+
+
+
+
+# [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 example
+
+
+
+
+
+# [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 example
+
+
+
+
+
+# [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 example
+
+
+
+
+
+# [0.3.0-alpha.1](https://github.com/startupjs/cssx/compare/v0.3.0-alpha.0...v0.3.0-alpha.1) (2026-03-25)
+
+**Note:** Version bump only for package example
+
+
+
+
+
+# [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)
 
 **Note:** Version bump only for package example