Source files distributed across multiple directories about sc5-styleguide

[jpbackman]

Hi @sarahquigley!

You can define multiple sources by using multiple --kss-source args, e.g.
styleguide --kss-source styles/*.scss --kss-source module1/styles/*.scss

It's not apparent from the documentation alone, we'll fix that, thanks for bringing it to our attention!

[sarahquigley]

Hi @jpbackman,

Thanks so much for your incredibly prompt reply. Your tip worked a charm - one of those things that's obvious in hindsight. It would be great to add documentation for that.

Following up from this, I had a question / suggestion. Do you have any support for a config file (perhaps a .json file), where these kind of config options for the styleguide command could be placed - lists of kss-sources, style-sources, other options etc.? This is a common set up with other tools I've used eg. Jsdoc, Karma.

If you do not support such a thing, would you consider adding support in the future for a config file like this? Though it is certainly not essential, it would be a great convenience.

Thanks again for your help - it's great to get such a quick responses!

[jpbackman]

@sarahquigley currently there is no support for a config file per se, but as a workaround you could place the config options into a .json file, switch from the CLI to the gulp version, require() the json file in your gulpfile and just pass the config keys to the styleguide gulp tasks. The current CLI module is actually just a simple wrapper for gulp, see styleguide-cli.js for example.

Also, with gulp you can pass an array of node-glob / globstar patterns to gulp.src, with which you could list the patterns in your original example as gulp.src('**/*.scss'), or if want to include only some dirs, you could use gulp.src('{styles,module1,module2,module3}/**/*.scss'), etc.

[kr3l]

Hi @sarahquigley,

I encountered the same issue. My directory layout is

styles/generic/_.less styles/generic/base/_.less

The solution with multiple --kss-source entries in command line does not seem to work for me. This is the command line I use

styleguide --kss-source styles/generic/base/.less --kss-source styles/generic/.less --style-source "assets/css
/main-styles.css" --output doc/styleguide --watch --server --overview-path=styles/styleguide.md

The tool does not give an error but hangs on 'Generating style guide to output dir:doc/styleguide'.

Any ideas on how to solve this?

I work on Windows, and styles are less stylesheets.

[kr3l]

Nevermind, it seems like a different issue, because even when I let it run on only the second folder (no multiple --kss-source) the tool seems to hangs.

[sarahquigley]

@kr3l Your issue could be that you are missing quotes around the paths to your --kss-source files.

Commands formatted as in the example below have given me an error:

styleguide 
--kss-source styles/generic/base/.less 
--kss-source styles/generic/.less 
--style-source "assets/css/main-styles.css"
--output doc/styleguide --watch --server

While running commands formatted as in the example below have worked fine for me:

styleguide 
--kss-source "styles/generic/base/.less"
--kss-source "styles/generic/.less "
--style-source "assets/css/main-styles.css"
--output doc/styleguide --watch --server

As I said, the key seems to be the missing quotes around the --kss-source.

[sarahquigley]

@jpbackman Thanks for getting back to me. The project I'm working on uses Grunt for tooling. I tried out the Grunt task in your README, but failed to get it to work. I plan to try it again in the near future.

[kr3l]

@sarahquigley It turns out a syntax error in one of the less files was the cause of the problems (I used ; instead of , to separate variables of a mixin). The less compiler didn't complain about it, but by fixing the typo I was able to run the styleguide tool.

[sarahquigley]

@kr3l Ah, I have encountered similar issues with .scss files.

[sarahquigley]

@jpbackman Have you encountered the issue I described above with the omitting the quotations around the --kss-source args? I was surprised to find this caused me issues.

[khrome83]

I am using the gulp version. I have this issue as well. What I found is that if I try to specify

gulp.src('assets/**/*.scss') 

Gives the Erorr

Error: Please, pass a string to parse

it tells me that no tree exists.

If I specify -

gulp.src('assets/*.scss')

it works, but only for the files located within assets. No files that are within additional directories within assets.

gulp.src(['/assets/*.scss', '/assets/**/*.scss'])

This causes a error that tells me to pass in a string.

gulp.src(['assets/scss/*.scss', 'assets/scss/components/_teaser.scss'])

This works, for the ONE additional file ('_teaser.scss') but does not grab all the files in components.

Additionally, if I increase the number of files it also gives me the same 'Error: Please, pass a string to parse'.

gulp.src(['assets/scss/*.scss', 'assets/scss/components/_teaser.scss', 'assets/scss/components/_addthis.scss'])

Wildcard Does not work still...

gulp.src(['assets/scss/*.scss', 'assets/scss/components/*.scss'])

This goes back to not working. Apparently I can only pass ONE wildcard file. I can not pass ANY wildcard folder.

Thanks.

[khrome83]

Ok I figured out my own problem.

The issue is that if you have multiple files, and any file is blank with nothing to parse for KSS, it gives the string error pointed out above. This causes it to fail for all files if it detects one empty file.

[cyberixae]

I am closing this as I believe none of the issues described here exist anymore. Do not hesitate to file new issues for any remaining problems.