Milestone 0.2.2

changelog.md

@@ -1,3 +1,13 @@
+<a name="0.2.2"></a>
+## <small>0.2.2 (2018-02-27)</small>
+
+* 0.2.2 ([7aac3ab](https://github.com/gitscrum/postcss-map-get/commit/7aac3ab))
+* perf: search map and key ([25e6e28](https://github.com/gitscrum/postcss-map-get/commit/25e6e28))
+* test: for str get-content and normalize ([e41bec8](https://github.com/gitscrum/postcss-map-get/commit/e41bec8))
+* build: update changelog ([1cf4289](https://github.com/gitscrum/postcss-map-get/commit/1cf4289))
+
+
+
 <a name="0.2.1"></a>
 ## <small>0.2.1 (2018-02-26)</small>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-map-get",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "PostCSS plugin for sass-like Map Function",
   "license": "MIT",
   "repository": "gitscrum/postcss-map-get",

src/constant.js

@@ -0,0 +1,3 @@
+export const METHOD = 'map-get((';
+export const DIVIDER = '),';
+export const CLOSING_PARENTHESIS = ')';

src/index.js

@@ -1,44 +1,74 @@
 import postcss from 'postcss';
+import strNormalize from './str-normalize';
+import strGetContent from './str-get-content';
+import {METHOD, DIVIDER} from './constant';
 
-const METHOD = 'map-get';
+// const valResolve = value => {
+//   const map = value.substring(
+//     value.indexOf('((') + 2,
+//     value.indexOf('),')
+//   )
+//     .split(',')
+//     .reduce((map, string) => {
+//       const [key, value] = string.split(':');
+//       return Object.assign(map, {[key]: value});
+//     }, {});
 
-const valResolve = value => {
-  const map = value.substring(
-    value.indexOf('((') + 2,
-    value.indexOf('),')
-  )
-    .split(',')
-    .reduce((map, string) => {
-      const [key, value] = string.split(':');
-      return Object.assign(map, {[key]: value});
-    }, {});
+//   const key = value.substring(
+//     value.indexOf('),') + 2,
+//     value.lastIndexOf(')')
+//   );
 
-  const key = value.substring(
-    value.indexOf('),') + 2,
-    value.lastIndexOf(')')
-  );
+//   return map[key];
+// };
+
+// const replace = value => {
+//   console.log(value);
+
+//   //console.log(value.substr(0, start),value.substr(start, end),value.substr(end));
+//   return `${value.substr(0, start)}${valResolve(value.substr(start, end))}${value.substr(end)}`;
+// }
+const mapGet = val => {
+  let [map, key] = val
+    .split(DIVIDER)
+    .map(value => {
+      if (value.includes(':')) {
+        return value.split(',')
+          .reduce((map, string) => {
+            const [key, value] = string.split(':');
+            return Object.assign(map, {[key]: value});
+          }, {});
+      }
+
+      return value;
+    });
 
   return map[key];
 };
 
-const normalize = value => value.replace(/(\s|!default)/g, '');
+const valResolve = val => {
+  const value = strNormalize(val);
+  const {start, content, end} = strGetContent(value);
+
+  return `${start}${mapGet(content)}${end}`;
+};
 
 export default postcss.plugin('postcss-map-get', () => {
   return nodes => {
     nodes.walkDecls(decl => {
       let {value} = decl;
 
-      if (value.startsWith(METHOD)) {
-        decl.value = valResolve(normalize(decl.value));
+      if (value.includes(METHOD)) {
+        decl.value = valResolve(decl.value);
       }
     });
 
     nodes.walkAtRules(rules => {
       const {params} = rules;
 
-      const start = params.indexOf(METHOD);
-      const end = params.lastIndexOf(')');
-      rules.params = `${params.substr(0, start)}${valResolve(normalize(params.substring(start, end)))}${params.substr(end)}`;
+      if (params.includes(METHOD)) {
+        rules.params = valResolve(params);
+      }
     });
   };
 });

src/str-get-content.js

@@ -0,0 +1,13 @@
+import {METHOD, DIVIDER, CLOSING_PARENTHESIS} from './constant';
+
+export default value => {
+  const start = value.indexOf(METHOD);
+  const divider = value.indexOf(DIVIDER);
+  const end = value.indexOf(CLOSING_PARENTHESIS, divider + DIVIDER.length);
+
+  return {
+    start: value.substr(0, start),
+    content: value.substring(start + METHOD.length, end),
+    end: value.substr(end + CLOSING_PARENTHESIS.length)
+  };
+};

src/str-normalize.js

@@ -0,0 +1 @@
+export default value => value.replace(/(\s|!default)/g, '');

test/test.js → test/test.plugin.js

@@ -18,8 +18,14 @@ test('it should return body color and min-width width fro decl', t => {
   t.is(processing(value), expected);
 });
 
-test('it should retunr width for at rule @media', t => {
-  const expected = '@media (min-width: 1280px) {body {overflow-x: hidden}}';
+test('it should return width for at rule @media', t => {
+  const expected = '@media (min-width:1280px) {body {overflow-x: hidden}}';
   const value = '@media (min-width: map-get((xxs: 0,xs: 576px,sm: 768px,md: 992px,lg: 1280px,xl: 1360px,xxl: 1600px) !default, lg)) {body {overflow-x: hidden}}';
   t.is(processing(value), expected);
 });
+
+test('it should return width for decl', t => {
+  const expected = '.cnr-main {min-width: (1280px-17);}';
+  const value = '.cnr-main {min-width: (map-get((xxs: 0,xs: 576px,sm: 768px,md: 992px,lg: 1280px,xl: 1360px,xxl: 1600px) !default, lg) - 17);}';
+  t.is(processing(value), expected);
+});

test/test.str-get-content.js

@@ -0,0 +1,26 @@
+import test from 'ava';
+import strGetContent from '../src/str-get-content';
+
+test('it should return simple content', t => {
+  const expected = {
+    start: '',
+    content: 'body:#fff,main-red:#c53831,link-blue:#0592fb),body',
+    end: ''
+  };
+
+  const value = 'map-get((body:#fff,main-red:#c53831,link-blue:#0592fb),body)';
+
+  t.deepEqual(strGetContent(value), expected);
+});
+
+test('it should return content with parenthesis', t => {
+  const expected = {
+    start: '(min-width:',
+    content: 'xxs:0,xs:576px,sm:768px,md:992px,lg:1280px,xl:1360px,xxl:1600px),lg',
+    end: ')'
+  };
+
+  const value = '(min-width:map-get((xxs:0,xs:576px,sm:768px,md:992px,lg:1280px,xl:1360px,xxl:1600px),lg))';
+
+  t.deepEqual(strGetContent(value), expected);
+});

test/test.str-normalize.js

@@ -0,0 +1,21 @@
+import test from 'ava';
+import strNormalize from '../src/str-normalize';
+
+test('it should return normalize string', t => {
+  const expected1 = 'map-get((body:#fff,main-red:#c53831,link-blue:#0592fb),body)';
+  const value1 = 'map-get((body: #fff,main-red: #c53831,link-blue: #0592fb) !default, body)';
+
+  const expected2 = 'map-get((xxs:0,xs:576px,sm:768px,md:992px,lg:1280px,xl:1360px,xxl:1600px),lg)';
+  const value2 = 'map-get((xxs: 0,xs: 576px,sm: 768px,md: 992px,lg: 1280px,xl: 1360px,xxl: 1600px) !default, lg)';
+
+  const expected3 = '(min-width:map-get((xxs:0,xs:576px,sm:768px,md:992px,lg:1280px,xl:1360px,xxl:1600px),lg))';
+  const value3 = '(min-width: map-get((xxs: 0,xs: 576px,sm: 768px,md: 992px,lg: 1280px,xl: 1360px,xxl: 1600px) !default, lg))';
+
+  const expected4 = '(map-get((xxs:0,xs:576px,sm:768px,md:992px,lg:1280px,xl:1360px,xxl:1600px),lg)-17)';
+  const value4 = '(map-get((xxs: 0,xs: 576px,sm: 768px,md: 992px,lg: 1280px,xl: 1360px,xxl: 1600px) !default, lg) - 17)';
+
+  t.is(strNormalize(value1), expected1);
+  t.is(strNormalize(value2), expected2);
+  t.is(strNormalize(value3), expected3);
+  t.is(strNormalize(value4), expected4);
+});