Position pseudo classes implicitly calculated

__tests__/__snapshots__/wrap.test.js.snap

@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`wrap should pass all properties to wrapped component and add styles to the view 1`] = `
 <View
   className="direct"
@@ -6,7 +8,8 @@ exports[`wrap should pass all properties to wrapped component and add styles to
   prop4="4"
   style={
     Object {
-      "margin": 5
+      "margin": 5,
     }
-  } />
+  }
+/>
 `;

__tests__/rnc.test.js

@@ -7,12 +7,12 @@ global.Promise = require.requireActual('promise');
 describe('React Native CSS Command-line', ()=> {
 
   it("should parse CSS", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style.css', './__tests__/fixtures/style.js', false, true);
+    let data = await css.parse({input: './__tests__/fixtures/style.css'});
     expect(data).toEqual({main: {backgroundColor: '#000'}});
   });
 
   it("shoud parse SCSS", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style.scss', './__tests__/fixtures/stylescss.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style.scss'});
     expect(data).toEqual({
       description: {
         flex: 102,
@@ -33,7 +33,7 @@ describe('React Native CSS Command-line', ()=> {
   });
 
   it("Parse SCSS error", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-20.scss', './__tests__/fixtures/stylescss-20.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-20.scss'});
     expect(data).toEqual({
       maincontainer: {
         flex: 1,
@@ -46,7 +46,7 @@ describe('React Native CSS Command-line', ()=> {
   });
 
   it("Parse SCSS error", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-dorthwein.scss', './__tests__/fixtures/stylescss-dorthwein.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-dorthwein.scss'});
     expect(data).toEqual({
       center: {
         alignItems: 'center',
@@ -58,12 +58,12 @@ describe('React Native CSS Command-line', ()=> {
   });
 
   it("Parse CSS and ignore unsupported property", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-unsupported.scss', './__tests__/fixtures/style-unsupported.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-unsupported.scss'});
     expect(data).toEqual({container: {background: 'white'}});
   });
 
   it("Parse CSS and turn properties into numbers", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-number.scss', './__tests__/fixtures/style-number.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-number.scss'});
     expect(data).toEqual({
       text: {
         fontSize: 12,
@@ -73,7 +73,7 @@ describe('React Native CSS Command-line', ()=> {
   });
 
   it("Regression test for issue #26", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-test.css', './__tests__/fixtures/style-test.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-test.css'});
     expect(data).toEqual({
       "row": {
         "top": 50,
@@ -91,14 +91,18 @@ describe('React Native CSS Command-line', ()=> {
   });
 
   it("Argument --literal generates a javascript literal object", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-20.scss', './__tests__/fixtures/style-test-literal.js', false, true);
+    await css.parse({
+      input: './__tests__/fixtures/style-20.scss',
+      output: './__tests__/fixtures/style-test-literal.js', //actually tests the output
+      objectLiteral: true
+    });
     var styles = require('./fixtures/style-test-literal.js');
     expect(styles.maincontainer.backgroundColor).toEqual("#F5FCFF");
 
   });
 
   it("Parse CSS and expand shorthand properties", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-expand.css', './__tests__/fixtures/style-expand.js', false, false);
+    let data = await css.parse({input: './__tests__/fixtures/style-expand.css'});
     expect(data).toEqual({
       "container": {
         "paddingTop": 10,
@@ -142,8 +146,8 @@ describe('React Native CSS Command-line', ()=> {
     });
   });
 
-  it("Test inheritance CSS", async ()=> {
-    let data = await css.parse('./__tests__/fixtures/style-inherit.css', './__tests__/fixtures/style-inherit.js', false, true, true);
+  it("Test inheritance CSS", ()=> {
+    let data = css.parse({input: './__tests__/fixtures/style-inherit.css', useInheritance: true});
     register(data);
 
     expect(matchRules([{e: 'view', c: ['test']}, {e: 'view', c: ['test']}, {

__tests__/wrap.test.js

@@ -14,7 +14,10 @@ global.Promise = require.requireActual('promise');
 describe('wrap', ()=> {
   it('should pass all properties to wrapped component and add styles to the view', async ()=> {
     //create the style object
-    let styles = await css.parse('./__tests__/fixtures/style-inherit.css', null, false, true, true);
+    let styles = css.parse({
+      input: './__tests__/fixtures/style-inherit.css',
+      useInheritance: true
+    });
 
     //register the global sheet
     register(styles);

babel.js

@@ -0,0 +1,2 @@
+require('babel-polyfill')
+module.exports = require('./build/babelTransform').default;

bin/react-native-css

@@ -21,7 +21,7 @@ if(inputOutput) {
   var input = path.resolve(process.cwd(), inputArgs);
   var output = path.resolve(process.cwd(), outputArgs);
 
-  css.parse(input, output, prettyPrint, literalObject, useInheritance);
+  css.parse({input:input, output:output, prettyPrint:prettyPrint, literalObject:literalObject, useInheritance:useInheritance});
 
   if(watch) {
     console.log('Watching for changes on:'.green, inputArgs);
@@ -31,7 +31,7 @@ if(inputOutput) {
       ignored: /[\/\\]\./, persistent: true
     }).on('change', function(path) {
       console.log('File', inputArgs, 'has been changed'.green);
-      css.parse(input, output, prettyPrint, literalObject, useInheritance);
+      css.parse({input:input, output:output, prettyPrint:prettyPrint, literalObject:literalObject, useInheritance:useInheritance});
     });
   }
 }else if(help ) {

build/babelTransform.js

@@ -0,0 +1,44 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function(_ref){var t=_ref.types;
+return{
+visitor:{
+ImportDeclaration:function ImportDeclaration(transformPath,_ref2){var file=_ref2.file;
+var resolvePath=transformPath.node.source.value;
+if(resolvePath.startsWith('css!')){
+resolvePath=resolvePath.substr(4);
+var name=resolvePath.replace(/\.\.\/|\.\//g,'').replace(/\//g,'_').split('.')[0];
+var absolutePath=_path2.default.resolve(_path2.default.dirname(file.opts.filename),resolvePath),
+relativePath=_path2.default.dirname(absolutePath)+'/_transformed/'+name+'.js';
+startTransform(absolutePath,_path2.default.resolve(relativePath));
+
+var expression=t.callExpression(t.memberExpression(t.callExpression(t.identifier('require'),[t.stringLiteral('react-native-css')]),t.identifier('register')),[t.callExpression(t.identifier('require'),[_path2.default.resolve(relativePath)])]);
+transformPath.replaceWith(expression);
+}
+}}};
+
+
+};var _index=require('./index');var _index2=_interopRequireDefault(_index);var _path=require('path');var _path2=_interopRequireDefault(_path);var _child_process=require('child_process');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var css=new _index2.default();function runWatcher(input,output){(0,_child_process.spawn)('node',['./watcher.js',input,output],{detached:true,cwd:__dirname});}function startTransform(input,output){css.parse({input:input,output:output,useInheritance:true});if(process.env.BABEL_ENV==='development'){runWatcher(input,output);}return true;}

build/client.js

@@ -0,0 +1,80 @@
+var _reactNative=require("react-native");var _reactNative2=_interopRequireDefault(_reactNative);
+var _css=require("./css");var _css2=_interopRequireDefault(_css);
+var _wrap=require("./wrap");var _wrap2=_interopRequireDefault(_wrap);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
+
+
+var componentsToWrap=["ActivityIndicator",
+"ActivityIndicatorIOS",
+"ART",
+"DatePickerIOS",
+"DrawerLayoutAndroid",
+"Image",
+"ImageEditor",
+"ImageStore",
+"KeyboardAvoidingView",
+"ListView",
+"MapView",
+"Modal",
+"Navigator",
+"NavigatorIOS",
+"Picker",
+"PickerIOS",
+"ProgressBarAndroid",
+"ProgressViewIOS",
+"ScrollView",
+"SegmentedControlIOS",
+"Slider",
+"SliderIOS",
+"SnapshotViewIOS",
+"Switch",
+"RecyclerViewBackedScrollView",
+"RefreshControl",
+"StatusBar",
+"SwipeableListView",
+"SwitchAndroid",
+"SwitchIOS",
+"TabBarIOS",
+"Text",
+"TextInput",
+"ToastAndroid",
+"ToolbarAndroid",
+"Touchable",
+"TouchableHighlight",
+"TouchableNativeFeedback",
+"TouchableOpacity",
+"TouchableWithoutFeedback",
+"View",
+"ViewPagerAndroid",
+"WebView"];
+
+
+var StyledComponents={};
+var wrappedComponents={};
+
+componentsToWrap.forEach(function(name){
+Object.defineProperty(StyledComponents,name,{
+get:function get(){
+return wrappedComponents[name]||(wrappedComponents[name]=(0,_wrap2.default)(name,_reactNative2.default[name]));
+}});
+
+});
+
+
+
+Object.keys(_reactNative2.default).forEach(function(name){
+if(componentsToWrap.indexOf(name)===-1){
+Object.defineProperty(StyledComponents,name,{
+get:function get(){
+return _reactNative2.default[name];
+}});
+
+}
+});
+
+
+StyledComponents.unregister=_css.unregister;
+StyledComponents.register=_css.register;
+StyledComponents.css=_css2.default;
+StyledComponents.wrap=_wrap2.default;
+
+module.exports=StyledComponents;