raphamorim / native-css

Convert pure CSS to React Style or javascript literal objects.

native-css

Convert pure CSS to javascript literal objects or React Style.

Before Anything!

This tool believes in this semantic for CSS: HTML semantics and front-end architecture

'Cause of this, all ids and inheritance relationships are converted to classes.

Install

Verify if you have node and npm installed.

As CLI

$ npm install -g native-css

As Node Module

$ npm install native-css

CLI Usage

Params: input (required), output (optional)

$ native-css <input> <output>

Example

Input CSS Example:

.taxi {
  background-color: #F8F8F8;
  color: #999;
}

#car {
  color: blue;
}

Convert CSS to React Format

Using:

$ native-css <input> <output> --react

Generate this as output (JS format):

var styles = StyleSheet.create({
  taxi: {
    color: '#999',
    backgroundColor: '#F8F8F8'
  },
  car: {
	color: 'blue';
  }
});

Convert CSS to Literal JS object

Using, but without react flag:

$ native-css <input> <output>

Generate this as output (JS format):

styles: {
  taxi: {
    color: '#999',
    backgroundColor: '#F8F8F8'
  },
  car: {
	color: 'blue';
  }
}

Inherent and Parents

As stated, this tool believes and follows a specific semantic for CSS. Therefore in these cases, exists a change in nomenclature. Example:

Input File (style.css)

.any.element {
  color: red;
}

.parent .child {
  color: orange;
}

.parent  .child2 {
  color: blue;
}

Output File (style.js)

any_element: { 
  color: 'red' 
},
parent__child: { 
  color: 'orange' 
},
parent__child2: { 
  color: 'blue' 
}

Media Queries

Input File (style.css):

@media screen and (min-width: 1020px){
  body .container { 
    width: 1020px !important
  }
}

@media (min-width: 768px){
  body .container {
    width: 748px !important;
    box-sizing: 'all'
  }
}

Output File (style.js):

'@media screen and (min-width:1020px)': { 
  __expression__: 'screen and (min-width:1020px)',
  body__container: { 
    width: '1020px !important' 
  } 
},
'@media (min-width:768px)': { 
  __expression__: '(min-width:768px)',
  body__container: { 
    width: '748px !important',
    boxSizing: 'all'
  } 
}

Module Usage

supported input types: Path, Url, String, Buffer

var nativeCSS = require('native-css'),
	pathToCssFile = 'somePath/file.css';

// Generate JavaScript Object
var cssObject = nativeCSS.convert(pathToCssFile);

url support with async version:

var nativeCSS = require('native-css'),
  URL = 'http://raw.githubusercontent.com/raphamorim/native-css/master/test/fixtures/sample.css';

// Generate JavaScript Object
nativeCSS.convertAsync(URL || Path) // returns Promise
  .then(function(result) {
    // convert/validate data
    // return or throw
  })

webpack usage:

cssobjects-loader

Not supported CSS features

React Style does not support CSS selectors, pseudo-classes and CSS animation. Mostly because we try to avoid implicit behaviour and want the user to make layout decisions inside the render() function.

CSS selectors introduce implicit behaviour by not having a direct link with the elements on which they're applied. Therefore there is no way of knowing what the consequences are, and this easily leads to refactoring issues. Instead you should be using plain JavaScript variables.

Classes with pseudo-classes have a higher precedence then classes with no pseudo-classes, which results in issues if you want to override styling in "higher-level" components. In some cases(:before, after, etc.) a component is easily added, in others (active, focus, hover, etc) plain JavaScript will do the trick. In all, you don't need CSS for this. In some cases though you might want to use pseudo-classes (like styling a scrollbar) - which we do support.

Animations inside CSS also introduce implicit behaviour, as CSS animations are decoupled from logic. By being decoupled, the state of the component is split between the component and the CSS animation. We however believe state should be contained within a component. An example of solving this using JS is React Magician.

Contributing

Don't be shy, send a Pull Request! Here is how:

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

About

License: MIT ® Raphael Amorim

native-css's Issues

Roadmap

I think a lot of people would be interested in supporting this project. Please, add roadmap section to your readme.

Publish current version to NPM

Hi,
in NPM there is version stat still does not support Buffer and URL. However in NPM it is published under version 1.2.3 which is latest.

Thank you,

Accept other input Formats (URL, Buffer)

provide support for

URL (Http Request)
and/or
Buffer

to ensure easier extended usage in other environments (f.e. webpack)

exception when integrated as module

when I integrated it as module in react component it showing following exception as soon as I run webpack

ERROR in ./node_modules/native-css/src/native-css.js
Module not found: Error: Can't resolve 'fs' in '/mnt/proj/node_modules/native-css/src'
 @ ./node_modules/native-css/src/native-css.js 95:17-30 126:9-22
 @ ./node_modules/native-css/index.js


ERROR in ./node_modules/fetch/lib/fetch.js
Module not found: Error: Can't resolve 'net' in 'mnt/proj/node_module/node_modules/fetch/lib'
 @ ./node_modules/fetch/lib/fetch.js 12:10-24
 @ ./node_modules/native-css/src/native-css.js
 @ ./node_modules/native-css/index.js

convert issue

Hi,

When I use native-css, I found a weird issue that sometimes it will export error format in-line styles, for instance, "background-color": "#F8F8F8" => "background-color": "#F8F8F8"(should be "backgroundColor": "#F8F8F8")

Thanks & Regards!

Enable conversion for media queries

PostCSS-js

Este processor usando o PostCSS é também uma alternativa.

É interessante ver qual as diferenças e ideias:
https://github.com/postcss/postcss-js

How to integrate to React project?

Recently I've found this module match my need that is convert a link CSS file to JSON.
So I want to use it in my project. I tried to import it but seem nothing worked. Can you help me config it?

Provide integration with gulp

Fix conversion problem for inherent classes

At present we've problems w/ conversion for inherent classes (e.g: .father.isActive)

In actual version, for solve this use a especific method. But, the conversion happens in wrong way.
Example:

sample.css         ---> sample.js
.father.son { ---> .father-son {

Object properties overridden

My generated css file contains this:

.btn, .link {
color: blue;
}

.btn {
padding: 10px;
}

I expected my object to be like this:

{
link: {color: blue},
btn: {color: blue, padding: 10px}
}

However, the preview style gets overridden instead of combined:

{
link: {color: blue},
btn: {padding: 10px}
}