Create task for automated main.scss build from scss directory structure

[thymikee]

No description provided.

[piotrkulpinski]

Hi Mike,
While working on this task, please remember that the most important aspect of it is to be able to set order of included files/folders as without that this feature will be pointless.

[thymikee]

Roger that

[luboskmetko]

The problem might be that if you want to set order of imported stylesheets then writing that order somewhere can end in the same amount of work like writing them directly to main.scss, not mentioning increased setup complexity.

Maybe prefixing stylesheets with numbers?

10_fonts.scss
20_buttons.scss

[thymikee]

@piotrkulpinski, @luboskmetko: After thinking it through, I see adding any kind of order prefixes, posftixes, markers, etc. in source files as pointless and bringing you more harm than good.

The main idea behind creating this task is to avoid writing @import statements in main.scss as they do not autocomplete (at least in most code editors we use) making it tedious to write and easy for a typo. And having the statement already in there it's fast to copy into desired place.

Also worth mentioning -- I'm not going to build whole main.scss every time there's a new file created, as it would e.g. overwrite our custom Bootstrap declarations. The task would rather work this way:

1. Watch for newly created files in src/scss src/scss/**/*.
2. Remember parent directory name.
3. Check in main.scss if the marker with that name is present.
   • If true, add new @import statement under the last @import in this section.
   • If false, create the marker and the end of main.scss, add new @import statement under it.

If you'd like to change the order of directories/files, just go to main.scss and copy where you like, within seconds.

[luboskmetko]

Sounds good, Michal.

[piotrkulpinski]

Hi Michał,
What's the status of this issue? I believe it's the only thing left from v0.6 milestone.
If that's something that will take more time to finish maybe we should move it to the next milestone and release the generator as there are some major updates waiting.

[thymikee]

Hi Piotrek,
It's hard for me to find time for this issue lately. Let's move it to v0.7, as it's not fully done yet and this feature requires more testing.

[piotrkulpinski]

No worries :) Moving it to v0.7

[piotrkulpinski]

I think the best option to proceed with this would be to add a css globbing plugin to allow to put something like @import 'components/*.scss' into main.scss files and it would automatically import each file matching that pattern - https://github.com/DennisBecker/grunt-sass-globbing. I can see that it's also working with PostCSS so that's even better.

I'm already using such solution in my similar gulp generator and it's working pretty well so far: https://github.com/piotrkulpinski/generator-limelight/blob/master/app/templates/src/sass/main.scss

[thymikee]

You've got the point. This solution is much simpler, makes main.scss shorter and could be applied to all directories by default, as these generally should not be dependent on the order of import.

Something important to note is that _mixins.scss file usually depends on _variables.scss so we should set some kind of ordering here.

[piotrkulpinski]

I did a quick check and https://github.com/DennisBecker/grunt-sass-globbing is not working as good as the gulp version so I wouldn't opt for using it for now.
Maybe we should close the issue for now as there's no easy/good enough solution for the time being.
I don't think injecting the file references on file save is the best way to handle it either.

[piotrkulpinski]

Unfortunately the grunt plugin doesn't work as perfectly as gulp one and it can't be used in our generator so we'll have to think of another solution or close it for now and wait until we move to gulp (some day ;)).