Source files distributed across multiple directories

[sarahquigley]

Hi,

I've been having an issue configuring the --kss-source for my SC5 styleguide. My SCSS source files are distributed across multiple directories in a structure similar to the example below:

myapp
  - styles
      - *.scss
  - module1
      - styles
           - *.scss
  - module2
      - styles
           - *.scss
  - module3
      - styles
           - *.scss
      - submodule
          - styles
               - *.scss

I have have been using your command line tool to compile my styleguide, as described here in your README: https://github.com/SC5/sc5-styleguide#as-a-command-line-tool . It is working great, with one caveat. Perhaps I have been missing something obvious, but I have been unable to find a way to configure the --kss-source to point to multiple separate directories as outlined in the sample directory structure above.

Is there currently support for this? If so, would you be able to give me any insight into how to correctly specify the --kss-source in this situation? If not, do you have any plans to add support for situations like this one?

Thanks in advance for your help, and all your great work on SC5-styleguide,

• Sarah

[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.