Skip to content

Commit 811cffa

Browse files
authored
Use the new JS API in the README (#1572)
1 parent f7669d5 commit 811cffa

File tree

2 files changed

+44
-55
lines changed

2 files changed

+44
-55
lines changed

README.md

Lines changed: 35 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ A [Dart][dart] implementation of [Sass][sass]. **Sass makes CSS fun again**.
3131
* [From Homebrew (macOS)](#from-homebrew-macos)
3232
* [Standalone](#standalone)
3333
* [From npm](#from-npm)
34+
* [Legacy JavaScript API](#legacy-javascript-api)
3435
* [From Pub](#from-pub)
3536
* [`sass_api` Package](#sass_api-package)
3637
* [From Source](#from-source)
37-
* [JavaScript API](#javascript-api)
3838
* [Why Dart?](#why-dart)
3939
* [Compatibility Policy](#compatibility-policy)
4040
* [Browser Compatibility](#browser-compatibility)
@@ -100,16 +100,46 @@ library:
100100
[npm]: https://www.npmjs.com/package/sass
101101

102102
```js
103-
var sass = require('sass');
103+
const sass = require('sass');
104104

105-
sass.render({file: scss_filename}, function(err, result) { /* ... */ });
105+
const result = sass.compile(scssFilename);
106106

107107
// OR
108108

109-
var result = sass.renderSync({file: scss_filename});
109+
// Note that `compileAsync()` is substantially slower than `compile()`.
110+
const result = await sass.compileAsync(scssFilename);
110111
```
111112

112-
[See below](#javascript-api) for details on Dart Sass's JavaScript API.
113+
See [the Sass website][js api] for full API documentation.
114+
115+
[js api]: https://sass-lang.com/documentation/js-api
116+
117+
#### Legacy JavaScript API
118+
119+
Dart Sass also supports an older JavaScript API that's fully compatible with
120+
[Node Sass] (with a few exceptions listed below), with support for both the
121+
[`render()`] and [`renderSync()`] functions. This API is considered deprecated
122+
and will be removed in Dart Sass 2.0.0, so it should be avoided in new projects.
123+
124+
[Node Sass]: https://github.com/sass/node-sass
125+
[`render()`]: https://sass-lang.com/documentation/js-api/modules#render
126+
[`renderSync()`]: https://sass-lang.com/documentation/js-api/modules#renderSync
127+
128+
Sass's support for the legacy JavaScript API has the following limitations:
129+
130+
* Only the `"expanded"` and `"compressed"` values of [`outputStyle`] are
131+
supported.
132+
133+
* Dart Sass doesn't support the [`precision`] option. Dart Sass defaults to a
134+
sufficiently high precision for all existing browsers, and making this
135+
customizable would make the code substantially less efficient.
136+
137+
* Dart Sass doesn't support the [`sourceComments`] option. Source maps are the
138+
recommended way of locating the origin of generated selectors.
139+
140+
[`outputStyle`]: https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions#outputStyle
141+
[`precision`]: https://github.com/sass/node-sass#precision
142+
[`sourceComments`]: https://github.com/sass/node-sass#sourcecomments
113143

114144
### From Pub
115145

@@ -154,49 +184,6 @@ Assuming you've already checked out this repository:
154184

155185
That's it!
156186

157-
## JavaScript API
158-
159-
When installed via npm, Dart Sass supports a JavaScript API that's fully
160-
compatible with [Node Sass][] (with a few exceptions listed below), with support
161-
for both the `render()` and `renderSync()` functions. See [the Sass
162-
website][js api] for full API documentation!
163-
164-
[Node Sass]: https://github.com/sass/node-sass
165-
[js api]: https://sass-lang.com/documentation/js-api
166-
167-
Note however that **`renderSync()` is more than twice as fast as `render()`**
168-
due to the overhead of asynchronous callbacks. Both `render()` and
169-
`renderSync()` support the following options:
170-
171-
* [`data`](https://github.com/sass/node-sass#data)
172-
* [`file`](https://github.com/sass/node-sass#file)
173-
* [`functions`](https://github.com/sass/node-sass#functions--v300---experimental)
174-
* [`importer`](https://github.com/sass/node-sass#importer--v200---experimental)
175-
* [`includePaths`](https://github.com/sass/node-sass#includepaths)
176-
* [`indentType`](https://github.com/sass/node-sass#indenttype)
177-
* [`indentWidth`](https://github.com/sass/node-sass#indentwidth)
178-
* [`indentedSyntax`](https://github.com/sass/node-sass#indentedsyntax)
179-
* [`linefeed`](https://github.com/sass/node-sass#linefeed)
180-
* [`omitSourceMapUrl`](https://github.com/sass/node-sass#omitsourcemapurl)
181-
* [`outFile`](https://github.com/sass/node-sass#outfile)
182-
* [`sourceMapContents`](https://github.com/sass/node-sass#sourcemapcontents)
183-
* [`sourceMapEmbed`](https://github.com/sass/node-sass#sourcemapembed)
184-
* [`sourceMapRoot`](https://github.com/sass/node-sass#sourcemaproot)
185-
* [`sourceMap`](https://github.com/sass/node-sass#sourcemap)
186-
* Only the `"expanded"` and `"compressed"` values of
187-
[`outputStyle`](https://github.com/sass/node-sass#outputstyle) are supported.
188-
* `charset` (`true`, the default, will prefix non-ASCII CSS with `U+FEFF` or
189-
[`@charset "UTF-8";`](https://developer.mozilla.org/en-US/docs/Web/CSS/@charset))
190-
191-
No support is intended for the following options:
192-
193-
* [`precision`](https://github.com/sass/node-sass#precision). Dart Sass defaults
194-
to a sufficiently high precision for all existing browsers, and making this
195-
customizable would make the code substantially less efficient.
196-
197-
* [`sourceComments`](https://github.com/sass/node-sass#sourcecomments). Source
198-
maps are the recommended way of locating the origin of generated selectors.
199-
200187
## Why Dart?
201188

202189
Dart Sass has replaced Ruby Sass as the canonical implementation of the Sass

package/README.npm.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ executable and a Node.js API.
2525
[Dart Sass]: https://github.com/sass/dart-sass
2626

2727
* [Usage](#usage)
28-
* [API](#api)
2928
* [See Also](#see-also)
3029
* [Behavioral Differences from Ruby Sass](#behavioral-differences-from-ruby-sass)
3130

@@ -39,20 +38,23 @@ library:
3938
[npm]: https://www.npmjs.com/package/sass
4039

4140
```js
42-
var sass = require('sass');
41+
const sass = require('sass');
4342

44-
sass.render({file: scss_filename}, function(err, result) { /* ... */ });
43+
const result = sass.compile(scssFilename);
4544

4645
// OR
4746

48-
var result = sass.renderSync({file: scss_filename});
47+
// Note that `compileAsync()` is substantially slower than `compile()`.
48+
const result = await sass.compileAsync(scssFilename);
4949
```
5050

51-
[See below](#api) for details on Dart Sass's JavaScript API.
51+
See [the Sass website][js api] for full API documentation.
5252

53-
## API
53+
[js api]: https://sass-lang.com/documentation/js-api
5454

55-
<!-- #include ../README.md "JavaScript API" -->
55+
### Legacy API
56+
57+
<!-- #include ../README.md "Legacy JavaScript API" -->
5658

5759
## See Also
5860

0 commit comments

Comments
 (0)