add api option to allow switching to sass modern compiler

README.md

@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-#### rollup.config.ts
+### rollup.config.ts
 
 Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheticDefaultImports`), to tsconfig.json:
 
@@ -51,11 +51,12 @@ Profit.
 
 ### `output`
 
-- Type: `Boolean|String|Function` _(default: false)_
+- Type: `Boolean|String|Function`
+- Default: `false`
 
 ```js
 sass({
-  // Default behaviour disable output
+  // Default behavior disable output
   output: false,
 
   // Write all styles to the bundle destination where .js is replaced by .css
@@ -64,7 +65,7 @@ sass({
   // Filename to write all styles
   output: 'bundle.css',
 
-  // Callback that will be called ongenerate with two arguments:
+  // Callback that will be called on generate bundle with two arguments:
   // - styles: the concatenated styles in order of imported
   // - styleNodes: an array of style objects:
   //  [
@@ -79,7 +80,8 @@ sass({
 
 ### `insert`
 
-- Type: `Boolean` _(default: false)_
+- Type: `Boolean`
+- Default: `false`
 
 If you specify `true`, the plugin will insert compiled CSS into `<head/>` tag, via utility function that it will output
 in your build bundle.
@@ -164,14 +166,36 @@ the exported vars.
 
 ### `runtime`
 
-- Type: `Object` _(default: sass)_
+- Type: `Object`
+- Default: `sass`
 
 If you specify an object, it will be used instead of [sass](https://github.com/sass/dart-sass). You can use this to pass a different sass compiler (for example the `node-sass` npm package).
 
+### `api`
+
+- Type: `'legacy'|'modern'`
+- Default: `'legacy'`
+
+```js
+sass(); // default to legacy
+
+sass({ api: 'modern' });
+
+sass({
+  api: 'modern',
+  options: {
+    style: 'compressed',
+  },
+});
+```
+
 ### `options`
 
 - Type: `Object`
 
+> [!NOTE]
+> The content of `options` is sensible to the value specified in `api` option
+
 Options for [sass](https://github.com/sass/dart-sass) or your own runtime sass compiler.
 
 If you specify `data`, the plugin will treat as prepend sass string.
@@ -185,6 +209,22 @@ sass({
 });
 ```
 
+---
+
+> [!TIP]
+> If your are working with npm packages packages, consider to use
+> [NodePackageImporter](https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/)
+>
+> ```js
+> import * as sass from 'sass';
+>
+> sass({
+>   options: {
+>     importers: [new sass.NodePackageImporter()],
+>   },
+> });
+> ```
+
 ### `include`
 
 - Type: `string | string[]`

package.json

@@ -16,10 +16,10 @@
     "build": "npm run build-downlevel-dts && tsc --project tsconfig.build.json",
     "build-downlevel-dts": "node scripts/clean-and-run-downlevel-dts.js",
     "downlevel-dts": "downlevel-dts . ts3.5 [--to=3.5]",
-    "test": "nyc --reporter=html --reporter=text ava && npm run test:rollup.config.spec.ts",
+    "test": "nyc --reporter=html --reporter=text ava && npm run test:types",
+    "test:types": "tsc --project tsconfig.spec.json --noEmit",
     "coverage": "nyc report --reporter=text-lcov | coveralls",
     "output-coverage-lcov": "nyc report --reporter=text-lcov > coverage/tests.lcov",
-    "test:rollup.config.spec.ts": "tsc --project tsconfig.spec.json --noEmit",
     "commitlint": "commitlint --edit",
     "format": "prettier . --check",
     "format:fix": "prettier . --write"