feat: dart-sass

Co-authored-by: xhuz <[email protected]>

Author: martonlederer

README.md

@@ -2,20 +2,20 @@
 
 Use [Sass](http://sass-lang.com/) with [styled-jsx](https://github.com/vercel/styled-jsx) 💥
 
-This is a fixed/updated version of [styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass) by [@giuseppeg](https://github.com/giuseppeg), made because that package seems to be outdated. It works with [indented sass](#indented-syntax) and dart sass too.
+This is a fixed/updated version of [styled-jsx-plugin-sass](https://github.com/giuseppeg/styled-jsx-plugin-sass) by [@giuseppeg](https://github.com/giuseppeg), made because that package seems to be outdated. It works with [indented sass](#indented-syntax) and [dart sass](#dart-sass) too.
 
 ## Usage
 
-Install the package first.
+Install the package and the `node-sass` (or [dart-sass](#dart-sass)) version you need (it is a peer dependency).
 
-```bash
-npm install --save-dev styled-jsx-plugin-sass
+```sh
+npm install --save-dev node-sass styled-jsx-plugin-sass-2
 ```
 
-Install the `node-sass` version you need (it is a peer dependency).
+with yarn
 
-```bash
-npm install --save-dev node-sass
+```sh
+yarn add -D node-sass styled-jsx-plugin-sass-2
 ```
 
 Next, add `styled-jsx-plugin-sass-2` to the `styled-jsx`'s `plugins` in your babel configuration (e.g. `.babelrc`):
@@ -81,6 +81,20 @@ To use indented sytax, you will need to update your `sassOptions` inside your ba
 }
 ```
 
+### Dart sass
+
+If you want to use Dart sass instead of `node-sass`, your install command should look like this:
+
+```sh
+npm install --save-dev sass styled-jsx-plugin-sass-2
+```
+
+with yarn
+
+```sh
+yarn add -D sass styled-jsx-plugin-sass-2
+```
+
 #### Notes
 
 `styled-jsx-plugin-sass-2` uses `styled-jsx`'s plugin system which is supported from version 2.

index.js

@@ -1,7 +1,7 @@
-const sass = require('node-sass');
-const stripIndent = require('strip-indent');
+const stripIndent = require('strip-indent')
 
 module.exports = (css, settings) => {
+  const sass = getSassImplementation()
   const cssWithPlaceholders = css
     .replace(/%%styled-jsx-placeholder-(\d+)%%(\w*\s*[),;!{])/g, (_, id, p1) =>
       `styled-jsx-placeholder-${id}-${p1}`
@@ -11,18 +11,15 @@ module.exports = (css, settings) => {
     )
 
   // Prepend option data to cssWithPlaceholders
-  const optionData = settings.sassOptions && settings.sassOptions.data || "";
-  let data = optionData + "\n" + cssWithPlaceholders;
+  const optionData = settings.sassOptions && settings.sassOptions.data || ''
+  let data = optionData + '\n' + cssWithPlaceholders
 
   // clean up extra indent if we are using indentedSyntax
-  if(settings.sassOptions && settings.sassOptions.indentedSyntax) data = stripIndent(data);
+  if(settings.sassOptions && settings.sassOptions.indentedSyntax) data = stripIndent(data)
 
-  const preprocessed = sass.renderSync(
-    Object.assign(
-      {},
-      settings.sassOptions,
-      { data }
-    )).css.toString()
+  const preprocessed = sass
+    .renderSync(Object.assign({}, settings.sassOptions, { data }))
+    .css.toString()
 
   return preprocessed
     .replace(/styled-jsx-placeholder-(\d+)-(\w*\s*[),;!{])/g, (_, id, p1) =>
@@ -32,3 +29,20 @@ module.exports = (css, settings) => {
       `%%styled-jsx-placeholder-${id}%%`
     )
 }
+
+function getSassImplementation() {
+  let sassImplPkg = 'sass'
+
+  try {
+    require.resolve('sass')
+  } catch {
+    try {
+      require.resolve('node-sass')
+      sassImplPkg = 'node-sass'
+    } catch {
+      sassImplPkg = 'sass'
+    }
+  }
+
+  return require(sassImplPkg)
+}

test.js

@@ -6,6 +6,7 @@ const plugin = require('./')
 
 const cleanup = str => stripIndent(str).trim()
 
+// testing is done with node-sass
 describe('styled-jsx-plugin-sass', () => {
 
   it('applies plugins', () => {