From 097fd14afe94377514d3e6b6fb42244b14d4bc7c Mon Sep 17 00:00:00 2001 From: luxp Date: Fri, 31 Mar 2017 17:14:13 +0800 Subject: [PATCH 1/4] add .idea to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 3ba3e2b..14cf2c0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules coverage .DS_Store +.idea From 6cd50fcab67fd5bbb7c0e1d3f7352315151fe94a Mon Sep 17 00:00:00 2001 From: luxp Date: Fri, 31 Mar 2017 19:24:27 +0800 Subject: [PATCH 2/4] move transition shorthand parse to ./lib/shorthand-parser.js --- index.js | 19 ++----------------- lib/shorthand-parser.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 17 deletions(-) create mode 100644 lib/shorthand-parser.js diff --git a/index.js b/index.js index 89723bc..e50dd5d 100644 --- a/index.js +++ b/index.js @@ -3,6 +3,7 @@ var css = require('css') var util = require('./lib/util') var validateItem = require('./lib/validator').validate +var shorthandParser = require('./lib/shorthand-parser') /** @@ -39,23 +40,7 @@ function parse(code, done) { if (type === 'rule') { if (rule.declarations && rule.declarations.length) { - // transition shorthand parsing - var CHUNK_REGEXP = /^(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?\s*(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?$/ - for (var i = 0; i < rule.declarations.length; i++) { - var declaration = rule.declarations[i] - if (declaration.property === 'transition') { - var match = declaration.value.match(CHUNK_REGEXP) - /* istanbul ignore else */ - if (match) { - match[1] && rule.declarations.push({type: 'declaration', property: 'transition-property', value: match[1], position: declaration.position}) - match[2] && rule.declarations.push({type: 'declaration', property: 'transition-duration', value: match[2], position: declaration.position}) - match[3] && rule.declarations.push({type: 'declaration', property: 'transition-timing-function', value: match[3], position: declaration.position}) - match[4] && rule.declarations.push({type: 'declaration', property: 'transition-delay', value: match[4], position: declaration.position}) - rule.declarations.splice(i, 1) - break - } - } - } + rule.declarations = shorthandParser(rule.declarations) rule.declarations.forEach(function (declaration) { var subType = declaration.type diff --git a/lib/shorthand-parser.js b/lib/shorthand-parser.js new file mode 100644 index 0000000..ab72dd2 --- /dev/null +++ b/lib/shorthand-parser.js @@ -0,0 +1,35 @@ +function generateDeclaration (property, value, position) { + return { + type: 'declaration', + property, + value, + position + } +} +function transition (declaration) { + let CHUNK_REGEXP = /^(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?\s*(\S*)?\s*(\d*\.?\d+(?:ms|s)?)?$/ + const match = declaration.value.match(CHUNK_REGEXP) + let result = [] + const position = declaration.position + match[1] && result.push(generateDeclaration('transition-property', match[1], position)) + match[2] && result.push(generateDeclaration('transition-duration', match[2], position)) + match[3] && result.push(generateDeclaration('transition-timing-function', match[3], position)) + match[4] && result.push(generateDeclaration('transition-delay', match[4], position)) + return result +} + +const parserCollection = { + transition +} + +module.exports = function (declarations) { + return declarations.reduce((result, declaration) => { + const parser = parserCollection[declaration.property] + if (parser) { + return result.concat(parser(declaration)) + } else { + result.push(declaration) + return result + } + }, []) +} \ No newline at end of file From cb655c4ca97f8136b7009e359684c9693ef7d99e Mon Sep 17 00:00:00 2001 From: luxp Date: Sat, 1 Apr 2017 11:09:57 +0800 Subject: [PATCH 3/4] add test for shorthand-parser --- test/shorthand-parser.spec.js | 47 +++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 test/shorthand-parser.spec.js diff --git a/test/shorthand-parser.spec.js b/test/shorthand-parser.spec.js new file mode 100644 index 0000000..d281759 --- /dev/null +++ b/test/shorthand-parser.spec.js @@ -0,0 +1,47 @@ +var chai = require('chai') +var sinon = require('sinon') +var sinonChai = require('sinon-chai') +var expect = chai.expect +chai.use(sinonChai) + +var shorthandParser = require('../lib/shorthand-parser') + +describe('shorthand-parser', function () { + it('parse transition', function () { + const declarations = [ + { + type: 'declaration', + property: 'transition', + value: 'margin-top 500ms ease-in-out 1s', + position: {} + } + ] + const result = shorthandParser(declarations) + expect(result).eql([ + { + type: 'declaration', + property: 'transition-property', + value: 'margin-top', + position: {} + }, + { + type: 'declaration', + property: 'transition-duration', + value: '500ms', + position: {} + }, + { + type: 'declaration', + property: 'transition-timing-function', + value: 'ease-in-out', + position: {} + }, + { + type: 'declaration', + property: 'transition-delay', + value: '1s', + position: {} + } + ]) + }) +}) \ No newline at end of file From fb4412fc77741a9007766dbc676581877cd55771 Mon Sep 17 00:00:00 2001 From: luxp Date: Sat, 1 Apr 2017 11:19:43 +0800 Subject: [PATCH 4/4] support margin --- lib/shorthand-parser.js | 27 ++++++- test/shorthand-parser.spec.js | 131 ++++++++++++++++++++++++++++++++++ 2 files changed, 157 insertions(+), 1 deletion(-) diff --git a/lib/shorthand-parser.js b/lib/shorthand-parser.js index ab72dd2..9964066 100644 --- a/lib/shorthand-parser.js +++ b/lib/shorthand-parser.js @@ -18,8 +18,33 @@ function transition (declaration) { return result } +function margin (declaration) { + const position = declaration.position + const splitResult = declaration.value.split(/\s+/) + let result = [] + switch (splitResult.length) { + case 1: + splitResult.push(splitResult[0], splitResult[0], splitResult[0]) + break + case 2: + splitResult.push(splitResult[0], splitResult[1]) + break + case 3: + splitResult.push(splitResult[1]) + break + } + result.push( + generateDeclaration('margin-top', splitResult[0], position), + generateDeclaration('margin-right', splitResult[1], position), + generateDeclaration('margin-bottom', splitResult[2], position), + generateDeclaration('margin-left', splitResult[3], position) + ) + return result +} + const parserCollection = { - transition + transition, + margin } module.exports = function (declarations) { diff --git a/test/shorthand-parser.spec.js b/test/shorthand-parser.spec.js index d281759..f29863e 100644 --- a/test/shorthand-parser.spec.js +++ b/test/shorthand-parser.spec.js @@ -44,4 +44,135 @@ describe('shorthand-parser', function () { } ]) }) + + it('parse margin', function () { + const declarations = [ + { + type: 'declaration', + property: 'margin', + value: '1px', + position: {} + }, + { + type: 'declaration', + property: 'margin', + value: '21px 22px', + position: {} + }, + { + type: 'declaration', + property: 'margin', + value: '31px 32px 33px', + position: {} + }, + { + type: 'declaration', + property: 'margin', + value: '41px 42px 43px 44px', + position: {} + } + ] + const result = shorthandParser(declarations) + expect(result).eql([ + { + type: 'declaration', + property: 'margin-top', + value: '1px', + position: {} + }, + { + type: 'declaration', + property: 'margin-right', + value: '1px', + position: {} + }, + { + type: 'declaration', + property: 'margin-bottom', + value: '1px', + position: {} + }, + { + type: 'declaration', + property: 'margin-left', + value: '1px', + position: {} + }, + + { + type: 'declaration', + property: 'margin-top', + value: '21px', + position: {} + }, + { + type: 'declaration', + property: 'margin-right', + value: '22px', + position: {} + }, + { + type: 'declaration', + property: 'margin-bottom', + value: '21px', + position: {} + }, + { + type: 'declaration', + property: 'margin-left', + value: '22px', + position: {} + }, + + { + type: 'declaration', + property: 'margin-top', + value: '31px', + position: {} + }, + { + type: 'declaration', + property: 'margin-right', + value: '32px', + position: {} + }, + { + type: 'declaration', + property: 'margin-bottom', + value: '33px', + position: {} + }, + { + type: 'declaration', + property: 'margin-left', + value: '32px', + position: {} + }, + + { + type: 'declaration', + property: 'margin-top', + value: '41px', + position: {} + }, + { + type: 'declaration', + property: 'margin-right', + value: '42px', + position: {} + }, + { + type: 'declaration', + property: 'margin-bottom', + value: '43px', + position: {} + }, + { + type: 'declaration', + property: 'margin-left', + value: '44px', + position: {} + } + ]) + }) }) \ No newline at end of file