sass web worker and cndjs

[francescoagati]

Hi,
using sass worker with cdnjs ins't possible for access domain origin. Can be possible pass a blob with js sass worker code, or passing directly an instance of the worker?

Thanks

[francescoagati]

same problem with sass_sync and access domain origin

caught could not load memory initializer ./libsass.js.mem 

[rodneyrehm]

Interesting. At this point we can't XHR the file to inject it into the Worker instance as a blob, because libsass.js.mem is loaded relative to the worker path. In earlier versions emscripten required us to work with a separate mem file because of the emterpreter - but this is no longer the case. Once get around to taking another look at #40, we can get rid of the mem file and see what we can do about the blob.

[francescoagati]

the webworker and the mem file should be injected from extern for resolve this problem.
This is an example for using pdf.js with a blob worker.
http://colonelpanic.net/2014/08/using-pdf-js-web-worker-cross-domain-cors/

[rodneyrehm]

I've just released 0.9.5, which inlines the memory file. This means there's only one file left that's loaded in the worker: dist/sass.worker.js. You should now be able to load that file via XHR, make it a blob-url and pass that to new Sass('<your-worker-blob>').

I'm not sure about baking this into sass.js itself. I'd have probably used the fetch API and required the implementor to load a polyfill for non-supporting browsers. But since you can do this externally, I did not include it in 0.9.5.

[rodneyrehm]

@francescoagati does this problem still exist?

[FloNeu]

@rodneyrehm Hi, stumpled over your project and would like to use it in an angular2 application using angular-cli and it's preconfigured webpack-configuration. Sync. version of the project works like a charm, but well, i would rather like to have the compilation run async. To get the async. version running i have to load the worker file, but the angular-cli only outputs one 'vendor.cachebustinghash.js' file for all imports and therefore i can't set a relative path to the worker-file - as i would have to import it to which would include it into vendor.cachebustinghash.js too... is their a possibility to set the worker-import directly instead of defining the path. Like:

import Sass from 'sass.js/dist/sass.js';
import * as SassWorker from `'sass.js/dist/sass.worker.js'
// ...
  constructor() {
    console.log( 'SASS CONSTRUCTOR' );
    Sass.setWorker( SassWorker );
    this.$sass = new Sass( );
  }

Tought this sounded related to this question.
Thx in advance and all the best, Florian

[rodneyrehm]

@FloNeu there are ways to serialize a function to run as a worker, maybe that's a viable approach for you if you can load sass.worker.js as a string?

[FloNeu]

Well, that looks promising - thanks for your response, didn't know about that methods - highly appreciate it, will get back to you if i can make it work...
EDIT: I got it working using the methode described in the stackoverflow answer you provided - used webpack raw-loader to import the sass.worker.js file as string and then adding a function to directly set the worker. Would you like to include this into sass.js? I am not quite sure if the use-case is big enough to justify it - but if you want to include it i will try myself on creating a pull-request on the project.

[A-312]

I write the error message to improve SEO of this issue.

sass.js:94 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.0/sass.worker.js' cannot be accessed from origin 'null'.
    at new Sass (https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.0/sass.js:94:18)

<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.0/sass.js"></script>

<script>
  var sass = new Sass();
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });
</script>