Nanarinostyl

Nanarinostyl is a pure CSS library written in the Stylus preprocessor, distributed as the npm package @nanarino/stylus, that provides Arco-inspired colors, icons, and base styles for Astro and MDX projects.

What is Nanarinostyl?

Nanarinostyl accepts styl source files and compiles them into a pure CSS library. It runs on Node.js (v22.19.0 in development) and is built with pnpm 10.16.0. The project is maintained by nanarino and hosts its documentation at https://nanarino.github.io/stylus/. Its version 0.x line was published under the name nanarinostyl with the same compatibility as 1.x.

Key Features

• Stylus-based — Written exclusively in the Stylus preprocessor; the build command pnpm build:styl compiles styl files into a pure CSS library with no runtime dependencies.
• Multiple import modes — In JSX you can import '@nanarino/stylus'; in CSS you can @import url('@nanarino/stylus'); in Stylus you can pull in the source directly via @import '@nanarino/stylus/lib/index.styl'.
• Arco Design palette — Colors are based on the Arco Design default palette, and icons come from the Arco official icon library.
• Background patterns — Background effects are inspired by css-doodle, providing generated CSS doodle-style patterns.
• Base typography — The documentation uses HYWenHei-85W and JetBrains Mono fonts, though these fonts are not preset into the library itself.
• Broad browser support — Officially supports Chrome 105+, Edge 105+, Firefox 121+, Opera 91+, Safari 18, and corresponding mobile versions.
• PNPM-based workflow — Uses pnpm 10.16.0 for dependency management; pnpm dev runs the development server and pnpm build:docs builds the documentation site.

Who should use Nanarinostyl?

Astro theme developers who want a ready-made Stylus style layer with Arco Design colors and icons will find the library directly usable. MDX documentation authors can import the CSS in their projects to get consistent styling for component previews. Developers who already work in Stylus can import the .styl source files and adjust variables for deeper customization.

Use cases

• Astro theme builders: Quickly add Arco-derived colors and icons to an Astro site by importing the package in JSX, without writing custom CSS.
• MDX documentation sites: Style Markdown components consistently by importing the CSS via @import url('@nanarino/stylus').
• Stylus power users: Import lib/index.styl into .styl files to modify the library's variables and rebuild locally with pnpm build:styl.

How does Nanarinostyl work?

Install the npm package with pnpm i @nanarino/stylus, then import it either in JSX, CSS, or Stylus. For local development, clone the repository, run pnpm i to install dependencies, and use pnpm dev to start the development server. Styling changes can be built with pnpm build:styl and documentation with pnpm build:docs.

FAQ

How do I install @nanarino/stylus?

Run pnpm i @nanarino/stylus in your project. The package works with pnpm, and the repository's lockfile is optimized for pnpm 10.16.0.

Which browsers does Nanarinostyl support?

The library targets Chrome and Edge 105+, Firefox 121+, Opera 91+, Safari 18, and their mobile counterparts including Samsung Internet 20.0.

What is the difference between version 0.x and 1.x?

The 0.x line was published as nanarinostyl; version 1.x renamed the package to @nanarino/stylus while maintaining the same compatibility and feature set.