├── .gitignore ├── LICENSE ├── README.md ├── package.json └── src ├── NestedStyleSheet.js └── NestedStyleSheetValidation.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Peter Janak 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-nested-stylesheet 2 | 3 | Nestable stylesheets for react-native. 4 | 5 | ## Installation 6 | `npm install react-native-nested-stylesheet` 7 | 8 | ## Usage notes 9 | This plugin will allow you to create styles of the following format: 10 | 11 | ``` 12 | ... 13 | namespace: { 14 | styleA: {...}, 15 | styleB: {...}, 16 | }, 17 | ... 18 | ``` 19 | 20 | With the plain `StyleSheet` API you can only create stylesheets with one level. It should noted that `NestedStyleSheet` does not create cascading selectors. This is merely to allow namespacing of styles (e.g. containing the styles for all items in a specific `ListView`). 21 | 22 | Note: You are only allowed to include other objects within a nested style. You cannot define rules at the namespace level. 23 | 24 | ## Usage Example 25 | ``` 26 | var React = require('react-native'); 27 | var NestedStyleSheet = require('react-native-nested-stylesheet'); 28 | 29 | var { 30 | View, 31 | Text, 32 | Image, 33 | } = React; 34 | 35 | var styles = NestedStyleSheet.create({ 36 | cells: { 37 | container: { 38 | flex: 1, 39 | flexDirection: 'row', 40 | alignItems: 'center', 41 | }, 42 | thumbnail: { 43 | width: 53, 44 | height: 81, 45 | }, 46 | content: { 47 | flex: 1, 48 | }, 49 | }, 50 | }); 51 | 52 | var Demo = React.createClass({ 53 | render: function() { 54 | return ( 55 | 56 | 58 | ... 59 | 60 | 61 | ); 62 | }, 63 | }); 64 | 65 | module.exports = Demo; 66 | ``` 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-nested-stylesheet", 3 | "version": "0.0.8", 4 | "description": "Nestable stylesheets for react-native.", 5 | "keywords": ["react-component", "react-native", "react", "ios", "style", "stylesheet", "react native"], 6 | "bugs": "https://github.com/pjjanak/react-native-nested-stylesheets/issues", 7 | "license": "MIT", 8 | "author": { 9 | "name": "Peter Janak" 10 | }, 11 | "main": "./src/NestedStyleSheet.js", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/pjjanak/react-native-nested-stylesheets.git" 15 | }, 16 | "dependencies": { 17 | "react-native": "^0.3.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/NestedStyleSheet.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var StyleSheetRegistry = require('StyleSheetRegistry'); 4 | var StyleSheetValidation = require('StyleSheetValidation'); 5 | 6 | var NestedStyleSheetValidation = require('./NestedStyleSheetValidation'); 7 | 8 | class NestedStyleSheet { 9 | static create(obj: {[key: string]: any}): {[key: string]: number} { 10 | var result = {}; 11 | for (var key in obj) { 12 | var styleObj = obj[key]; 13 | var styleObjKeys = Object.keys(styleObj); 14 | 15 | if (Object.prototype.toString.call(styleObj[styleObjKeys[0]]) === '[object Object]') { 16 | NestedStyleSheetValidation.validateIsNestedStyle(styleObj); 17 | result[key] = NestedStyleSheet.create(styleObj); 18 | } else { 19 | StyleSheetValidation.validateStyle(key, obj); 20 | result[key] = StyleSheetRegistry.registerStyle(styleObj); 21 | } 22 | } 23 | return result; 24 | } 25 | } 26 | 27 | 28 | module.exports = NestedStyleSheet; 29 | -------------------------------------------------------------------------------- /src/NestedStyleSheetValidation.js: -------------------------------------------------------------------------------- 1 | var invariant = require('invariant'); 2 | 3 | class NestedStyleSheetValidation { 4 | static validateIsNestedStyle(nestedStyles) { 5 | if (!__DEV__) { 6 | return; 7 | } 8 | 9 | // if you are nesting styles no parent element may have anything but 10 | // objects ({}) as children 11 | for (var prop in nestedStyles) { 12 | var styleObj = nestedStyles[prop]; 13 | if (Object.prototype.toString.call(styleObj) !== '[object Object]') { 14 | styleError('"' + styleObj + '" is not a plain Javascript object', prop, 15 | 'StyleSheet ' + prop, 'Parents of nested styles can only have plain ' 16 | + 'Javascript objects ({...}) as children'); 17 | } 18 | } 19 | } 20 | } 21 | 22 | var styleError = function(message1, style, caller?, message2?) { 23 | invariant( 24 | false, 25 | message1 + '\n' + (caller || '<>') + ': ' + 26 | JSON.stringify(style, null, ' ') + (message2 || '') 27 | ); 28 | }; 29 | 30 | module.exports = NestedStyleSheetValidation; 31 | --------------------------------------------------------------------------------