css-to-react-native - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

dist/index.js

@@ -18,2 +18,4 @@ 'use strict';
 var boolRe = /^true|false$/i;
+var nullRe = /^null$/i;
+var undefinedRe = /^undefined$/i;
 
@@ -30,2 +32,8 @@ // Undocumented export
 
+  var nullMatch = input.match(nullRe);
+  if (nullMatch !== null) return null;
+
+  var undefinedMatch = input.match(undefinedRe);
+  if (undefinedMatch !== null) return undefined;
+
   return value;
@@ -32,0 +40,0 @@ };

dist/TokenStream.js

@@ -7,2 +7,3 @@ 'use strict';
 
+var SYMBOL_BASE_MATCH = 'SYMBOL_BASE_MATCH';
 var SYMBOL_MATCH = 'SYMBOL_MATCH';
@@ -26,8 +27,8 @@
   }, {
-    key: 'lookahead',
-    value: function lookahead() {
+    key: 'lookAhead',
+    value: function lookAhead() {
       return new TokenStream(this.nodes.slice(1), this.parent);
     }
   }, {
-    key: SYMBOL_MATCH,
+    key: SYMBOL_BASE_MATCH,
     value: function value() {
@@ -41,9 +42,3 @@ var node = this.node;
         var value = tokenDescriptor(node);
-
-        if (value !== null) {
-          this.nodes = this.nodes.slice(1);
-          this.lastFunction = null;
-          this.lastValue = value;
-          return value;
-        }
+        if (value !== null) return value;
       }
@@ -54,2 +49,17 @@
   }, {
+    key: SYMBOL_MATCH,
+    value: function value() {
+      var value = this[SYMBOL_BASE_MATCH].apply(this, arguments);
+      if (value === null) return null;
+      this.nodes = this.nodes.slice(1);
+      this.lastFunction = null;
+      this.lastValue = value;
+      return value;
+    }
+  }, {
+    key: 'test',
+    value: function test() {
+      return this[SYMBOL_BASE_MATCH].apply(this, arguments) !== null;
+    }
+  }, {
     key: 'matches',
@@ -67,4 +77,4 @@ value: function matches() {
   }, {
-    key: 'matchFunction',
-    value: function matchFunction() {
+    key: 'matchesFunction',
+    value: function matchesFunction() {
       var node = this.node;
@@ -81,3 +91,3 @@ if (node.type !== 'function') return null;
     value: function expectFunction() {
-      var value = this.matchFunction();
+      var value = this.matchesFunction();
       if (value !== null) return value;
@@ -84,0 +94,0 @@ return this.throw();

dist/transforms/flex.js

@@ -17,2 +17,4 @@ 'use strict';
 
+var FLEX_BASIS_AUTO = {}; // Used for reference equality
+
 module.exports = function (tokenStream) {
@@ -26,4 +28,3 @@ var flexGrow = void 0;
     return { $merge: { flexGrow: 0, flexShrink: 0 } };
-  } else if (tokenStream.matches(AUTO)) {
-    tokenStream.expectEmpty();
+  } else if (tokenStream.test(AUTO) && !tokenStream.lookAhead().hasTokens()) {
     return { $merge: { flexGrow: 1, flexShrink: 1 } };
@@ -39,3 +40,3 @@ }
 
-      if (tokenStream.lookahead().matches(NUMBER)) {
+      if (tokenStream.lookAhead().matches(NUMBER)) {
         tokenStream.expect(SPACE);
@@ -46,2 +47,4 @@ flexShrink = tokenStream.expect(NUMBER);
       flexBasis = tokenStream.lastValue;
+    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+      flexBasis = FLEX_BASIS_AUTO;
     } else {
@@ -60,3 +63,3 @@ tokenStream.throw();
 
-  return { $merge: { flexGrow: flexGrow, flexShrink: flexShrink, flexBasis: flexBasis } };
+  return flexBasis !== FLEX_BASIS_AUTO ? { $merge: { flexGrow: flexGrow, flexShrink: flexShrink, flexBasis: flexBasis } } : { $merge: { flexGrow: flexGrow, flexShrink: flexShrink } };
 };

dist/transforms/index.js

@@ -7,2 +7,3 @@ 'use strict';
 
+var boxShadow = require('./boxShadow');
 var flex = require('./flex');
@@ -78,2 +79,3 @@ var font = require('./font');
   borderWidth: borderWidth,
+  boxShadow: boxShadow,
   flex: flex,
@@ -80,0 +82,0 @@ flexFlow: flexFlow,

package.json

 {
   "name": "css-to-react-native",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Convert CSS text to a React Native stylesheet object",
@@ -12,2 +12,6 @@ "main": "dist/index.js",
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "repository": {
@@ -14,0 +18,0 @@ "type": "git",

README.md

@@ -66,2 +66,4 @@ # css-to-react-native
 
+There is also support for the `box-shadow` shorthand, and this converts into `shadow-` properties. Note that these only work on iOS.
+
 #### Shorthand Notes
@@ -73,3 +75,3 @@
 
-The API is mostly for implementors. However, the main API may be useful for non-impmentors. The main API is,
+The API is mostly for implementors. However, the main API may be useful for non-implementors. The main API is,
 
@@ -76,0 +78,0 @@ ```js

src/index.js

@@ -10,2 +10,4 @@ /* eslint-disable no-param-reassign */
 const boolRe = /^true|false$/i;
+const nullRe = /^null$/i;
+const undefinedRe = /^undefined$/i;
 
@@ -22,2 +24,8 @@ // Undocumented export
 
+  const nullMatch = input.match(nullRe);
+  if (nullMatch !== null) return null;
+
+  const undefinedMatch = input.match(undefinedRe);
+  if (undefinedMatch !== null) return undefined;
+
   return value;
@@ -24,0 +32,0 @@ };

src/index.test.js

@@ -20,3 +20,3 @@ /* global jest it, expect */
 
-it('allows boolean values values', () => runTest([
+it('allows boolean values', () => runTest([
   ['boolTrue1', 'true'],
@@ -33,2 +33,18 @@ ['boolTrue2', 'TRUE'],
 
+it('allows null values', () => runTest([
+  ['null1', 'null'],
+  ['null2', 'NULL'],
+], {
+  null1: null,
+  null2: null,
+}));
+
+it('allows undefined values', () => runTest([
+  ['undefined1', 'undefined'],
+  ['undefined2', 'UNDEFINED'],
+], {
+  undefined1: undefined,
+  undefined2: undefined,
+}));
+
 it('allows percent in unspecialized transform', () => runTest([
@@ -266,2 +282,18 @@ ['top', '0%'],
 
+it('transforms flex shorthand with flex-basis set to auto', () => runTest([
+  ['flex', '0 1 auto'],
+], { flexGrow: 0, flexShrink: 1 }));
+
+it('transforms flex shorthand with flex-basis set to auto appearing first', () => runTest([
+  ['flex', 'auto 0 1'],
+], { flexGrow: 0, flexShrink: 1 }));
+
+it('transforms flex auto keyword', () => runTest([
+  ['flex', 'auto'],
+], { flexGrow: 1, flexShrink: 1 }));
+
+it('transforms flex none keyword', () => runTest([
+  ['flex', 'none'],
+], { flexGrow: 0, flexShrink: 0 }));
+
 it('transforms flexFlow shorthand with two values', () => runTest([
@@ -432,2 +464,44 @@ ['flex-flow', 'column wrap'],
 
+it('transforms box-shadow into shadow- properties', () => runTest([
+  ['box-shadow', '10px 20px 30px red'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 30,
+  shadowColor: 'red',
+}));
+
+it('transforms box-shadow without blur-radius', () => runTest([
+  ['box-shadow', '10px 20px red'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'red',
+}));
+
+it('transforms box-shadow without color', () => runTest([
+  ['box-shadow', '10px 20px red'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'red',
+}));
+
+it('transforms box-shadow without blur-radius, color', () => runTest([
+  ['box-shadow', '10px 20px'],
+], {
+  shadowOffset: { width: 10, height: 20 },
+  shadowRadius: 0,
+  shadowColor: 'black',
+}));
+
+it('transforms box-shadow enforces offset to be present', () => {
+  expect(() => transformCss([['box-shadow', 'red']]))
+    .toThrow('Failed to parse declaration "boxShadow: red"');
+});
+
+it('transforms box-shadow and enforces offset-y if offset-x present', () => {
+  expect(() => transformCss([['box-shadow', '10px']]))
+    .toThrow('Failed to parse declaration "boxShadow: 10px"');
+});
+
 it('allows blacklisting shorthands', () => {
@@ -434,0 +508,0 @@ const actualStyles = transformCss([['border-radius', '50']], ['borderRadius']);

src/TokenStream.js

@@ -0,1 +1,2 @@
+const SYMBOL_BASE_MATCH = 'SYMBOL_BASE_MATCH';
 const SYMBOL_MATCH = 'SYMBOL_MATCH';
@@ -19,7 +20,7 @@
 
-  lookahead() {
+  lookAhead() {
     return new TokenStream(this.nodes.slice(1), this.parent);
   }
 
-  [SYMBOL_MATCH](...tokenDescriptors) {
+  [SYMBOL_BASE_MATCH](...tokenDescriptors) {
     const node = this.node;
@@ -32,9 +33,3 @@
       const value = tokenDescriptor(node);
-
-      if (value !== null) {
-        this.nodes = this.nodes.slice(1);
-        this.lastFunction = null;
-        this.lastValue = value;
-        return value;
-      }
+      if (value !== null) return value;
     }
@@ -45,2 +40,15 @@
 
+  [SYMBOL_MATCH](...tokenDescriptors) {
+    const value = this[SYMBOL_BASE_MATCH](...tokenDescriptors);
+    if (value === null) return null;
+    this.nodes = this.nodes.slice(1);
+    this.lastFunction = null;
+    this.lastValue = value;
+    return value;
+  }
+
+  test(...tokenDescriptors) {
+    return this[SYMBOL_BASE_MATCH](...tokenDescriptors) !== null;
+  }
+
   matches(...tokenDescriptors) {
@@ -56,3 +64,3 @@ return this[SYMBOL_MATCH](...tokenDescriptors) !== null;
 
-  matchFunction() {
+  matchesFunction() {
     const node = this.node;
@@ -68,3 +76,3 @@ if (node.type !== 'function') return null;
   expectFunction() {
-    const value = this.matchFunction();
+    const value = this.matchesFunction();
     if (value !== null) return value;
@@ -71,0 +79,0 @@ return this.throw();

src/transforms/flex.js

@@ -9,2 +9,4 @@ const { tokens } = require('../tokenTypes');
 
+const FLEX_BASIS_AUTO = {}; // Used for reference equality
+
 module.exports = (tokenStream) => {
@@ -18,4 +20,3 @@ let flexGrow;
     return { $merge: { flexGrow: 0, flexShrink: 0 } };
-  } else if (tokenStream.matches(AUTO)) {
-    tokenStream.expectEmpty();
+  } else if (tokenStream.test(AUTO) && !tokenStream.lookAhead().hasTokens()) {
     return { $merge: { flexGrow: 1, flexShrink: 1 } };
@@ -31,3 +32,3 @@ }
 
-      if (tokenStream.lookahead().matches(NUMBER)) {
+      if (tokenStream.lookAhead().matches(NUMBER)) {
         tokenStream.expect(SPACE);
@@ -38,2 +39,4 @@ flexShrink = tokenStream.expect(NUMBER);
       flexBasis = tokenStream.lastValue;
+    } else if (flexBasis === undefined && tokenStream.matches(AUTO)) {
+      flexBasis = FLEX_BASIS_AUTO;
     } else {
@@ -52,3 +55,5 @@ tokenStream.throw();
 
-  return { $merge: { flexGrow, flexShrink, flexBasis } };
+  return flexBasis !== FLEX_BASIS_AUTO
+    ? { $merge: { flexGrow, flexShrink, flexBasis } }
+    : { $merge: { flexGrow, flexShrink } };
 };

src/transforms/index.js

 const { regExpToken, tokens } = require('../tokenTypes');
+const boxShadow = require('./boxShadow');
 const flex = require('./flex');
@@ -59,2 +60,3 @@ const font = require('./font');
   borderWidth,
+  boxShadow,
   flex,
@@ -61,0 +63,0 @@ flexFlow,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1554

increased by13.35%

Number of lines in readme file

110

increased by1.85%

Worsened metrics

Total package byte prevSize

61518

decreased by-63.76%

Number of package files

24

decreased by-4%

No dependency changes