react-native-style-parser
Command line interface transform css files to javascript object
You want create a app react-native but write you style inside javascript object is not you enjoy ? Now you can convert css files to javascript object.
installation
Can local or global install this package
> npm install --save-dev react-native-style-parser
or with yarn
> yard add react-native-style-parser -D
or global
> npm install --global react-native-style-parser
config
After installation from package.json add key script for access to command line
For check access to command try show version with --version option
> npm run build-style -- --version
file
Can config from JS or JSON file at root
moduleexports = // path to css files entry: "./styles/css/" // path to generate output js file output: "./styles/react/" options: isEs6: true isNoQuote: true isWatch: true isOptimize: false ;
more informations on options
run from config file with
Can generate a preset config file at root with
> react-native-style-parser init
usage
Usage of command line interface is easy and fast,
react-native-style-parser convert class
selectors from css files.
single file
Transform a single file with command line interface from relative path of css file.
> npm run build-style -- ./css/foobar.css to ./react-styles/
If not exists ./react-styles/foobar.js
is auto append.
After below parse javascript object styles at: ./react-styles/foobar.js
directory
Can transform all css files from a folder with command line interface
> npm run build-style -- ./css/ to ./react-styles/
options
Can add behavior with options use --option-name
watch
Option watch allow auto parse after listen change inside a target file.
> npm run build-style -- ./css/ to ./react-styles/ --watch
es6
Option watch generate export with ES6 syntaxe.
Default behavior generate a export with nodejs syntaxe
> npm run build-style -- ./css/ to ./react-styles/ --es6
no-quote
Option no-quote generate property name with no quote. Default behavior generaye single quote.
> npm run build-style -- ./css/ to ./react-styles/ --no-quote
optimize
Option optimize generate a minimified styles for optimization run time, use before switch prod env.
> npm run build-style -- ./css/ to ./react-styles/ --optimize
annotations
Add behavior from pretty annotations
ignore
Skip specific css block
"container": flex: 1 marginTop: 3 marginBottom: 3 marginLeft: 5 marginRight: 5 zIndex: 3 "item": transform: rotate: "8deg" translateX: -10
compose
Annotations compose is a approach of react-native compose
"text": color: "rgb( 42,42,42 )" "title": fontSize: 25 letterSpacing: 9 "super-text": color: "rgb( 42,42,42 )" fontSize: 25 letterSpacing: 9 cursor: pointer
other
For not use double dash option (--) , prepare command from package.json
"script":
Please if you detect undetermined behavior open a issue