Compile multiple CSS files into different directories

[cdils]

I'm in the process of adding editor-specific and gutenberg-specific styles to a project. While this is possible with the existing WPGulp styles task, I'd like to suggest a more elegant implementation.

Current output

In my project config.js file under Style Options, I have:

// Style options.
styleSRC: './develop/scss/*.scss', // Path to main .scss file.
styleDestination: './', // Path to place the compiled CSS file. Default set to root folder.

styleSRC points to three Sass files I have created:

editor-styles.scss // editor styles
gutenberg.scss Gutenberg-specific styles
styles.scss // main style sheet

Running these through the styles task produces these files in my project root:

|- editor-styles.css
|- editor-styles.min.css
|- editor-styles.css.map
|- gutenberg.css
|- gutenberg.min.css
|- gutenberg.css.map
|- styles.css
|- styles.min.css 
|- styles.css.map

Proposed output

That's a lot of clutter. I'd prefer to see something like this:

|- css/ 
|    |- editor-styles.css
|    |- editor-styles.min.css
|    |- gutenberg.css
|    |- gutenberg.min.css
|- styles.css
|- styles.min.css 
|- styles.css.map

It's debatable whether or not a CSS map for editor and Gutenberg styles is that useful, since those are presumably quite small files and easy to troubleshoot. It's also debatable whether you'd want to keep the three main style sheet variations in the root or move everything off to a css folder, save for styles.min.css.

Possible solution

There are multiple approaches to this. One is to add a couple of variables to config.js such as styleSRCHelpers and styleDestinationHelpers and use that as the basis for a new gulp task that mimics the current styles task, but skips sourcemap creation and routes "helper" css files (for editor and gutenberg) to a different location (i.e. css/ folder).

Forgive me, my brain isn't creative enough for better thoughts on names at the moment!

Feedback wanted

Ultimately, I'd like feedback on:

1. Whether there's a use-case to even justify adding something like this to WPGulp versus me just implementing a one-off solution in my project. My gut is that with Gutenberg coming, there's a good use-case for generating Gutenberg-specific stylesheets and wanting to store those somewhere other than the project root. Gutenberg aside, I think there's also a use-case for needing to compile specific Sass files to specific folders. For example, if I needed to create custom styles to extend Easy Digital Downloads, I'd need to compile those Sass files into an EDD-specific folder. For reference, here's how compiling multiple CSS files was done in wp-gulp-toolkit.

2. Thoughts on implementation. The solution I mentioned above is just one idea. Whatever solution is involved would need to also consider how/if generating corresponding rtl files is necessary.

If this is something that would be worthwhile for WP Gulp, I'm happy to investigate further, but would appreciate some input.

[ahmadawais]

Apologies, I've been away due to a family emergency. Will respond soon. Nice ideas.

[cdils]

No worries @ahmadawais

[ahmadawais]

@cdils now that v2 has been released how do you propose we can handle this?

[Suzakura]

I also want this feature.
When will it be adopted in the official version?

[isvictorious]

I see an approved PR for this in #125 - how can we get it merged?