Building Sass.js

November 13, 2018 ยท View on GitHub

To compile libsass to JS you need docker.

Preparations

Clone and initialize the repository

clone git@github.com:medialize/sass.js.git
cd sass.js
npm install

Building everything

npm run build

# destination:
#   dist/file-size.json
#   dist/sass.js
#   dist/sass.node.js
#   dist/sass.sync.js
#   dist/sass.worker.js
#   dist/versions.json

Assembling files

When working with the Sass.js APIs it is not neccessary to download the libsass repository every time. The npm run rebuild command will compile the Sass.js the same way npm run build will, except it will expect the repository to already exist.

Building in emscripten debug mode

This is useful (and necessary) to identify the callstacks required to whitelist for the Emterpreter.

npm run build:debug

# destination:
#   dist/file-size.json
#   dist/sass.js
#   dist/sass.node.js
#   dist/sass.sync.js
#   dist/sass.worker.js
#   dist/versions.json

Building only libsass.js

When working on the C wrapper it may be unnecessary to build the entire library, but focus only on emscripting libsass instead.

# import libsass repository
npm run libsass:prepare
# invoke emscripten
npm run libsass:build
# invoke emscripten in debug mode
npm run libsass:debug

# destination:
#   libsass/libsass/lib/libsass.js

Loading the source files in the browser

After cloning this repository you can run npm run libsass:prepare libsass:build and then run Sass.js off its source files to gain access to all components (emscripten environment, Sass.js components) in the global scope (see sass.source.html):

<!-- you need to compile libsass.js first using `grunt libsass:prepare libsass:build` -->
<script src="libsass/libsass/lib/libsass.js"></script>
<!-- the Sass.js helpers to work with emscripten -->
<script src="src/sass.util.js"></script>
<!-- mapping of Sass.js options to be fed to libsass via the emscripten wrapper -->
<script src="src/sass.options.js"></script>
<!-- the Importer Callback infrastructure -->
<script src="src/sass.importer.js"></script>
<!-- the Sass.js abstraction of libsass and emscripten -->
<script src="src/sass.api.js"></script>
<!-- the libsass method of resolving paths from @import statements -->
<script src="src/sass.resolve-paths.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  Sass.compile(scss, function(result) {
    console.log(result);
  });
</script>