Compile with Dart Sass and fix deprecated slash as division

Resolves #109
hakimel · Dec 2, 2021 · da9af5a · da9af5a
1 parent b75722f
commit da9af5a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,10 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.3] - 2021-12-02
+### Fixed
+- Deprecated slash as division when using Dart Sass (issue [#109])
+
 ## [2.0.2] - 2021-09-01
 ### Changed
-- Set package type to `module` to better support native ES module imports.
-- Code cleanup and documentation improvements.
+- Set package type to `module` to better support native ES module imports
+- Code cleanup and documentation improvements
 
 ## [2.0.1] - 2018-05-14
 ### Added
@@ -217,7 +221,8 @@ Note that the Ladda jQuery API is deprecated - it is recommended to use the plai
 ## [0.1.0] - 2013-06-05
 - Initial release
 
-[Unreleased]: https://github.com/hakimel/Ladda/compare/2.0.2...HEAD
+[Unreleased]: https://github.com/hakimel/Ladda/compare/2.0.3...HEAD
+[2.0.3]: https://github.com/hakimel/Ladda/compare/2.0.2...2.0.3
 [2.0.2]: https://github.com/hakimel/Ladda/compare/2.0.1...2.0.2
 [2.0.1]: https://github.com/hakimel/Ladda/compare/2.0.0...2.0.1
 [2.0.0]: https://github.com/hakimel/Ladda/compare/1.0.6...2.0.0
@@ -250,6 +255,7 @@ Note that the Ladda jQuery API is deprecated - it is recommended to use the plai
 [0.2.0]: https://github.com/hakimel/Ladda/compare/0.1.0...0.2.0
 [0.1.0]: https://github.com/hakimel/Ladda/tree/0.1.0
 
+[#109]: https://github.com/hakimel/Ladda/issues/109
 [#81]: https://github.com/hakimel/Ladda/pull/81
 [#80]: https://github.com/hakimel/Ladda/issues/80
 [#68]: https://github.com/hakimel/Ladda/issues/68

diff --git a/Gruntfile.cjs b/Gruntfile.cjs
@@ -1,12 +1,10 @@
-const sass = require('node-sass');
+const sass = require('sass');
 
 module.exports = function (grunt) {
 	'use strict';
 
 	// Project configuration
 	grunt.initConfig({
-		pkg: grunt.file.readJSON('package.json'),
-
 		sass: {
 			options: {
 				implementation: sass,
@@ -45,7 +43,7 @@ module.exports = function (grunt) {
 				browser: true,
 				node: true,
 			},
-			files: [ 'Gruntfile.js', 'js/ladda.js' ]
+			files: [ 'Gruntfile.cjs', 'js/ladda.js' ]
 		},
 
 		connect: {
@@ -92,10 +90,9 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-contrib-copy');
 
 	// Default task
-	grunt.registerTask('default', ['js', 'css']);
+	grunt.registerTask('default', ['jshint', 'css']);
 
 	// Theme task
-	grunt.registerTask('js', ['jshint']);
 	grunt.registerTask('css', ['sass', 'copy']);
 
 	// Serve presentation locally

diff --git a/css/ladda.scss b/css/ladda.scss
@@ -11,6 +11,8 @@
  * CONFIG
  */
 
+@use "sass:math";
+
 $spinnerSize: 32px !default;
 
 
@@ -113,12 +115,12 @@ $spinnerSize: 32px !default;
 
 .ladda-button[data-style=expand-right] {
     .ladda-spinner {
-        right: $spinnerSize/-2 + 10;
+        right: math.div($spinnerSize, -2) + 10;
     }
 
     &[data-size="s"] .ladda-spinner,
     &[data-size="xs"] .ladda-spinner {
-        right: $spinnerSize/-2 + 4;
+        right: math.div($spinnerSize, -2) + 4;
     }
 
     &[data-loading] {
@@ -142,7 +144,7 @@ $spinnerSize: 32px !default;
 
 .ladda-button[data-style=expand-left] {
     .ladda-spinner {
-        left: $spinnerSize/2 + 10;
+        left: $spinnerSize * 0.5 + 10;
     }
 
     &[data-size="s"] .ladda-spinner,
@@ -183,7 +185,7 @@ $spinnerSize: 32px !default;
 
         .ladda-spinner {
             opacity: 1;
-            top: ($spinnerSize/ 2) + 10;
+            top: ($spinnerSize * 0.5) + 10;
             margin-top: 0;
         }
 
@@ -274,7 +276,7 @@ $spinnerSize: 32px !default;
     .ladda-spinner {
         right: 100%;
         margin-left: 0;
-        left: $spinnerSize/2;
+        left: $spinnerSize * 0.5;
 
         [dir="rtl"] & {
             right: auto;
@@ -402,7 +404,7 @@ $spinnerSize: 32px !default;
 
     .ladda-spinner {
         left: 50%;
-        margin-left: $spinnerSize/-2;
+        margin-left: math.div($spinnerSize, -2);
         transform: scale(0.2);
     }
 

diff --git a/package.json b/package.json
@@ -29,12 +29,12 @@
     "grunt": "^1.4.1",
     "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-jshint": "^3.0.0",
+    "grunt-contrib-jshint": "^3.1.1",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-sass": "^3.0.2",
-    "node-sass": "^6.0.1",
-    "rollup": "^2.56.3",
-    "rollup-plugin-node-resolve": "^5.2.0"
+    "grunt-sass": "^3.1.0",
+    "rollup": "^2.60.2",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "sass": "^1.44.0"
   },
   "license": "MIT",
   "dependencies": {