search

marksmccann / node-sass-extra

A drop-in replacement for node-sass' Node API that adds support for globs, promises and more.
MIT License
2 stars 1 forks source link

Concatenating sources #19

Closed marksmccann closed 5 years ago

marksmccann commented 5 years ago

We would like for multiple sources with the same target destination to be concatenated into a single file. This was previously included, but was removed temporarily due to its incompatibility with source maps.

Solution 1: Concatenate the SASS files before compilation. I was able to get this working, but it added a lot of complexity and has a high likelihood of producing unpredictable results during the compilation process.

Solution 2: Concatenate the CSS files after compilation and recreate the source maps from that file by passing it back through the compiler. When source maps are generated, they added a comment at the end of each file, this would have to be stripped from each file being passed back through compiler. This is still, probably our best course of action, but should probably be handled in a different commit.

Solution 3: After thinking about it, a good option might be, when sourceMap is provided, we could omit it from the initial compilation. Then when can reduce the compiled tasks, concatenating the css that have the same output destination. Then we can pass it back through the compiler with the sourceMap prop added back.

marksmccann commented 5 years ago

Just for reference, here is the previous version of index.js with the concatenated logic: https://github.com/marksmccann/node-sass-extra/blob/86c736869dfafc5d22455da2b04c1b5be1f820a8/index.js

marksmccann commented 5 years ago

Update: node-sass provides the omitSourceMapUrl option which will prevent the sourceMap from being printed in the output file. We could use that for the first pass and then turn it back on for the second pass.

marksmccann commented 5 years ago

Starting to think that this should not be a feature. Perhaps we just throw an error if more than one source is being written to a single output? node-sass' Node API avoids this by only being able to compile a single source at a time and the CLI can only do a single file to file, or single dir to single dir.

marksmccann commented 5 years ago

I have another idea. What if, instead of concatenating the contents of sass files, we just concatenated their references and and ran that through the compiled via data.

So in the case of —

node-sass-extra src/**/*.scss -o main.scss

Our package would take each file found and concat the files as imports —

@import 'src/some-file';
@import 'src/another-file';
...

Would this be less unpredictable than option 1? It would certainly be easier to implement than 2 and 3. It would also solve the source map problem.

If the consumer cared about the order of the files being compiled, they could simply be more deliberate and specific with the sources passed to the command.

marksmccann commented 5 years ago

In the uncommon case the consumer accidentally provides the same output file for multiple sources, it would probably be a good idea to notify the user?

Warning: Multiple files were combined into a single output:

'src/file.scss'
...

were combined into: 

'combined.css'
Compiled 'src/file.scss' to 'css/file.css'
Joined 4 files to 'css/compined.css'
...