fix(math): Fix negative lookbehind

Replaced negative lookbehind for matching seconds.
styled-components · Mar 1, 2019 · a5a6e7d · a5a6e7d
1 parent 95c8e35
commit a5a6e7d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 40 deletions.
diff --git a/docs/assets/polished.js b/docs/assets/polished.js
@@ -472,7 +472,7 @@
   /*#__PURE__*/
   _wrapNativeSuper(Error));
 
-  var unitRegExp = /((?!\w)a|na|hc|mc|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv)/g; // Merges additional math functionality into the defaults.
+  var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|(?<![a-zA-Z])s|ged|darg?|nrut)/g; // Merges additional math functionality into the defaults.
 
   function mergeSymbolMaps(additionalSymbols) {
     var symbolMap = {};

diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -1525,8 +1525,8 @@ <h3 class='fl m0' id='fluidrange'>
     <div class='py1 quiet mt1 prose-big'>Example</div>
 
 
-      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
-<span class="hljs-keyword">const</span> styles = {
+      <pre class='p1 overflow-auto round fill-light'>// Styles <span class="hljs-keyword">as</span> object usage
+const styles = {
   ...fluidRange(
    {
        prop: <span class="hljs-string">'padding'</span>,
@@ -1538,8 +1538,8 @@ <h3 class='fl m0' id='fluidrange'>
    )
 }
 
-<span class="hljs-comment">// styled-components usage</span>
-<span class="hljs-keyword">const</span> div = styled.div`
+// styled-components usage
+const div = styled.div`
   ${fluidRange(
      {
        prop: <span class="hljs-string">'padding'</span>,
@@ -1551,13 +1551,13 @@ <h3 class='fl m0' id='fluidrange'>
    )}
 `
 
-<span class="hljs-comment">// CSS as JS Output</span>
+// CSS <span class="hljs-keyword">as</span> JS Output
 
 div: {
-  <span class="hljs-string">"@media (min-width: 1000px)"</span>: <span class="hljs-built_in">Object</span> {
+  <span class="hljs-string">"@media (min-width: 1000px)"</span>: Object {
     <span class="hljs-string">"padding"</span>: <span class="hljs-string">"100px"</span>,
   },
-  <span class="hljs-string">"@media (min-width: 400px)"</span>: <span class="hljs-built_in">Object</span> {
+  <span class="hljs-string">"@media (min-width: 400px)"</span>: Object {
     <span class="hljs-string">"padding"</span>: <span class="hljs-string">"calc(-33.33333333333334px + 13.333333333333334vw)"</span>,
   },
   <span class="hljs-string">"padding"</span>: <span class="hljs-string">"20px"</span>,
@@ -2320,12 +2320,12 @@ <h3 class='fl m0' id='normalize'>
 
 
       <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
-<span class="hljs-keyword">const</span> styles = {
+const styles = {
    ...normalize(),
 }
 
 <span class="hljs-comment">// styled-components usage</span>
-<span class="hljs-keyword">const</span> GlobalStyle = createGlobalStyle`${normalize()}`
+const GlobalStyle = createGlobalStyle`${normalize()}`
 
 <span class="hljs-comment">// CSS as JS Output</span>
 
@@ -3819,21 +3819,21 @@ <h3 class='fl m0' id='hsl'>
 
       <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
 <span class="hljs-keyword">const</span> styles = {
-  background: hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>),
-  background: hsl({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> }),
+  <span class="hljs-built_in">background</span>: hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>),
+  <span class="hljs-built_in">background</span>: hsl({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> }),
 }
 
 <span class="hljs-comment">// styled-components usage</span>
 <span class="hljs-keyword">const</span> div = styled.div`
-  background: ${hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>)};
-  background: ${hsl({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> })};
+  <span class="hljs-built_in">background</span>: ${hsl(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>)};
+  <span class="hljs-built_in">background</span>: ${hsl({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span> })};
 `
 
 <span class="hljs-comment">// CSS in JS Output</span>
 
 element {
-  background: <span class="hljs-string">"#b3191c"</span>;
-  background: <span class="hljs-string">"#b3191c"</span>;
+  <span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
+  <span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
 }</pre>
 
 
@@ -3951,24 +3951,24 @@ <h3 class='fl m0' id='hsla'>
 
       <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
 <span class="hljs-keyword">const</span> styles = {
-  background: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>),
-  background: hsla({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, alpha: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> }),
-  background: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>),
+  <span class="hljs-built_in">background</span>: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>),
+  <span class="hljs-built_in">background</span>: hsla({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, <span class="hljs-built_in">alpha</span>: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> }),
+  <span class="hljs-built_in">background</span>: hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>),
 }
 
 <span class="hljs-comment">// styled-components usage</span>
 <span class="hljs-keyword">const</span> div = styled.div`
-  background: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>)};
-  background: ${hsla({ hue: <span class="hljs-number">360</span>, saturation: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, alpha: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> })};
-  background: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>)};
+  <span class="hljs-built_in">background</span>: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">0.7</span>)};
+  <span class="hljs-built_in">background</span>: ${hsla({ <span class="hljs-built_in">hue</span>: <span class="hljs-number">360</span>, <span class="hljs-built_in">saturation</span>: <span class="hljs-number">0.75</span>, lightness: <span class="hljs-number">0.4</span>, <span class="hljs-built_in">alpha</span>: <span class="hljs-number">0</span>,<span class="hljs-number">7</span> })};
+  <span class="hljs-built_in">background</span>: ${hsla(<span class="hljs-number">359</span>, <span class="hljs-number">0.75</span>, <span class="hljs-number">0.4</span>, <span class="hljs-number">1</span>)};
 `
 
 <span class="hljs-comment">// CSS in JS Output</span>
 
 element {
-  background: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
-  background: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
-  background: <span class="hljs-string">"#b3191c"</span>;
+  <span class="hljs-built_in">background</span>: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
+  <span class="hljs-built_in">background</span>: <span class="hljs-string">"rgba(179,25,28,0.7)"</span>;
+  <span class="hljs-built_in">background</span>: <span class="hljs-string">"#b3191c"</span>;
 }</pre>
 
 
@@ -7321,27 +7321,27 @@ <h3 class='fl m0' id='buttons'>
     <div class='py1 quiet mt1 prose-big'>Example</div>
 
 
-      <pre class='p1 overflow-auto round fill-light'>// Styles <span class="hljs-keyword">as</span> <span class="hljs-keyword">object</span> <span class="hljs-keyword">usage</span>
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
 const styles = {
-  [buttons(<span class="hljs-string">'active'</span>)]: {
-    <span class="hljs-string">'border'</span>: <span class="hljs-string">'none'</span>
+  [buttons(<span class="hljs-symbol">'activ</span>e')]: {
+    <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
   }
 }
 
-// styled-components <span class="hljs-keyword">usage</span>
+<span class="hljs-comment">// styled-components usage</span>
 const div = styled.div`
