Stylus import statement breaks built-in bundler

[jpravetz]

I'm submitting a bug report

• Library Version:
  Local aurelia-cli v1.2.2

Please tell us about your environment:

• Operating System:
  OSX 10.x

• Node Version:
  v12.6.0

• NPM Version:
  6.13.1

• Browser:
  N/A

• Language:
  TypeScript 3.7.3

• Loader/bundler:
  SystemJS | RequireJS

Behavior:

Use of stylus @import statements appear to break the built-in bundler.

In this bare-bones sample project, in the file app.styl, if you add the line @import 'mixins.styl'; you will get the following error.

ERROR [Bundle] Failed to write the bundle
INFO [Bundle] Error: No element indexed by 0
... etc ...

To reproduce:

git clone [email protected]:jpravetz/au-pug-styl-test4.git
cd au-pug-styl-test4
npm install
npm run build

If you remove the @import line from app.styl then the project will build and run.

I am experiencing this same issue in multiple versions of the cli and with multiple projects that I've set up to isolate the problem.

Note

This sample project project demonstrates what I think is a related issue, which is that the bundler will try to bundle @types files, if imported into a .ts file using an import statement. The workaround is to list the type in the tsconfig types array. I didn't see this issue covered in the docs.

[3cp]

It looks like you hit a postcss source map bug. We have encountered this with other setup with postcss.

Currently, you can bypass this issue by disabling source map with sourcemaps: false in your local aurelia_project/tasks/process-css.ts.

[3cp]

Looks like this one is different from the other postcss issue. I can remove postcss but hit the the same issue.

Different from scss (which use _mixins.scss file name conventions to avoid _mixins.scss to generate an empty css output), gulp-stylus generated an empty css from mixins.styl file, which somehow hit some source map bug.

I will get back to you with a fix.