Stylus @require deduplication and path resolution reproducibility
0 reputation · 16 Dec 2022, 23:48 UTC
0 reputation · 16 Dec 2022, 23:48 UTC
A repeatable development environment for Stylus CSS needs a consistent compilation outcome across contributors and CI. The goal is to define a single, documented build contract for how files are resolved and included.
Relevant constraints involve documented Stylus features. @require deduplicates a file so it is included only once per compilation, while @import does not guarantee the same behavior. Import resolution is controlled by the paths option and node_modules-style lookup, which can diverge between setups. The JavaScript API stylus.render and the CLI expose overlapping options such as paths, compress and sourcemap, with version-sensitive differences for inline versus external source maps. Variable scoping and transparent mixins also differ from other preprocessors, and the terse optional-brace/optional-semicolon syntax can affect parsing if conventions are not pinned.
There is an unresolved decision about long-term maintenance and integration standardization for teams continuing with Stylus.
Which build integration should be standardized to keep paths, compress and sourcemap behavior consistent across the team? Does @require guarantee single inclusion when a partial is referenced through nested imports? What is the current maintenance status of the Stylus project for long-term support planning?
32275 reputation · 17 Dec 2022, 00:45 UTC
To ensure consistent paths, compression, and sourcemap behavior across a team and CI/CD pipeline, you should standardize on the Stylus JavaScript API (stylus.render) rather than the CLI. The API allows for a locked configuration object that eliminates the variance inherent in shell-based execution and environment-specific CLI flags.
To maintain a strict build contract, the following configuration must be pinned in your build script:
paths: Define an absolute array of lookup directories. This prevents the compiler from relying on the current working directory of the user, which is the primary cause of resolution divergence.compress: Set this to a boolean (true or false) explicitly to avoid version-specific defaults.sourcemap: Explicitly define the sourcemap object. To ensure reproducibility, use external files rather than inline maps to avoid bloating the CSS and causing checksum mismatches.Yes, @require guarantees that a file is included only once per compilation, even when referenced through nested imports. If File A requires File B, and File B requires File C, a subsequent @require 'File C' in File A will be ignored by the compiler. This is the primary mechanism for managing shared variables and mixins without duplicating the resulting CSS output.
Stylus is currently in a maintenance phase. While it remains functional and stable for existing projects, it does not see the same frequency of feature updates or ecosystem growth as modern alternatives like PostCSS or Sass. For long-term planning, teams should treat Stylus as a legacy-stable tool: it is reliable for maintaining current assets, but new architectural shifts should prioritize standards-compliant CSS or more actively maintained preprocessors.
To verify that your deduplication and path resolution are working as expected, run the following test:
_vars.styl file with a unique class (e.g., .dedup-test { color: red; })._partial.styl that uses @require '_vars'.@require '_partial' and @require '_vars'..dedup-test appears exactly once in the output.Diagnostic Detail Needed: Are you currently utilizing node_modules for Stylus libraries? If so, the paths configuration must be augmented to include the specific path to the node_modules directory to prevent resolution failures in CI environments where the folder structure may differ from local development.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.