Suggest blending formats for SASS

gyoshev · Mar 29, 2016 · 0c9b660 · 0c9b660
1 parent 0877c24
commit 0c9b660
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -51,6 +51,10 @@ function checkedValue(nodes) {
         .filter(Boolean)[0];
 }
 
+function isBlending(suggestion) {
+    return (/^blend-/i).test(suggestion.format);
+}
+
 function suggest(e) {
     var result = "<p>Nothing to suggest</p><i class='cry'></i>";
     var fromField = $("#from input");
@@ -78,6 +82,10 @@ function suggest(e) {
         ]).join("");
     }
 
+    if (preprocessor == "sass" && suggestions.some(isBlending)) {
+        result += "<p>Note: For blend-* formats, use <a href='https://github.com/heygrady/scss-blend-modes'>scss-blend-modes</a>.</p>";
+    }
+
     $(".suggestions").innerHTML = result;
 
 }

diff --git a/lib/main.js b/lib/main.js
@@ -92,7 +92,7 @@ function suggestBlendingFunction(functionName) {
                 color: newColor,
                 difference: difference,
                 complexity: 50,
-                format: format(functionName + "({input}, " + blendColor.toCSS() + ")", preprocessor)
+                format: format("{" + functionName + "}({input}, " + blendColor.toCSS() + ")", preprocessor)
             });
         }
 
@@ -107,7 +107,14 @@ var dialects = {
     sass: {
         input: "$input",
         greyscale: "grayscale",
-        spin: "adjust-hue"
+        spin: "adjust-hue",
+
+        multiply: "blend-multiply",
+        screen: "blend-screen",
+        overlay: "blend-overlay",
+        difference: "blend-difference",
+        exclusion: "blend-exclusion",
+        softlight: "blend-softlight"
     }
 };
 
@@ -142,12 +149,13 @@ var functions = {
     spin: suggestParameterFunction("spin", -359, 359, ''),
     greyscale: suggestSimpleFunction("greyscale"),
 
-    multiply: lessOnly(suggestBlendingFunction("multiply")),
-    screen: lessOnly(suggestBlendingFunction("screen")),
-    overlay: lessOnly(suggestBlendingFunction("overlay")),
-    difference: lessOnly(suggestBlendingFunction("difference")),
-    exclusion: lessOnly(suggestBlendingFunction("exclusion")),
-    softlight: lessOnly(suggestBlendingFunction("softlight")),
+    multiply: suggestBlendingFunction("multiply"),
+    screen: suggestBlendingFunction("screen"),
+    overlay: suggestBlendingFunction("overlay"),
+    difference: suggestBlendingFunction("difference"),
+    exclusion: suggestBlendingFunction("exclusion"),
+    softlight: suggestBlendingFunction("softlight"),
+
     contrast: lessOnly(suggestSimpleFunction("contrast"))
 
     // TODO: SASS-only: complement, invert, mix