https://github.com/unadlib/react-native-css-tree

Inheritable dynamic style tree.
https://github.com/unadlib/react-native-css-tree

Last synced: about 1 year ago
JSON representation

Inheritable dynamic style tree.

• Host: GitHub
• URL: https://github.com/unadlib/react-native-css-tree
• Owner: unadlib
• License: mit
• Created: 2017-07-18T08:38:09.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-03-03T08:31:32.000Z (over 8 years ago)
• Last Synced: 2025-04-10T05:51:29.613Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 144 KB
• Stars: 26
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-css-tree

[![Travis](https://img.shields.io/travis/unadlib/react-native-css-tree.svg)](https://travis-ci.org/unadlib/react-native-css-tree)

[![Coverage Status](https://coveralls.io/repos/github/unadlib/react-native-css-tree/badge.svg?branch=master)](https://coveralls.io/github/unadlib/react-native-css-tree?branch=master)

[![npm](https://img.shields.io/npm/v/react-native-css-tree.svg)](https://www.npmjs.com/package/react-native-css-tree)

[![npm](https://img.shields.io/npm/dt/react-native-css-tree.svg)](https://www.npmjs.com/package/react-native-css-tree)

[![npm](https://img.shields.io/npm/l/react-native-css-tree.svg)](https://www.npmjs.com/package/react-native-css-tree)

This is a react-native style module plug-in that features a modular JSON object tree structure.

### Features

   * Customizable Inheritance Middleware.

   * Style tree namespaces.

   * Global variables.

   * Priority inheritance.

   * Functional CSS.

### Installation

```shell

npm install --save react-native-css-tree

```

### Usage

```javascript

import cssTree from 'react-native-css-tree';

const styles = cssTree({ //globalStyle

    grid:10,

    base:{

        size: 10,

    }

})((key, parent, sub)=>{ //middleware

    return sub;

})({

    container:{

        flex: 1,

        margin: "$grid",

        padding: 5,

        _box:{

            height: 100,

        },

        text:(color)=>({

            color,

            fontSize: "$base.size"

        })

    },

});

    

```

### Configuration

    Styles = cssTree(GlobalStyle)(Middleware)(Style);

* GlobalStyle is used to configure global theme styles.

* Middleware supports multiple middleware functions.

* Style is original style tree:

    * `$` reference variable, and support the operation.

    *  If use `_` As a key prefix , it inherits all of the style properties of the parent.

### TODO

- [ ] support combine `padding/margin/border/box-shadow/background`