-  &gt; ${buttons(<span class="hljs-string">'active'</span>)} {
-    border: <span class="hljs-keyword">none</span>;
+  &gt; ${buttons(<span class="hljs-symbol">'activ</span>e')} {
+    border: none;
   }
 `
 
-// CSS <span class="hljs-keyword">in</span> JS Output
+<span class="hljs-comment">// CSS in JS Output</span>
 
- <span class="hljs-string">'button:active,
- '</span><span class="hljs-keyword">input</span>[<span class="hljs-keyword">type</span>="button"]:active,
- <span class="hljs-string">'input[type=\"reset\"]:active,
- '</span><span class="hljs-keyword">input</span>[<span class="hljs-keyword">type</span>=\"submit\"]:active: {
-  <span class="hljs-string">'border'</span>: <span class="hljs-string">'none'</span>
+ <span class="hljs-symbol">'button</span>:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"button"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">reset\</span>"]</span>:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">submit\</span>"]</span>:active: {
+  <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
 }</pre>
 
 

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "main": "lib/index.js",
   "module": "dist/polished.es.js",
   "types": "lib/index.d.ts",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "scripts": {
     "build": "yarn build:lib && yarn build:dist && yarn build:flow && yarn build:docs && yarn build:typescript",
     "prebuild:lib": "shx rm -rf lib/*",

diff --git a/src/math/math.js b/src/math/math.js
@@ -2,7 +2,7 @@
 import defaultSymbolMap from './defaultMathSymbols'
 import PolishedError from '../internalHelpers/_errors'
 
-const unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|(?<![a-zA-Z])s|ged|darg?|nrut)/g
+const unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\D|$)|ged|darg?|nrut)/g
 
 // Merges additional math functionality into the defaults.
 function mergeSymbolMaps(additionalSymbols?: Object): Object {

diff --git a/src/math/test/math.test.js b/src/math/test/math.test.js
@@ -66,9 +66,10 @@ describe('math', () => {
   })
 
   it('should be able to process square root', () => {
+    expect(math('0 + sqrt(4em)')).toEqual(`${Math.sqrt(4)}em`)
     expect(math('sqrt(4em)')).toEqual(`${Math.sqrt(4)}em`)
+    expect(math('sqrt(2em + 4em) * 1')).toEqual(`${Math.sqrt(2 + 4)}em`)
     expect(math('sqrt(-4em)')).toEqual(`${Math.sqrt(-4)}em`)
-    expect(math('sqrt(2em + 4em)')).toEqual(`${Math.sqrt(2 + 4)}em`)
     expect(math('sqrt(4em / 2em)')).toEqual(`${Math.sqrt(4 / 2)}em`)
     expect(math('sqrt(4em + 2em * 5)')).toEqual(`${Math.sqrt(4 + 2 * 5)}em`)
     expect(math('sqrt(4em - 2 / 5em)')).toEqual(`${Math.sqrt(4 - 2 / 5)}em`)