Merge pull request #16 from styled-components/blacklist-shorthands

Allow blacklisting property shorthands

Author: jacobp100

README.md

@@ -93,6 +93,13 @@ getPropertyName('border-width'); // => 'borderWidth'
 getStylesForProperty('borderWidth', '1 0 2 0'); // => { borderTopWidth: 1, ... }
 ```
 
+Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to `transform`.
+
+```js
+transform([['border-radius', '50']], ['borderRadius']);
+// { borderRadius: 50 } rather than { borderTopLeft: ... }
+```
+
 ## License
 
 Licensed under the MIT License, Copyright © 2016 Jacob Parker and Maximilian Stoiber.

src/index.js

@@ -27,10 +27,10 @@ const transformRawValue = input => (
     : input
 );
 
-export const getStylesForProperty = (propName, inputValue) => {
+export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
   const value = inputValue.trim();
 
-  const propValue = (transforms.indexOf(propName) !== -1)
+  const propValue = (allowShorthand && transforms.indexOf(propName) !== -1)
     ? (new nearley.Parser(grammar.ParserRules, propName).feed(value).results[0])
     : transformRawValue(value);
 
@@ -41,9 +41,9 @@ export const getStylesForProperty = (propName, inputValue) => {
 
 export const getPropertyName = camelizeStyleName;
 
-export default rules => rules.reduce((accum, rule) => (
-  Object.assign(accum, getStylesForProperty(
-    getPropertyName(rule[0]),
-    rule[1],
-  ))
-), {});
+export default (rules, shorthandBlacklist = []) => rules.reduce((accum, rule) => {
+  const propertyName = getPropertyName(rule[0]);
+  const value = rule[1];
+  const allowShorthand = shorthandBlacklist.indexOf(propertyName) === -1;
+  return Object.assign(accum, getStylesForProperty(propertyName, value, allowShorthand));
+}, {});

src/index.test.js

@@ -278,3 +278,8 @@ it('omits line height if not specified', () => runTest([
   fontStyle: 'normal',
   fontVariant: [],
 }));
+
+it('allows blacklisting shorthands', () => {
+  const actualStyles = transformCss([['border-radius', '50']], ['borderRadius']);
+  expect(actualStyles).toEqual({ borderRadius: 50 });
+});