Registry / web-framework / bukwild-stylus-library

bukwild-stylus-library

library3.2.1jsnpmunverified

Bukwild Stylus Library is a collection of opinionated utility mixins, functions, and global conventions designed for Stylus CSS preprocessor projects. It aims to streamline development by providing pre-built solutions for common CSS patterns, particularly focusing on responsive design with its `fluid()` mixin for scaling property values. The library is currently at version 3.2.1. While Stylus itself has had periods of uncertainty regarding maintenance, this library appears to be actively maintained, with a recent update (v3.2.1) published in February 2022. Its key differentiators include the advanced `fluid()` mixin for complex responsive scaling and the provision of `boilerplate.styl` for quick setup with Bukwild's internal conventions. It is specifically built for Stylus, differentiating it from Sass or Less-based utility collections.

web-framework devops

npm install bukwild-stylus-library

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BUKWILD-STYLUS-LIB

bukwild-stylus-library

web-frameworkjavascriptv3.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

index.styl (main entry)

✓ @import "~bukwild-stylus-library/index.styl"

✗ import { fluid } from 'bukwild-stylus-library'

This package provides Stylus mixins and functions, which are imported directly within your .styl files using Stylus's `@import` syntax. The `~` prefix typically resolves paths from `node_modules`. Do not use JavaScript `import` statements.

fluid (mixin)

✓ .selector fluid padding, 20, 10, min-break: 768px

✗ .selector fluid(padding: 20px, 10px)

Mixins like `fluid` are available globally once `index.styl` is imported. They are invoked directly within Stylus selectors. Ensure correct argument order and named parameters for options.

boilerplate.styl

✓ @import "~bukwild-stylus-library/boilerplate.styl"

✗ @import "boilerplate"

The `boilerplate.styl` file, containing global Bukwild conventions, can be imported separately if only specific conventions are desired or if `index.styl` is not used. Ensure the full path including `~` is used for correct module resolution.

This quickstart demonstrates how to import the main Stylus library and utilize the `fluid()` mixin for responsive scaling of CSS properties and custom properties.

// my-project.styl @import "~bukwild-stylus-library/index.styl"; // Define some base variables if needed, otherwise library defaults apply // fluid-default-max-break = 1440px // Default in v3.0.0+ // fluid-default-min-break = 375px .my-responsive-element font-size: 16px; // Scales padding from 20px (at 1440px viewport) down to 10px (at 375px viewport) fluid padding, 20, 10; .my-custom-breakpoint-element margin-top: 50px; // Scales margin-top from 30px (at 1024px viewport) down to 15px (at 768px viewport) fluid(margin-top, 30, 15, min-break: 768px, max-break: 1024px); // Using fluid with CSS custom properties (variables) :root fluid(--site-padding, 40, 20); // Scale a custom property .header padding: var(--site-padding); background: lightblue; .footer padding: calc(var(--site-padding) / 2); background: lightgray;

Debug

Known issues

breakingThe default `fluid-default-max-break` variable, which dictates the upper breakpoint for the `fluid()` mixin's scaling, was changed from its previous value to 1440px. Projects relying on the old default will see altered responsive scaling behavior.

fix

If specific max-break behavior is required, explicitly set the `fluid-default-max-break` variable in your Stylus project before importing the library, e.g., `fluid-default-max-break = 1200px`.

affects: >=3.0.0

gotchaStylus relies on a peer dependency of the `stylus` package itself. There have been instances where the core `stylus` package was temporarily unavailable or flagged in the npm registry due to unrelated malicious packages published by a maintainer's compromised account. While resolved, such incidents can cause installation failures.

fix

Always ensure your `stylus` peer dependency is correctly installed. If encountering `npm ERR! code ETARGET` or similar during `npm install`, check for recent advisories regarding the main `stylus` package on npmjs.com or GitHub and consider temporary workarounds like using a specific version from the GitHub repository if the npm package is affected.

affects: >=0.0.0

gotchaStylus mixins, especially those with many arguments or optional parameters, can be prone to incorrect invocation syntax, leading to silent failures or unexpected CSS output. Stylus's transparent mixin behavior can sometimes cause ambiguity.

fix

Always refer to the library's examples for correct mixin usage. For `fluid()`, ensure property name comes first, followed by values, and then optional named arguments (`min-break: value`). Avoid using CSS property names as mixin names to prevent 'transparent mixin' conflicts.

affects: >=0.0.0

Errors

Common errors & fixes

npm ERR! code ETARGET npm ERR! notarget No matching version found for stylus@^0.64.0

The main `stylus` package (a peer dependency of this library) was temporarily removed or flagged from the npm registry, often due to security advisories, leading to installation failures.

fix

Check the `stylus` package's official npm page or GitHub repository for status updates. You might need to temporarily override the `stylus` version in your `package.json` to a known good one or use a GitHub reference if the npm registry version is unavailable.

Error: `~bukwild-stylus-library/index.styl` not found

Stylus cannot resolve the `@import` path to the `bukwild-stylus-library` package. This typically means the package is not correctly installed in `node_modules` or the Stylus compiler's `paths` option is not configured to include `node_modules`.

fix

Ensure `bukwild-stylus-library` is listed in your `package.json` and installed (`npm install` or `yarn install`). Verify your Stylus compiler configuration (e.g., in webpack, Gulp, or CLI) includes `node_modules` in its `paths` option for resolving `@import` statements starting with `~`.

Stylus compilation error: 'fluid' is not defined

The `fluid` mixin, or the main `index.styl` file containing it, was not successfully imported into the current Stylus file being compiled.

fix

Ensure that `@import "~bukwild-stylus-library/index.styl";` is present at the top of your main Stylus file or any file that requires the mixins. Also, verify that no syntax errors in the import path or the imported file itself are preventing successful loading.

Upgrade

Version history

3.2.1latest on npm

Audit

Dependencies

stylusrequiredRuntime peer dependency for compiling Stylus files that use this library.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/BKWLD/stylus-library ↗

packagehttps://www.npmjs.com/package/bukwild-stylus-library ↗

homepagehttps://bukwild.github.io/stylus-library ↗