stylus/stylus

@import css files may have the same behaviour as @import styl file

Open

#2,360 opened on Feb 21, 2018

View on GitHub
 (2 comments) (4 reactions) (0 assignees)JavaScript (11,125 stars) (1,173 forks)batch import
good first issuehelp wantedt: Enhancement

Description

To follow https://github.com/stylus/stylus/issues/448

I have these files:

file-stylus.styl:

.stylus-rule
  color blue

file-css.css:

.css-rule {
  color: red;
}

main.styl:

.prefix
    @import "file-stylus"
    @import "file-css.css"

Then, I run:

stylus main.styl --include-css

Expected

.prefix .stylus-rule {
  color: #00f;
}
.prefix .css-rule {
  color: red;
}

Actually

.prefix .stylus-rule {
  color: #00f;
}
.css-rule {
  color: red;
}

.stylus-rule is well inside the .prefix class, but not .css-rule.

I don't know but I expected @import ing a css file should have the same behaviour as for a styl file.

(Also I find it not obvious to pass the option --include-css, it should be the default.)

What about you ?

Contributor guide

Tech stack
cssjavascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of StylusUnderstanding of CSS @import
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the import logic in Stylus source code, likely in `lib/import.js` or similar files. Compare how `.styl` and `.css` files are imported when nested under a selector. The issue indicates that CSS imports do not receive the parent prefix, unlike Stylus imports. Look for any existing comments or related issues for context. The fix may involve extending the same nesting behavior to CSS imports.