mazey.css

mazey.css

Reusable CSS and Sass styles for normalized pages, responsive layouts, links, and Confluence content.

• Website
• Playground
• Stylesheet API reference

Install

npm install mazey.css

Usage

Import the package root to apply normalized browser defaults:

import "mazey.css";

Additional compiled stylesheets are available as explicit package paths:

import "mazey.css/lib/base.css";
import "mazey.css/lib/blogbase.css";
import "mazey.css/lib/link.css";
import "mazey.css/lib/confluence.css";

The package also publishes utility modules from sass/. Use Dart Sass 1.71 or later with the Node package importer:

• pkg:mazey.css/extend/<module>: placeholders for reuse with @extend.
• pkg:mazey.css/function/<module>: Sass functions.
• pkg:mazey.css/mixin/<module>: Sass mixins.
• pkg:mazey.css/variate/<module>: variables and maps.

@use "pkg:mazey.css/extend/base";

.example {
  @extend %m-flex-center;
}

Enable package resolution in the Sass CLI:

sass --pkg-importer=node input.scss output.css

When using the JavaScript API, configure NodePackageImporter:

import * as sass from "sass";

const result = sass.compile("input.scss", {
  importers: [new sass.NodePackageImporter()],
});

Use the compiled CSS imports when you do not need Sass variables, functions, mixins, or placeholders.

Confluence

Apply lib/confluence.css to pages containing .wiki-content or .entry-content. The optional lib/confluence.js enhancement expects jQuery to be available on the page; the stylesheet itself does not require JavaScript.

Development

pnpm install
npm run dev
npm run dev:site
npm run typecheck
npm run lint
npm test
npm run build
npm run docs
npm run format:check

npm run dev compiles and serves index.css, base.css, blogbase.css, link.css, confluence.css, and confluence.js on 127.0.0.1:4132. It keeps output in memory and does not serve legacy 404.css or tiny.css. Refresh consuming pages manually after CSS changes.

npm run dev:site serves the package website and playground. The sibling pages project owns the integrated Link HTML at http://127.0.0.1:4130/link/, and the sibling mazey-polestar project serves link.js on port 4131. Run all three package development servers while working on the Link page.

npm run build regenerates the current package artifacts under lib/. npm run docs builds the homepage, playground, stylesheet API reference, manifest, service worker, crawler files, and final GitHub Pages artifact under docs/.

The Pages workflow deploys pushes to main and release/v*. The npm workflow publishes only from release/v* after the full validation pipeline passes.

License

This software is released under the terms of the GPL-2.0 license.