diff --git a/changelog.md b/changelog.md index 395dd7a..1d26241 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,13 @@ + +## 0.2.2 (2018-02-27) + +* 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)) + + + ## 0.2.1 (2018-02-26) diff --git a/package-lock.json b/package-lock.json index a3ee156..7fa07d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "postcss-map-get", - "version": "0.2.1", + "version": "0.2.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f7f06e0..f010f72 100644 --- a/package.json +++ b/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", diff --git a/src/constant.js b/src/constant.js new file mode 100644 index 0000000..8343cb7 --- /dev/null +++ b/src/constant.js @@ -0,0 +1,3 @@ +export const METHOD = 'map-get(('; +export const DIVIDER = '),'; +export const CLOSING_PARENTHESIS = ')'; diff --git a/src/index.js b/src/index.js index 3407ec0..b6b2160 100644 --- a/src/index.js +++ b/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); + } }); }; }); diff --git a/src/str-get-content.js b/src/str-get-content.js new file mode 100644 index 0000000..72190db --- /dev/null +++ b/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) + }; +}; diff --git a/src/str-normalize.js b/src/str-normalize.js new file mode 100644 index 0000000..9618dd9 --- /dev/null +++ b/src/str-normalize.js @@ -0,0 +1 @@ +export default value => value.replace(/(\s|!default)/g, ''); diff --git a/test/test.js b/test/test.plugin.js similarity index 70% rename from test/test.js rename to test/test.plugin.js index f33bf38..f421df6 100644 --- a/test/test.js +++ b/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); +}); diff --git a/test/test.str-get-content.js b/test/test.str-get-content.js new file mode 100644 index 0000000..5e6d3f0 --- /dev/null +++ b/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); +}); diff --git a/test/test.str-normalize.js b/test/test.str-normalize.js new file mode 100644 index 0000000..f5c8315 --- /dev/null +++ b/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); +});