SXA CLI skips uploading pre-optimized-min.css.map, says "Incorrect File Name."

Question

On Sitecore 10.1, we have a pretty standard SXA CLI setup.

in gulp\config.js the following settings are set for Css handling.

  css: {
    path: ['styles/**/*.css','styles/**/*.css.map'],
    targetPath: '',
    minificationPath: ['styles/*.css'],
    cssOptimiserFilePath: 'styles/',
    cssOptimiserFileName: 'pre-optimized-min.css',
    cssSourceMap: true,
    enableMinification: true,
    disableSourceUploading: true
  },

So essentially I want (expect) SXA CLI to minify my CSS files, generate a Source Map for them, and upload the minified results (but not the CSS files themselves).

And it does appear that SXA CLI tries to do exactly that, but my pre-optimized-min.css.map ends up not getting uploaded. Instead the CLI gives me:

Incorrect File Name.
Sending of file pre-optimized-min.css.map was skipped

I did some digging and I think the problem might be that there is a bug in the CLI code. The error message comes from this function:

module.exports = function(filePath) {
    let excludedPath = config.excludedPath.some(function(element, index, array) {
        return testPath(element, filePath)
    });
    let nameValidation = config.serverNameValidation.some(function(element, index, array) {
        let pathNoExtension = path.basename(filePath).replace(/\.[^/.]+$/, ""),
            nameValidation = !testPath(element, pathNoExtension);
        if (nameValidation) {
            console.log('Incorrect File Name.'.blue);
        }
        return nameValidation;
    });
    return !!(excludedPath || nameValidation);
}

And somehow this regex gets tripped up by the fact that the map file has a .css.map extension. But I'm not sure - all I know is, that the error definitely comes from here.

So the question is; how can I work around this issue?

The SXA CLI, when doing sxa build Css generates two files for me:

• pre-optimized-min.css
• pre-optimized-min.css.map

But it is only capable of uploading the pre-optimized-min.css file. It fails on the other one - a file generated by its own build output.

How is this flow intended to work? or how can it be worked around without modifying files we do not own (like files inside node_modules\@SXA\celt and so on).

Chrome clearly expects something. It throws up a warning like DevTools failed to load source map: Could not parse content for https://main.mysite.localho.st/-/media/Themes/Tenants/MyTetant/Main/Main/styles/pre-optimized-min.css.map: Unexpected token @ in JSON at position 0. When investigating the request, SXA returns the original .css file in response to the .css.map request, causing this warning.

Answer 1

Update from November 2021: The answer is relevant if you use Sitecore SXA(@sxa/celt) lower than 10.2. And it looks like Sitecore SXA 10.2 was inspired by this answer.

If you use Sitecore SXA 10.2 or higher, please rely on out the box configuration.

It looks like it could not be done with SXA CLI out of the box. But, it is possible to do with modification of SXA gulp scripts.

Option 1: Quick and dirty.

It is possible to save CSS source map in the same .css file. (it doesn't work for production, but for all other environments it should be OK)

1. Open \node_modules\@sxa\celt\util\cssMinificator.js
2. Change gulpSourcemaps.write('./') to gulpSourcemaps.write()

Option 2: Long, but proper way

It is possible to save CSS source map file in a file with any filename. We need only to specify proper path at the end of css file itself.

1. Open \node_modules\@sxa\celt\util\cssMinificator.js
2. Extend gulpSourcemaps.write('./') with

gulpSourcemaps.write('./', {
            mapFile: function (mapFilePath) {
                // source map files are named *-css.map instead of *.css.map
                return mapFilePath.replace('.css.map', '-css.map');
            }
        }

It will save pre-optimize-min.css.map to pre-optimize-min-css.map

3. Duplicate node_modules\@sxa\celt\tasks\uploadCss.js and node_modules\@sxa\celt\tasks\watchCss.js to uploadMap.js and watchMap.js files.

4. Change newly created files to work with .map instead of .css

5. Make appropriate changes in main gulpfile.js

The more details with all code examples are available in my blog post.

Answer 2

if you don`t want to make changes in 3rd party files(that of course bad practice) you can write additional gulp task which will rename map file itself and link to it in pre-optimized file.
Create function which will rename file and change value of pre-optimized.min.css file content. And then add this as a step to proper task in gulpfile.js

Here

And here

The next step is to remove map files from exclude path(in gulp\config.js)

P.S. From my side i will add a task to add map renaming to celt when i will have some free time. And on screenshot you can see this logic, but this change need to be tested well.

Answer 3

The answer, relevant for Sitecore SXA 10.2 (@sxa/[email protected])

Sitecore SXA 10.2 will save your map files in a format pre-optimize-min-css.map and pre-optimize-min-js.map. It doesn't cause problems anymore.

All you need to do is:

1. Open gulp\config.js file
2. Set sassSourceMap value to true
3. Set js>jsSourceMap value to true
4. Set css>cssSourceMap value to true
5. Restart gulp