Sourcemap @include paths not updated

[trymeouteh]

When you use the --sourcemap argument in the CLI to generate the CSS builds with sourcemaps, when the CSS uses @include, it does not update the path and therefore will not work.

In the code below, the builds are stored in the dist directory, while the CSS source code is stored in the src directory.

This is my simple code to reproduce this...

- src/
   - stylesheet.css
- dist
   - my-package.css
   - my-package.css.map
- demo.html
- bundle.css
- package.json

bundle.css

@import 'src/stylesheet.css';

demo.html

<link rel="stylesheet" href="dist/my-package.css">

package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
   "build": "lightningcss --sourcemap bundle.css -o dist/my-package.css"
  },
  "devDependencies": {
    "lightningcss-cli": "^1.24.1"
  }
}

src/stylesheet.css

body {
	background-color: red;
}

dist/my-package.css output

@import "src/stylesheet.css";

/*# sourceMappingURL=dist/my-package.css.map */

What I expected from the dist/my-package.css output

@import "../src/stylesheet.css";

/*# sourceMappingURL=dist/my-package.css.map */

[devongovett]

Lightning CSS does not rewrite import paths. But perhaps you could consider using --bundle to combine all of your source files into a single output file?

[trymeouteh]

These are the scripts in my package.json to bundle the CSS. When I add the --bundle flag to the dev script, the source maps wil not work but when I remove the --bundle flag, it will work but with broken sourcemaps as described in the original post.

{
  "scripts": {
    "build": "lightningcss --bundle build.css -o dist/package.css",
    "dev": "npm run build && lightningcss --bundle --sourcemap build.css -o dist/package.css"
  },
  "devDependencies": {
    "lightningcss-cli": "^1.24.1"
  }
}

[trymeouteh]

Turns out it is the file path that is causing the issue
#794