AbsoluteJS

absolutejs-stylelab-example

absolutejs-stylelab-examplev0.0.1betaDev Tools

Shows AbsoluteJS Sass, SCSS, Less, and SCSS module preprocessing across React, Svelte, Vue, Angular, HTML, and HTMX routes.

#Installation

BASH
# Private workspace project: ~/abs/examples/stylelab

#Capabilities

Overview

Shows AbsoluteJS Sass, SCSS, Less, and SCSS module preprocessing across React, Svelte, Vue, Angular, HTML, and HTMX routes.

Run it

The root redirects to /react/tailwind. Every combination is available at // where the frameworks are react, svelte, vue, angular, html, and htmx, and the styles are scss, less, stylus, and tailwind.

What it demonstrates

Global SCSS, Less, and Stylus compilation.

Framework component styles and Vue SCSS modules.

Tailwind CSS generation from the configured input file.

Show 3 more

additionalData variables supplied to Less and Stylus preprocessors.

A custom PostCSS plugin that appends a visible proof property.

The same styling pipeline across component and HTML-first routes.

Configuration

The central setup lives in absolute.config.ts:

Use the matrix navigation in any rendered page to compare the generated output. The cards and accent colors provide a quick visual check that variables, modules, Tailwind utilities, and PostCSS transforms all reached the browser.

Outcomes

What you can build

Build on the supported package contract

Use absolutejs-stylelab-example through its supported public entry points.

Hardening checklist

Production guidance

Make every external boundary explicitPin the deployed absolutejs-stylelab-example version, replace example or memory-backed dependencies with durable implementations, bound external calls, protect credentials, and emit enough evidence to retry or recover safely.

Follow in order

Troubleshooting path

1
Trace from the first failed boundary
Reproduce the smallest canonical absolutejs-stylelab-example example, confirm the supported entry point and version in the API explorer, then inspect the first boundary that did not produce its documented result.

#Run it

Partial snippet

Working example for Run it.

BASH
bun install
bun run dev

#Configuration

Partial snippet

The central setup lives in absolute.config.ts:

TS
export default defineConfig({
	stylePreprocessors: {
		less: { additionalData: '@accent: #0f766e;' },
		stylus: { additionalData: 'stylusAccent = #7e22ce' }
	},
	stylesConfig: './src/frontend/styles/indexes',
	tailwind: {
		input: './src/frontend/styles/tailwind.css',
		output: 'tailwind.css'
	}
});

#Package commands

Scripts declared by this package manifest.

bun run devabsolute dev
bun run formatabsolute prettier --write
bun run lintabsolute eslint
bun run startabsolute start
bun run typecheckabsolute typecheck
Private workspace project
This project is maintained inside the workspace and is not published as a standalone npm package.