From e47cdeed34a5d8a4a759268f1ca99ed5c6faa4ae Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Thu, 10 Jan 2013 16:16:07 +0100 Subject: [PATCH 1/3] Use camelCase for property names; also test for svg-style properties --- index.js | 7 ++- npm-debug.log | 121 ------------------------------------------------ test/index.html | 2 + test/unit.js | 4 ++ 4 files changed, 12 insertions(+), 122 deletions(-) delete mode 100644 npm-debug.log diff --git a/index.js b/index.js index c39ced0..2897df3 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,7 @@ module.exports = style; function style(selector, prop) { var cache = style.cache = style.cache || {} + , prop = camelCase(prop) , cid = selector + ':' + prop; if (cache[cid]) return cache[cid]; @@ -43,4 +44,8 @@ function style(selector, prop) { var ret = getComputedStyle(child)[prop]; document.body.removeChild(root); return cache[cid] = ret; -} \ No newline at end of file +} + +function camelCase(str) { + return str.toLowerCase().replace(/(\-[a-z])/g, function(m){ return m.toUpperCase().replace('-', ''); }); +} diff --git a/npm-debug.log b/npm-debug.log deleted file mode 100644 index 286e1a7..0000000 --- a/npm-debug.log +++ /dev/null @@ -1,121 +0,0 @@ -0 info it worked if it ends with ok -1 verbose cli [ 'node', '/usr/local/bin/npm', 'publish' ] -2 info using npm@1.1.61 -3 info using node@v0.8.6 -4 verbose publish [ '.' ] -5 verbose read json /Users/tj/projects/style-component/package.json -6 verbose cache add [ '.', null ] -7 silly cache add name=undefined spec="." args=[".",null] -8 verbose parsed url { pathname: '.', path: '.', href: '.' } -9 silly lockFile 3a52ce78- . -10 verbose lock . /Users/tj/.npm/3a52ce78-.lock -11 verbose read json package.json -12 verbose tar pack [ '/var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz', -12 verbose tar pack '.' ] -13 verbose tarball /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz -14 verbose folder . -15 info prepublish style@0.0.1 -16 silly lockFile e71fd18f-18454-0-2858116328716278-tmp-tgz /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz -17 verbose lock /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz /Users/tj/.npm/e71fd18f-18454-0-2858116328716278-tmp-tgz.lock -18 silly lockFile e71fd18f-18454-0-2858116328716278-tmp-tgz /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz -19 verbose tar unpack /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/tmp.tgz -20 silly lockFile e213144e-18454-0-2858116328716278-package /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package -21 verbose lock /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package /Users/tj/.npm/e213144e-18454-0-2858116328716278-package.lock -22 silly gunzTarPerm modes [ '755', '644' ] -23 silly gunzTarPerm extractEntry package.json -24 silly gunzTarPerm extractEntry .npmignore -25 silly gunzTarPerm extractEntry index.js -26 silly gunzTarPerm extractEntry build/build.js -27 silly gunzTarPerm extractEntry build/build.css -28 silly gunzTarPerm extractEntry component.json -29 silly gunzTarPerm extractEntry History.md -30 silly gunzTarPerm extractEntry Makefile -31 silly gunzTarPerm extractEntry Readme.md -32 verbose read json /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package/package.json -33 silly lockFile e213144e-18454-0-2858116328716278-package /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package -34 verbose from cache /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package/package.json -35 verbose tar pack [ '/Users/tj/.npm/style/0.0.1/package.tgz', -35 verbose tar pack '/var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package' ] -36 verbose tarball /Users/tj/.npm/style/0.0.1/package.tgz -37 verbose folder /var/folders/xs/_8n8gp157wd_67sn1klcyxwm0000gn/T/npm-1742/1348158018454-0.2858116328716278/package -38 silly lockFile f35b7f29-s-tj-npm-style-0-0-1-package-tgz /Users/tj/.npm/style/0.0.1/package.tgz -39 verbose lock /Users/tj/.npm/style/0.0.1/package.tgz /Users/tj/.npm/f35b7f29-s-tj-npm-style-0-0-1-package-tgz.lock -40 silly lockFile f35b7f29-s-tj-npm-style-0-0-1-package-tgz /Users/tj/.npm/style/0.0.1/package.tgz -41 silly lockFile c0f84ab1-Users-tj-npm-style-0-0-1-package /Users/tj/.npm/style/0.0.1/package -42 verbose lock /Users/tj/.npm/style/0.0.1/package /Users/tj/.npm/c0f84ab1-Users-tj-npm-style-0-0-1-package.lock -43 silly lockFile c0f84ab1-Users-tj-npm-style-0-0-1-package /Users/tj/.npm/style/0.0.1/package -44 verbose tar unpack /Users/tj/.npm/style/0.0.1/package.tgz -45 silly lockFile c0f84ab1-Users-tj-npm-style-0-0-1-package /Users/tj/.npm/style/0.0.1/package -46 verbose lock /Users/tj/.npm/style/0.0.1/package /Users/tj/.npm/c0f84ab1-Users-tj-npm-style-0-0-1-package.lock -47 silly gunzTarPerm modes [ '755', '644' ] -48 silly gunzTarPerm extractEntry package.json -49 silly gunzTarPerm extractEntry .npmignore -50 silly gunzTarPerm extractEntry index.js -51 silly gunzTarPerm extractEntry build/build.js -52 silly gunzTarPerm extractEntry build/build.css -53 silly gunzTarPerm extractEntry component.json -54 silly gunzTarPerm extractEntry History.md -55 silly gunzTarPerm extractEntry Makefile -56 silly gunzTarPerm extractEntry Readme.md -57 verbose read json /Users/tj/.npm/style/0.0.1/package/package.json -58 silly lockFile c0f84ab1-Users-tj-npm-style-0-0-1-package /Users/tj/.npm/style/0.0.1/package -59 silly shasum updated bytes 2154 -60 info shasum cbdde5efdbfaac0b5f3ab9a2f2065946beb22748 -60 info shasum /Users/tj/.npm/style/0.0.1/package.tgz -61 verbose from cache /Users/tj/.npm/style/0.0.1/package/package.json -62 verbose chmod /Users/tj/.npm/style/0.0.1/package.tgz 644 -63 verbose chown /Users/tj/.npm/style/0.0.1/package.tgz [ 501, 20 ] -64 silly lockFile 3a52ce78- . -65 silly publish { name: 'style', -65 silly publish description: 'Style canvas renders using CSS', -65 silly publish version: '0.0.1', -65 silly publish keywords: [ 'css', 'canvas', 'utility' ], -65 silly publish component: { scripts: { 'style/index.js': 'index.js' } }, -65 silly publish readme: '\n# Style\n\n Style Canvas renders using CSS.\n\n## Installation\n\n```\n$ component install component/style\n```\n\n## Example\n\n```css\nbody {\n font-size: 18px;\n}\n.progress {\n background: #fff;\n}\n.progress .percentage {\n color: #ddd;\n}\n```\n\n```js\nstyle(\'.progress\', \'background-color\');\n// => \'rgb(255, 255, 255)\'\n\nstyle(\'.progress .percentage\', \'color\');\n// => \'rgb(221, 221, 221)\'\n\nstyle(\'.progress .percent\', \'font-size\');\n// => \'18px\'\n```\n\n## About\n\n This component exists so that you can influence aspects of your\n Canvas renders using CSS, where style decisions belong. For details\n view this [blog post](http://tjholowaychuk.com/post/6339741902/styling-canvas-drawings-with-css).\n\n## Performance\n\n Generating and computing styles for ~2000 unique selectors in chrome\n takes ~300ms, so be careful if you plan on using this for many _unique_ selectors. Values\n are otherwise cached in an object and can easily operate above 300,000 ops/s.\n\n## License\n\n MIT', -65 silly publish _id: 'style@0.0.1', -65 silly publish dist: { shasum: 'cbdde5efdbfaac0b5f3ab9a2f2065946beb22748' } } -66 verbose url raw style -67 verbose url resolving [ 'https://registry.npmjs.org/', './style' ] -68 verbose url resolved https://registry.npmjs.org/style -69 info trying registry request attempt 1 at 09:20:19 -70 http PUT https://registry.npmjs.org/style -71 http 409 https://registry.npmjs.org/style -72 verbose url raw style -73 verbose url resolving [ 'https://registry.npmjs.org/', './style' ] -74 verbose url resolved https://registry.npmjs.org/style -75 info trying registry request attempt 1 at 09:20:20 -76 http GET https://registry.npmjs.org/style -77 http 200 https://registry.npmjs.org/style -78 verbose url raw style/0.0.1/-tag/latest -79 verbose url resolving [ 'https://registry.npmjs.org/', './style/0.0.1/-tag/latest' ] -80 verbose url resolved https://registry.npmjs.org/style/0.0.1/-tag/latest -81 info trying registry request attempt 1 at 09:20:20 -82 http PUT https://registry.npmjs.org/style/0.0.1/-tag/latest -83 http 403 https://registry.npmjs.org/style/0.0.1/-tag/latest -84 error publish Error sending version data -85 error Error: forbidden user: tjholowaychuk not authorized to modify style -85 error Changed: description "color in your node.js console, without monkeypatching" -> "Style canvas renders using CSS" -85 error Changed: dist-tags.latest "0.0.3" -> "0.0.1" -85 error Added: versions.0.0.1 -85 error Changed: time.modified "2012-06-26T12:59:35.875Z" -> "2012-09-20T16:20:21.740Z" -85 error Added: time.0.0.1: style/0.0.1/-tag/latest -85 error at RegClient. (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:259:14) -85 error at Request.init.self.callback (/usr/local/lib/node_modules/npm/node_modules/request/main.js:120:22) -85 error at Request.EventEmitter.emit (events.js:91:17) -85 error at Request. (/usr/local/lib/node_modules/npm/node_modules/request/main.js:648:16) -85 error at Request.EventEmitter.emit (events.js:115:20) -85 error at IncomingMessage.Request.start.self.req.self.httpModule.request.buffer (/usr/local/lib/node_modules/npm/node_modules/request/main.js:610:14) -85 error at IncomingMessage.EventEmitter.emit (events.js:115:20) -85 error at IncomingMessage._emitEnd (http.js:366:10) -85 error at HTTPParser.parserOnMessageComplete [as onMessageComplete] (http.js:149:23) -85 error at CleartextStream.socketOnData [as ondata] (http.js:1366:20) -86 error If you need help, you may report this log at: -86 error -86 error or email it to: -86 error -87 error System Darwin 11.3.0 -88 error command "node" "/usr/local/bin/npm" "publish" -89 error cwd /Users/tj/projects/style-component -90 error node -v v0.8.6 -91 error npm -v 1.1.61 -92 verbose exit [ 1, true ] diff --git a/test/index.html b/test/index.html index 6788f8a..efd7826 100644 --- a/test/index.html +++ b/test/index.html @@ -12,6 +12,8 @@ } .progress .percent { color: #ddd; + stroke: #ddd; + stroke-linejoin: miter; } .progress .ring { background: #ddd; diff --git a/test/unit.js b/test/unit.js index ce52007..f77ced1 100644 --- a/test/unit.js +++ b/test/unit.js @@ -15,4 +15,8 @@ describe('style(selector, prop)', function(){ assert('rgb(221, 221, 221)' == style('.progress .percent', 'color')); assert('18px' == style('.progress .percent', 'font-size')); }) + it('should also support svg-style properties', function(){ + assert('rgb(221, 221, 221)' == style('.progress .percent', 'stroke')); + assert('miter' == style('.progress .percent', 'stroke-linejoin')); + }) }) From 5f5ca143177e7cb0d17e837954e66b7af5024bbd Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Tue, 12 Feb 2013 12:49:31 +0100 Subject: [PATCH 2/3] use getPropertyValue instead of camelCase --- index.js | 7 +------ test/index.html | 1 - test/unit.js | 18 +++++++++++------- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/index.js b/index.js index 2897df3..544317a 100644 --- a/index.js +++ b/index.js @@ -16,7 +16,6 @@ module.exports = style; function style(selector, prop) { var cache = style.cache = style.cache || {} - , prop = camelCase(prop) , cid = selector + ':' + prop; if (cache[cid]) return cache[cid]; @@ -41,11 +40,7 @@ function style(selector, prop) { } document.body.appendChild(root); - var ret = getComputedStyle(child)[prop]; + var ret = getComputedStyle(child).getPropertyValue(prop); document.body.removeChild(root); return cache[cid] = ret; } - -function camelCase(str) { - return str.toLowerCase().replace(/(\-[a-z])/g, function(m){ return m.toUpperCase().replace('-', ''); }); -} diff --git a/test/index.html b/test/index.html index efd7826..0506fbd 100644 --- a/test/index.html +++ b/test/index.html @@ -12,7 +12,6 @@ } .progress .percent { color: #ddd; - stroke: #ddd; stroke-linejoin: miter; } .progress .ring { diff --git a/test/unit.js b/test/unit.js index f77ced1..dd6aaa3 100644 --- a/test/unit.js +++ b/test/unit.js @@ -5,18 +5,22 @@ var style = require('style'); -function assert(expr) { - if (!expr) throw new Error('assertion failed'); +function eql(expected, actual) { + if (expected == actual) + return + var err = new Error('"' + actual + '" should equal "' + expected + '"'); + err.expected = expected; + err.actual = actual; + throw err; } describe('style(selector, prop)', function(){ it('should support styling faux elements', function(){ - assert('rgb(255, 255, 255)' == style('.progress', 'background-color')); - assert('rgb(221, 221, 221)' == style('.progress .percent', 'color')); - assert('18px' == style('.progress .percent', 'font-size')); + eql('rgb(255, 255, 255)', style('.progress', 'background-color')); + eql('rgb(221, 221, 221)', style('.progress .percent', 'color')); + eql('18px', style('.progress .percent', 'font-size')); }) it('should also support svg-style properties', function(){ - assert('rgb(221, 221, 221)' == style('.progress .percent', 'stroke')); - assert('miter' == style('.progress .percent', 'stroke-linejoin')); + eql('miter', style('.progress .percent', 'stroke-linejoin')); }) }) From 2b7ac851b683df8b2c2fa83b04a2c0dd21163634 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Tue, 12 Feb 2013 13:21:53 +0100 Subject: [PATCH 3/3] support for querying multiple props at once --- index.js | 31 +++++++++++++++++++++++++------ test/unit.js | 5 +++++ 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 544317a..e0dba96 100644 --- a/index.js +++ b/index.js @@ -9,16 +9,31 @@ module.exports = style; * Return the style for `prop` using the given `selector`. * * @param {String} selector - * @param {String} prop - * @return {String} + * @param {String|Array} prop + * @return {String|Object} * @api public */ function style(selector, prop) { var cache = style.cache = style.cache || {} - , cid = selector + ':' + prop; + , arr = Array.isArray(prop) + , props = arr ? prop : [prop]; - if (cache[cid]) return cache[cid]; + var cids = props.map(function (prop) { + return selector + ':' + prop; + }); + + var cached = {}; + var missing = []; + props.forEach(function (prop) { + var cid = selector + ':' + prop; + if (cache[cid]) + cached[prop] = cache[cid]; + else + missing.push(prop); + }); + + if (!missing.length) return arr ? cached : cached[prop]; var parts = selector.split(/ +/) , len = parts.length @@ -40,7 +55,11 @@ function style(selector, prop) { } document.body.appendChild(root); - var ret = getComputedStyle(child).getPropertyValue(prop); + var styles = getComputedStyle(child); + missing.forEach(function (prop) { + var cid = selector + ':' + prop; + cached[prop] = cache[cid] = styles.getPropertyValue(prop); + }); document.body.removeChild(root); - return cache[cid] = ret; + return arr ? cached : cached[prop]; } diff --git a/test/unit.js b/test/unit.js index dd6aaa3..ecbbec0 100644 --- a/test/unit.js +++ b/test/unit.js @@ -23,4 +23,9 @@ describe('style(selector, prop)', function(){ it('should also support svg-style properties', function(){ eql('miter', style('.progress .percent', 'stroke-linejoin')); }) + it('should support querying multiple props at once', function(){ + var props = style('.progress .percent', ['font-size', 'color']); + eql('18px', props['font-size']); + eql('rgb(221, 221, 221)', props['color']); + }) })