linkedin / linkedin/eyeglass

Problems with project-relative paths

Open
#149 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

package:eyeglass
Dominant language
TypeScript
Stars
738
Forks
48
PR merge metrics
No merged PRs in 30d

Description

Using plain node-sass (gulp-sass), it is possible to specify project-relative paths:

Gulpfile.js:
```js
var gulp = require("gulp");
var sass = require("gulp-sass");
var sassOptions = {};
gulp.task("sass", function() {
gulp.src("./scss/**/*.scss")
.pipe(sass(sassOptions).on("error", sass.logError))
.pipe(gulp.dest("./css"));
});
````

./scss/styles.scss:
```scss
@import dir1/_file1.scss;
````

./scss/dir1/_file1.scss
```scss
@import dir2/_file2.scss;
.test1 {
color: red;
}
````

./scss/dir2/_file2.scss:
```scss
.test2 {
color: blue;
}
````
With ./scss being the topmost folder, import paths are correctly resolved.
````
$ gulp sass
````
./css/styles.css:
```css
.file2 {
color: blue; }

.file1 {
color: red; }
````

When eyeglass is also used, these project-relative paths aren't relative to project-folder anymore:
```js
var gulp = require("gulp");
var sass = require("gulp-sass");
var eyeglass = require("eyeglass");
var sassOptions = {
// put node-sass options you need here.

eyeglass: {
// put eyeglass options you need here.
}
};
gulp.task("eyeglass", function () {
gulp.src("./scss/**/*.scss")
.pipe(sass(eyeglass(sassOptions)).on("error", sass.logError))
.pipe(gulp.dest("./css-eyeglass"));
});
````
````
$ gulp eyeglass

[...]
Error in plugin 'sass'
Message:
scss/dir1/_file1.scss
Error: Error: Could not import dir2/_file2 from any of the following locations:
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2.css
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/index.css
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.scss
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.sass
/home/test/src/eyeglass-includepath-issue/scss/dir1/dir2/_file2/_index.css
on line 1 of scss/dir1/_file1.scss
>> @import 'dir2/_file2';
--------^
````

[Sample project for reproducing this issue.](https://github.com/strarsis/eyeglass-includepath-issue/)

Edit: Using the eyeglass root option (e.g. `root: __dirname` or `root: __dirname + '/scss'`) doesn't seem to change the way how these paths are interpreted.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Gulpfile.js and the sample project linked in the report, comparing the plain node-sass pipeline with the eyeglass pipeline. Trace how imports in scss/styles.scss and scss/dir1/_file1.scss are resolved; done means dir2/_file2.scss is found through project-relative paths when eyeglass is used.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.