Nib Import in Stylus: A Practical Guide for Component Reuse

The Problem: Managing UI Components in Stylus Codebases

When building front-end systems with Stylus, developers often face the challenge of reusing UI components across multiple stylesheets. The nib package provides a solution by offering pre-built UI component libraries that can be imported directly into your Stylus files.

Decision Constraints

Before implementing nib imports, consider these constraints:

• Stylus version compatibility: Path resolution behavior differs between versions 0.34.x and 0.40.x
• Dependency management: Missing nib dependency causes silent failures in production builds
• Build reliability: Circular dependencies may cause unpredictable rendering order

Comparing Import Options

>Tree-shakable >Easy >Includes all >Moderate

Option	Path Type	Version Support	Bundle Impact	Adoption Ease
@import 'nib'	Relative	0.34+
@import '/path/to/nib'	Absolute	0.40+

Trade-offs Analysis

Relative vs Absolute Paths: Relative paths work consistently across Stylus versions but require careful directory structure planning. Absolute paths offer flexibility but may break in older versions.

Granular Control: Nib enables selective imports of specific components, reducing bundle size through tree-shaking compatible patterns. This is particularly useful for incremental adoption of legacy codebases.

Risk of Silent Failures: Always verify nib presence in node_modules before deployment, as missing dependencies fail silently in production.

Concrete Implementation

Create a test file to validate your nib setup:

// test.nib.styl
@import 'nib'

.button()
  appearance(none)
  border-radius(3px)
  padding(5px 10px)

.test-class
  .button()

Run the Stylus compiler and verify CSS output:

# Run in project root
stylus test.nib.styl -o test.css

Expected check: The generated CSS should include button styling with appearance, border-radius, and padding properties.

Verification Steps

1. Check Stylus version: Run stylus --version to confirm 0.34+ for consistent nib support
2. Verify nib installation: Check node_modules for nib package presence and version compatibility
3. Test component rendering: Create test file importing nib buttons and verify rendered CSS output

Limitations and Best Practices

Version-specific behavior: Be aware that path resolution differs between Stylus versions 0.34.x and 0.40.x, which may affect component organization strategies.

Circular dependency prevention: Structure your imports to avoid circular references that could cause unpredictable rendering order.

Production validation: Always include nib presence checks in your build pipeline to catch missing dependencies before deployment.