Merge pull request #38 from jstransformers/update-to-sass

Update to SASS

Author: RobLoach

HISTORY.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v2.0.0: 2022-06-28
+
+- Move to modern SASS ([#25](https://github.com/jstransformers/jstransformer-scss/pull/25) by [@ispyhumanfly](https://github.com/ispyhumanfly))
+
 ## v1.0.0: 2017-09-18
 
 - Updated Boilerplate

index.js

@@ -1,14 +1,13 @@
-'use strict'
-
 const path = require('path')
-const sass = require('node-sass')
+const sass = require('sass')
 const extend = require('extend-shallow')
 
 exports.name = 'scss'
 exports.outputFormat = 'css'
 
 exports.render = function (str, options) {
   const input = extend({}, options, {data: str})
+  // TODO: Replace with sass.compileString()
   const out = sass.renderSync(input)
   return {
     body: out.css.toString(),
@@ -21,6 +20,7 @@ exports.render = function (str, options) {
 exports.renderAsync = function (str, options) {
   const input = extend({}, options, {data: str})
   return new Promise((resolve, reject) => {
+    // TODO: Replace with sass.compileStringAsync()
     sass.render(input, (err, out) => {
       if (err) {
         return reject(err)
@@ -40,6 +40,7 @@ exports.renderFile = function (filename, options) {
   const input = extend({}, options, {
     file: path.resolve(filename)
   })
+  // TODO: Replace with sass.compile()
   const out = sass.renderSync(input)
   return {
     body: out.css.toString(),
@@ -54,6 +55,7 @@ exports.renderFile = function (filename, options) {
 exports.renderFileAsync = function (filename, options) {
   const input = extend({}, options, {file: path.resolve(filename)})
   return new Promise((resolve, reject) => {
+    // TODO: Replace with sass.compileAsync()
     sass.render(input, (err, out) => {
       if (err) {
         return reject(err)

package.json

@@ -1,10 +1,10 @@
 {
   "dependencies": {
     "extend-shallow": "^3.0.2",
-    "node-sass": "^4.0.0"
+    "sass": "~1.53.0"
   },
   "name": "jstransformer-scss",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "SCSS support for JSTransformers",
   "keywords": [
     "jstransformer"
@@ -13,12 +13,12 @@
     "index.js"
   ],
   "devDependencies": {
-    "test-jstransformer": "^1.0.0",
+    "test-jstransformer": "^1.1.0",
     "xo": "*"
   },
   "scripts": {
     "test": "test-jstransformer",
-    "posttest": "xo --space=2 --no-semicolon index.js"
+    "coverage": "test-jstransformer coverage"
   },
   "engines": {
     "node": ">=4"

test/import/expected.css

@@ -1,16 +1,18 @@
 nav ul {
   margin: 0;
   padding: 0;
-  list-style: none; }
-
+  list-style: none;
+}
 nav li {
-  display: inline-block; }
-
+  display: inline-block;
+}
 nav a {
   display: block;
   padding: 6px 12px;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 body {
   font: 100% Helvetica, sans-serif;
-  background-color: #efefef; }
+  background-color: #efefef;
+}

test/indentedSyntax/expected.css

@@ -1,12 +1,13 @@
 nav ul {
   margin: 0;
   padding: 0;
-  list-style: none; }
-
+  list-style: none;
+}
 nav li {
-  display: inline-block; }
-
+  display: inline-block;
+}
 nav a {
   display: block;
   padding: 6px 12px;
-  text-decoration: none; }
+  text-decoration: none;
+}

test/indentedSyntax/input.sass

@@ -3,11 +3,9 @@ nav
     margin: 0
     padding: 0
     list-style: none
-
   li
     display: inline-block
-
   a
     display: block
     padding: 6px 12px
-    text-decoration: none
+    text-decoration: none 

test/scss/expected.css

@@ -1,12 +1,13 @@
 nav ul {
   margin: 0;
   padding: 0;
-  list-style: none; }
-
+  list-style: none;
+}
 nav li {
-  display: inline-block; }
-
+  display: inline-block;
+}
 nav a {
   display: block;
   padding: 6px 12px;
-  text-decoration: none; }
+  text-decoration: none;
+}

test/scss/input.scss

@@ -5,7 +5,9 @@ nav {
     list-style: none;
   }
 
-  li { display: inline-block; }
+  li { 
+    display: inline-block; 
+  }
 
   a {
     display: block;