fix(#31): Adding support to lessOptions

* Adding support to `lessOptions` and fixing prop variables in javascript functions

* [examples] Adding case use with javascript functions based in styled-components colorPalette

* [examples] Reverting examples .babelrc to use styless from package instead of relative

* Removing unused code in tinyColor.less

.vscode/launch.json

@@ -0,0 +1,18 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Examples",
+      "cwd": "${workspaceFolder}/examples",
+      "program": "${workspaceFolder}/examples/node_modules/.bin/parcel",
+      "args": [
+        "serve", "--no-cache", "--log-level=3", "index.html"
+      ],
+    }
+  ]
+}

examples/.babelrc

@@ -1,7 +1,7 @@
 {
   "plugins": [
-    "styless",
+    ["styless", { "lessOptions": { "javascriptEnabled": true } }],
     "transform-class-properties",
     "transform-object-rest-spread"
   ]
-}
+}

examples/App.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import Advanced from './Advanced';
 
 const App = styled.div`
-	color: @text;
+  color: @text;
 `;
 
 const Title = styled.h1`
@@ -37,12 +37,19 @@ const Button = styled.button`
 	}
 `;
 
+const Box = styled.div`
+  @import "javascript.less";
+  color: @echoColor(green);
+  background: @primary-1;
+  border: 1px solid @primary-2;
+`;
+
 export default class extends Component {
     state = {open: false};
     onClick = e => this.setState({open: !this.state.open});
 
     render() {
-        return <App>
+         return <App>
             <Wrapper>
                 <Title>
                     Hello World, this is my first styled <b>component</b>!
@@ -51,8 +58,9 @@ export default class extends Component {
                     Hello World, this is my first styled <b>component</b>!
                 </Title>
                 <Button onClick={this.onClick}>Click me</Button> <Button highlight="hsl(153, 100%, 33%)" onClick={this.onClick}>Or me</Button> <Button disabled small>But not me</Button>
+                <Box>We can also use javascript functions</Box>
                 {this.state.open && <Advanced/>}
             </Wrapper>
         </App>
     }
-}
+}

examples/color/bezierEasing.less

@@ -0,0 +1,110 @@
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+.bezierEasingMixin() {
+@functions: ~`(function() {
+  var NEWTON_ITERATIONS = 4;
+  var NEWTON_MIN_SLOPE = 0.001;
+  var SUBDIVISION_PRECISION = 0.0000001;
+  var SUBDIVISION_MAX_ITERATIONS = 10;
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  var float32ArraySupported = typeof Float32Array === 'function';
+
+  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
+  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
+  function C (aA1)      { return 3.0 * aA1; }
+
+  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
+
+  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
+
+  function binarySubdivide (aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) {
+        aB = currentT;
+      } else {
+        aA = currentT;
+      }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
+   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+     var currentSlope = getSlope(aGuessT, mX1, mX2);
+     if (currentSlope === 0.0) {
+       return aGuessT;
+     }
+     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+     aGuessT -= currentX / currentSlope;
+   }
+   return aGuessT;
+  }
+
+  var BezierEasing = function (mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+      throw new Error('bezier x values must be in [0, 1] range');
+    }
+
+    // Precompute samples table
+    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX (aX) {
+      var intervalStart = 0.0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+      --currentSample;
+
+      // Interpolate to provide an initial guess for t
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+      if (initialSlope >= NEWTON_MIN_SLOPE) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    return function BezierEasing (x) {
+      if (mX1 === mY1 && mX2 === mY2) {
+        return x; // linear
+      }
+      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+      if (x === 0) {
+        return 0;
+      }
+      if (x === 1) {
+        return 1;
+      }
+      return calcBezier(getTForX(x), mY1, mY2);
+    };
+  };
+
+  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
+  // less 3 requires a return
+  return '';
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.bezierEasingMixin();

examples/color/colorPalette.less

@@ -0,0 +1,75 @@
+/* stylelint-disable no-duplicate-selectors */
+@import "bezierEasing";
+@import "tinyColor";
+
+// We create a very complex algorithm which take the place of original tint/shade color system
+// to make sure no one can understand it 👻
+// and create an entire color palette magicly by inputing just a single primary color.
+// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
+.colorPaletteMixin() {
+@functions: ~`(function() {
+  var hueStep = 2;
+  var saturationStep = 16;
+  var saturationStep2 = 5;
+  var brightnessStep1 = 5;
+  var brightnessStep2 = 15;
+  var lightColorCount = 5;
+  var darkColorCount = 4;
+
+  var getHue = function(hsv, i, isLight) {
+    var hue;
+    if (hsv.h >= 60 && hsv.h <= 240) {
+      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    } else {
+      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    }
+    if (hue < 0) {
+      hue += 360;
+    } else if (hue >= 360) {
+      hue -= 360;
+    }
+    return Math.round(hue);
+  };
+  var getSaturation = function(hsv, i, isLight) {
+    var saturation;
+    if (isLight) {
+      saturation = Math.round(hsv.s * 100) - saturationStep * i;
+    } else if (i == darkColorCount) {
+      saturation = Math.round(hsv.s * 100) + saturationStep;
+    } else {
+      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
+    }
+    if (saturation > 100) {
+      saturation = 100;
+    }
+    if (isLight && i === lightColorCount && saturation > 10) {
+      saturation = 10;
+    }
+    if (saturation < 6) {
+      saturation = 6;
+    }
+    return Math.round(saturation);
+  };
+  var getValue = function(hsv, i, isLight) {
+    if (isLight) {
+      return Math.round(hsv.v * 100) + brightnessStep1 * i;
+    }
+    return Math.round(hsv.v * 100) - brightnessStep2 * i;
+  };
+
+  this.colorPalette = function(color, index) {
+    var isLight = index <= 6;
+    var hsv = tinycolor(color).toHsv();
+    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
+    return tinycolor({
+      h: getHue(hsv, i, isLight),
+      s: getSaturation(hsv, i, isLight),
+      v: getValue(hsv, i, isLight),
+    }).toHexString();
+  };
+})()`;
+}
+// It is hacky way to make this function will be compiled preferentially by less
+// resolve error: `ReferenceError: colorPalette is not defined`
+// https://github.com/ant-design/ant-motion/issues/44
+.colorPaletteMixin();