WPGulp
WPGulp copied to clipboard
ahmadawais
Compile multiple CSS files into different directories
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:
-
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.
-
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
rtlfiles is necessary.
If this is something that would be worthwhile for WP Gulp, I'm happy to investigate further, but would appreciate some input.
Apologies, I've been away due to a family emergency. Will respond soon. Nice ideas.
@cdils now that v2 has been released how do you propose we can handle this?
I also want this feature. When will it be adopted in the official version?
Pinging this! I just duplicated style-RTL to generate basically the same files as @cdils although not very elegantly. Are there any roadblocks on this merge, I'd love to try it out!
I've tested this PR and for me is it working like a charm! Thanks @mintbird for your work!
