Skip to content

Embed the Dart Sass compiler in Swift with custom importers and functions

License

Notifications You must be signed in to change notification settings

johnfairh/swift-sass

 
 

Repository files navigation

Platforms codecov Tests

Swift Sass

Embed the Dart Sass compiler in your Swift program. Write stylesheet importers and SassScript functions in Swift.

This package provides a Swift language interface to a separate Sass implementation. The DartSass module lets you access Dart Sass, the most up to date implementation of the Sass language. It runs the Dart Sass compiler as a separate process and communicates with it using the Sass embedded protocol. If you come across another implementation of the 'compiler' side of the protocol then that should work fine too.

The Sass embedding technology is pretty new. Right now the embedded compiler releases are all tagged as alphas.

This package doesn't support LibSass right now. More info.

Examples

Minimally:

import DartSass

let compiler = try Compiler()

let results = try await compiler.compile(fileURL: scssFileURL)

print(results.css)

Although the compiler output is more structured, you'd probably be just as well off running the binary directly. The reason to use this package is to provide custom implementations of @use rules to load content, and custom functions to provide application-specific behavior:

struct ExtrasImporter: Importer {
  func canonicalize(importURL: String) async throws -> URL? {
    guard importURL == "extras" else {
      return nil
    }
    return URL(string: "custom://extras")
  }

  func load(canonicalURL: URL) async throws -> ImporterResults {
    ImporterResults(my_extras_stylesheet)
  }
}

let customFunctions: SassAsyncFunctionMap = [
  "userColorForScore($score)" : { args in
    let score = try args[0].asInt()
    return SassColor(...)
  }
]

let results = try await compiler.compile(
    fileURL: scssFileURL,
    importers: [
      .loadPath(sassIncludeDirectoryFileURL),
      .importer(ExtrasImporter())
    ],
    functions: customFunctions
)
// stylesheet

@use "extras";

.score-mid {
  color: userColorForScore(50);
}

DartSass is built on NIO but the user interface is entirely Swift 5.5 async-await.

Documentation

Requirements

  • Swift 5.5
  • macOS 11 (tested on macOS 11.3 IA64)
  • Linux (tested on Ubuntu 18.04.5)
  • Embedded Sass Protocol version 1.0.0-beta.15

Installation

Only with Swift Package Manager, via Xcode or directly:

Package dependency:

.package(name: "swift-sass",
         url: "https://github.com/johnfairh/swift-sass.git",
         from: "0.8.0")

Target dependency:

.product(name: "DartSass", package: "swift-sass"),

The Swift package bundles the embedded Dart Sass compiler for macOS and Linux (specifically Ubuntu Xenial/16.04 64-bit). For other platforms you will need to either download the correct version from the release page or build it manually, ship it as part of your program's distribution, and use this initializer.

There is no need to install a Dart runtime or SDK as part of this, the dart-sass-embedded program is standalone. The version required is 1.0.0-beta.14.

On LibSass

LibSass is the C++ implementation of Sass. In recent years it has fallen behind the specification and reference implementations, and was deprecated in 2020. However, work is underway to revive the project and it may be that LibSass 4 emerges as an alternative Sass implementation with the same level of language support as Dart Sass.

See the experimental libsass4 branch for the current state of development: if LibSass itself manages to get to a relased V4 then this swift-sass package will support it as an alternative integration.

Contributions

Welcome: open an issue / johnfairh@gmail.com / @johnfairh

License

Distributed under the MIT license.