{"id":10599,"library":"bukwild-stylus-library","title":"Bukwild Stylus Library","description":"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.","status":"active","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/BKWLD/stylus-library","tags":["javascript","stylus"],"install":[{"cmd":"npm install bukwild-stylus-library","lang":"bash","label":"npm"},{"cmd":"yarn add bukwild-stylus-library","lang":"bash","label":"yarn"},{"cmd":"pnpm add bukwild-stylus-library","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for compiling Stylus files that use this library.","package":"stylus","optional":false}],"imports":[{"note":"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.","wrong":"import { fluid } from 'bukwild-stylus-library'","symbol":"index.styl (main entry)","correct":"@import \"~bukwild-stylus-library/index.styl\""},{"note":"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.","wrong":".selector\n  fluid(padding: 20px, 10px)","symbol":"fluid (mixin)","correct":".selector\n  fluid padding, 20, 10, min-break: 768px"},{"note":"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.","wrong":"@import \"boilerplate\"","symbol":"boilerplate.styl","correct":"@import \"~bukwild-stylus-library/boilerplate.styl\""}],"quickstart":{"code":"// my-project.styl\n@import \"~bukwild-stylus-library/index.styl\";\n\n// Define some base variables if needed, otherwise library defaults apply\n// fluid-default-max-break = 1440px // Default in v3.0.0+\n// fluid-default-min-break = 375px\n\n.my-responsive-element\n  font-size: 16px;\n  // Scales padding from 20px (at 1440px viewport) down to 10px (at 375px viewport)\n  fluid padding, 20, 10;\n\n.my-custom-breakpoint-element\n  margin-top: 50px;\n  // Scales margin-top from 30px (at 1024px viewport) down to 15px (at 768px viewport)\n  fluid(margin-top, 30, 15, min-break: 768px, max-break: 1024px);\n\n// Using fluid with CSS custom properties (variables)\n:root\n  fluid(--site-padding, 40, 20); // Scale a custom property\n\n.header\n  padding: var(--site-padding);\n  background: lightblue;\n\n.footer\n  padding: calc(var(--site-padding) / 2);\n  background: lightgray;","lang":"stylus","description":"This quickstart demonstrates how to import the main Stylus library and utilize the `fluid()` mixin for responsive scaling of CSS properties and custom properties."},"warnings":[{"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`.","message":"The 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"Stylus 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.","severity":"gotcha","affected_versions":">=0.0.0"},{"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.","message":"Stylus 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.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"npm ERR! code ETARGET\nnpm ERR! notarget No matching version found for stylus@^0.64.0"},{"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 `~`.","cause":"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`.","error":"Error: `~bukwild-stylus-library/index.styl` not found"},{"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.","cause":"The `fluid` mixin, or the main `index.styl` file containing it, was not successfully imported into the current Stylus file being compiled.","error":"Stylus compilation error: 'fluid' is not defined"}],"ecosystem":"npm"}