Merge pull request styled-components#28 from styled-components/bool-values

Allow boolean values in CSS (fixes styled-components#26)

Author: mxstbr

src/index.js

@@ -5,12 +5,20 @@ const transforms = require('./transforms');
 const TokenStream = require('./TokenStream');
 
 // Note if this is wrong, you'll need to change tokenTypes.js too
-const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/;
+const numberOrLengthRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?:px)?$/i;
+const boolRe = /^true|false$/i;
 
 // Undocumented export
 export const transformRawValue = (input) => {
-  const value = input.trim().match(numberOrLengthRe);
-  return value ? Number(value[1]) : input;
+  const value = input.trim();
+
+  const numberMatch = value.match(numberOrLengthRe);
+  if (numberMatch) return Number(numberMatch[1]);
+
+  const boolMatch = input.match(boolRe);
+  if (boolMatch) return boolMatch[0].toLowerCase() === 'true';
+
+  return value;
 };
 
 const baseTransformShorthandValue = (propName, inputValue) => {

src/index.test.js

@@ -17,6 +17,18 @@ it('allows pixels in unspecialized transform', () => runTest([
   ['top', '0px'],
 ], { top: 0 }));
 
+it('allows boolean values values', () => runTest([
+  ['boolTrue1', 'true'],
+  ['boolTrue2', 'TRUE'],
+  ['boolFalse1', 'false'],
+  ['boolFalse2', 'FALSE'],
+], {
+  boolTrue1: true,
+  boolTrue2: true,
+  boolFalse1: false,
+  boolFalse2: false,
+}));
+
 it('allows percent in unspecialized transform', () => runTest([
   ['top', '0%'],
 ], { top: '0%' }));