Error: EACCES, mkdir '/sc5styleguide' Error: We need tree to translate about sc5-styleguide

[jpbackman]

@alanontheweb could you provide a bit more details about when this error is thrown, i.e. during installation, styleguide.generate() or styleguide.applyStyles(), or perhaps somewhere else?

[alanontheweb]

@jpbackman Sure, here you go -

Running 'styleguide'...
[23:56:10] Using gulpfile ~/Documents/Projects/demosite/gulpfile.js
[23:56:10] Starting 'styleguide:generate'...
[23:56:10] Starting 'styleguide:applystyles'...
[23:56:10] Finished 'styleguide:applystyles' after 193 ms
[23:56:10] 'styleguide:generate' errored after 210 ms
[23:56:10] Error: EACCES, mkdir '/sc5styleguide'
Error: We need tree to translate

[jpbackman]

Hmm, haven't seen that error message before, but to me it looks like something (gulp, I assume) is trying to create a dir /sc5styleguide at your root, are you sure you want that? Check the path you're passing on to gulp.dest().

Also, I'd guess that the EACCES error is from gulp trying to mkdir at root, and the other error message is unrelated to that, and comes probably from the sass preprocessor you're using, it's definitely not something we'd throw.

[alanontheweb]

@jpbackman Ahh thanks. It's my first time using this, so I wouldn't be sure. But I got it to compile by setting "return gulp.src('[asterisk].scss')" instead of a path or with "[asterisk|asterisk] / [asterisk].scss".

However, it doesn't seem to be picking up my KSS annotations. The server loads but it just shows the readMe. I copied the KSS comments right out of the demo files. What could I be missing?

[jpbackman]

gulp.src picks the files relative to the gulpfile.js, and .scss matches only a file with exactly that name, since you don't provide a wildcard (i.e. *). If you have your .scss files in css dir, you'd use gulp.src('css/*.scss'), and 'css/**/*.scss' would match all .scss files in css and its subdirs.

[alanontheweb]

No, I get that. I know gulp, just having issues with getting sc5 to compile right. The paths and wildcards throw up that error tree. I'm going to dig up the gulp demo file you guys provided. Maybe my config is off.

[alanontheweb]

I think it looks the same... I only removed the node-neat stuff. This throws the error - Error: We need tree to translate

// generate(): All unprocessed styles containing the KSS markup and style variables. This will process the KSS markup and collects variable information.
gulp.task('styleguide:generate', function() {
  return gulp.src('src/assets/**/*.scss')
    .pipe(styleguide.generate({
        title: 'CNC Styleguide',
        server: true,
        port: 9000,
        rootPath: env.Test + "sc5styleguide",
        //styleVariables: 'lib/app/sass/_styleguide_variables.scss'
        overviewPath: 'README.md'
      }))
    .pipe(gulp.dest(env.Test + "sc5styleguide"));
});

//applyStyles(): Preprocessed/compiled stylesheets. This will create necessary pseudo styles and create the actual stylesheet to be used in the styleguide.
gulp.task('styleguide:applystyles', function() {
  return gulp.src('main.scss')
    .pipe($.sass({
      errLogToConsole: true
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(env.Test + "/sc5styleguide"));
});

gulp.task('watch', ['styleguide'], function() {
  // Start watching changes and update styleguide whenever changes are detected
  // Styleguide automatically detects existing server instance
  gulp.watch(['*.scss'], ['styleguide']);
});

gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);

[jpbackman]

Could you paste the output of npm ls --depth 0? I'll try to replicate this on my end and find the root cause.

[alanontheweb]

Okay, so it is a 0.3.6 thing, at least for me. I reverted to 0.3.5 and now I'm getting these errors (but at least it's going through my file).

Parsing error: Please check the validity of the block starting from line #206

204 | table tr th.show-for-small, table tr td.show-for-small {
205 |
206*| @media #{$small-only} {
207 | display:table-cell;
208 | }

Gonzales breaks on sass interpolation. I tried switching back to "gonzales-pe": "3.0.0-12", but now it's giving me this error instead - TypeError: Object # has no method 'parse'

Sure, and from which directory? The root of my project or the root of the sc5 folder?

[jpbackman]

Yes, we reverted our variable parsing related changes and gonzales-pe to an older version with 0.3.6 since they were giving more trouble than benefits, and the newer gonzales-pe has a changed API, so we can't update it without making big rewrites. We'll sit tight for a while and let things settle on that front, sorry.

[sarahquigley]

Hey @alanontheweb and @jpbackman ,

I noticed this issue, and thought I'd add my voice. I have also come across this error message 'Error: We need tree to translate'.

For me, this error has been always caused (so far a least) by a simple issue in my SCSS code as shown in the example below:

@mixin sample-mixin($variable:'value'){
...
}

The key thing to note about the example above is that there is no space between $variable and its value. This is the cause of this issue (or has been for me at least).

The issue is resolved simply by adding a space between $variable and its value - as in the code below:

@mixin sample-mixin($variable: 'value'){
...
}

The root cause of this issue is almost certainly not an SC5-styleguide issue, but some issue with one of its dependencies - perhaps this 'gonzales-pe' you mentioned. I haven't taken the time to look into it in any detail, having found this simple fix.

@alanontheweb I'm not sure if this will help you resolve your issue, but I hope it does!

[alanontheweb]

Thanks @sarahquigley ! I'll take a look see if I find something in my SCSS that matches what you're describing. Much appreciated =)

[sarahquigley]

@alanontheweb No problem! It took me a while to track down the cause of that issue - so it would be nice to be able to save someone else the trouble - fingers-crossed it's the same cause for you!