casesandberg / reactcss

:lipstick: Inline Styles in JS

ReactCSS

Inline Styles in JS with support for React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries

Install

npm install reactcss --save

Style Object

Define a default styles for your elements:

import reactCSS from 'reactcss'

const styles = reactCSS({
  'default': {
    card: {
      background: this.props.background,
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
})

Pass style definitions via inline styles:

<div style={ styles.card } />

Activating Classes

Activate additional classes by passing down objects as additional parameters to reactCSS:

const styles = reactCSS({
  'default': {
    card: {
      background: '#fff',
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
  'zIndex-2': {
    card: {
      boxShadow: '0 4px 8px rgba(0,0,0,.15)',
    },
  },
}, {
  'zIndex-2': props.zIndex === 2,
})

Documentation

See the Full Documentation

Examples

Examples and projects built with reactCSS:

Felony - Next Level PGP Desktop App React Color - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more Buffer App Components - A shared set of UI Components React Reactions - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube

reactcss's Issues

ReactCSSTransitionGroup example

reactcss is compatible with ReactCSSTransitionGroup? Any examples?

Update npm package

The current npm package (0.4.1) still has a dependency on react@^0.13.1. Can you upgrade the package so it is depending on react 0.14 correctly?

What about media queries?

It looks really nice! But what about media queries? Of course I could just listen on window resize, but the semantic of media queries is also that you can nest them under the same selector like:

.myclass {
  @media(min-width: 1000px) {
    color: yellow;
  }
}

This makes it easier to make small css components that is responsive.

Is it possible to something like it in reactcss?

Write type declaration file for typescript

Any plan to write the type declaration file of the library for typescript ?

And maybe push it to https://github.com/DefinitelyTyped/DefinitelyTyped as well ?

ReactCSS 1.0.0

With the release of React 0.14.0 and heavy usage of ReactCSS over the past few months I would like to propose some change for 1.0.0 and would love your feedback:

• Dropping the inheritance of ReactCSS.Component this was never meant to be long-term. 0.14.0 now throws warnings if you are not extending the original React.Component.
• Add support for attaching multiple classes to elements. We can bake react-map-styles into ReactCSS and add a more robust string replace to allow for multiple classes + eval in the html.
• Add in helper functions that can be used in loops for applying sudo-type classes re: first, last, nth-child, even, odd
• Heavy integration and support around using ReactCSS in React Native.
• Possibly remove the classes method and move everything unto the styles method with a function wrapping the return:

styles = () => {
  return {
    'default': {
      title: {
        color: '#333',
      },
    },
  };
}

And then you would pass the activations as a second parameter of the function:

styles = () => {
    return css({
      'default': {
        title: {
          color: '#333',
        },
      },
    }, {
      'foo-bar': 2 + 2 === 4,
    });
  }

Or stick to the old methods with the caveat being the styles method will always have to be included even if you aren't passing custom activations in:

classes() {
    return {
      'default': {
        title: {
          color: '#333',
        },
      },
    };
  }

styles = () => css();

Redux Compatibility?

Hello Again!

Can ReactCSS be used with a Redux Architecture? I imagine you're familiar, but we have separated components into Container (that pass data to presentational and are generated by redux) and Presentational components (pure markup).

Can we use ReactCSS in presentational components, considering they are function, not a class? Worth noting is we can't wrap presentational components into a wrapper class.

Presentational component example:
const Example = () => (

);

If Redux + ReactCSS aren't a good fit, not a big problem, but as you know i'm trying my hardest to keep RCSS involved! Thanks again and I hope all is well!

Why is there an example titled Redux?

It is an example of a functional stateless component but that has nothing to do with Redux. To me this is only confusing.

Similarly the example of React Native has nothing specific to RN so isn't it enough to just mention it's compatible with RN? Now you just waste time trying to find the differences between the examples only to find out that they're the same.

doc's sidebar weird behavior on IE11

The mixin version does not define this.styles

Documentation makes it seem like you should be able to call this.styles() no matter what version you're using, but when you do that with the "inline" version, this.styles is undefined and this.css must be used instead.

Make ReactCSS either a high order component or a decorator

Or maybe both?

Tag releases please

It is good form to tag releases. It helps when npm releases are broken. Thanks!

Shared styles

Hey @casesandberg great work! 😀

I'm wondering wether this could be achieved in a better way having a built-in functionality or just sticking with this.

import {extend} from 'lodash';
import React from 'react';
import ReactCSS from 'reactcss';

class Foo extends ReactCSS.Component {

  sharedStyles() {
    return {
      container: {
        padding: '0.8em',
        fontSize: '1.2em'
      }
    };
  }

  classes() {
    let sharedStyles = this.sharedStyles();
    return {
      'default': {
        container: extend({}, sharedStyles.container, {
          width: '4em'
        }),
        actions: extend({}, sharedStyles.container, {
          width: '2em',
          textAlign: 'center'
        })
      }
    };
  }

}   

Thoughts?

cc @vladikoff

Spelling Error in Preface ('react-comonent-queries')

Super minor nitpick, just noticed as I was reading the docs. Under the preface section, it says:

'Look for a react-comonent-queries package coming soon.'

Assuming its supposed to be react-component-queries.

Also, have you guys looked at Container Queries instead of element queries?

In any case, thanks so much for the awesome work! Looking forward to testing this out.

Proposal: Support for symbols

Symbols offer nice features such as ensuring that enums values are actually distinct across different enums.

It would be nice to be able to supply symbols as modifiers so that multiple modifiers of different enums were supported.

Take this example.

const MyEnum = {
  A: 'A',
  B: 'B',
  C: 'C',
};

const YourEnum = {
  A: 'A',
  B: 'B',
  C: 'C',
};

const styles = reactCSS({
  default: {
    root: {
      width: 10,
    }
  },
  [MyEnum.A]: {
    root: {
        width: 20,
    }
  },

  [YourEnum.A]: {
    root: {
      height: 10,
    }
   }
}, {
  [MyEnum.A]: x === MyEnum.A,
  [YourEnum.A]: y === YourEnum.A,
});

This would cause a conflict in keys. To solve this problem enums are often written using symbols.

const MyEnum = {
  A: Symbol('A'),
  B: Symbol('B'),
  C: Symbol('C'),
};

const YourEnum = {
  A: Symbol('A'),
  B: Symbol('B'),
  C: Symbol('C'),
};

The current for own, and to string of key-value doesn't permit symbols to be used.

Is Hover broken?

I have tried to follow the example on http://reactcss.com/#hover, but I am unable to make it work. It doesn't seem to recalculate the styles.

I used the default example from the website at http://reactcss.com/#hover.

Unexpected character '#'

Giving this a test-drive and am getting blocked by the following error:

>> Error: Parsing file node_modules/reactcss/src/reactcss.coffee: Unexpected character '#' (10:0)

Here's the code I'm using (compiled with Browserify and Babel, using NPM3):

import ReactCSS from 'reactcss';

export default class SideMenu extends ReactCSS.Component {
    render() {
        return (
            <div />
        );
    }
};

Not sure what I'm doing wrong? Maybe it's something to do with NPM3?

Documentation confuses styles and style

Example from documentation: <div styles={ this.styles().modal }>. The actual property on the DOM elements is style, not styles.

react-addons-test-utils still in published 1.0.8

Looks like something went wrong with the publish to npm:

npm view [email protected] peerDependencies
{ react: '^0.14.8 || ^15.1.0',
  'react-dom': '^0.14.8 || ^15.1.0',
  'react-addons-test-utils': '^0.14.8 || ^15.1.0' }

Autoprefix returning empty list under webpack2

I traced through the code from react-color while looking at the casesandberg/react-color#328 issue and I can see that everything is fine until https://github.com/casesandberg/reactcss/blob/master/src/autoprefix.js#L100

Looking at the transformed code, the map function that gets imported is lodash's specialised arrayMap() instead of baseMap() which is for mapping objects i.e.

function arrayMap(array, iteratee) {
  var index = -1,
      length = array == null ? 0 : array.length,
      result = Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

So, this just returns [undefined] if the arg is an object.

I changed autoprefix to use plain JS as test case and it works as expected. See master...andrewgleave:master

Not sure what's going on and whether it's related to webpack2's tree shaking?

Documentation site looks odd in Firefox vs Chrome

Chrome (43.0.2357.130):

Firefox: 39.0

Remove lodash as a dependency and use lodash 4.0 submodules as needed

For package footprint considerations can we please remove lodash 3 and replace where its needed with lodash submodules.

This will prevent the whole library to get sucked into a bundle and would be at par with everyone else that is at lodash 4.0 submodules.

Thanks!

Build fails while using with react-color component

react-color depends on 1.2.2 version, and when it is installed, during the build I get following error;

ERROR in ./~/reactcss/lib/index.js
Module build failed: Error: Plugin 0 specified in "/project-path/node_modules/reactcss/.babelrc" provided an invalid property of "__wrapped__"

 @ ./~/react-color/lib/components/alpha/Alpha.js 22:16-35
 @ ./~/react-color/lib/index.js

when I separately install 1.2.0 version, everything works fine.

Pseudo-classes are not pseudo-elements (documentation nitpick)

The website mentions pseudo-elements, however the examples are all pseudo-classes. Additionally, there exist all sorts of pseudo-classes, but it seems that in that section only order/position pseudo-classes are relevant. I don't really know what to call this specific kind of pseudo-classes; maybe simply listing all the possible ones would make the text clearer?

Just some nitpicks before even using the module (though it looks interesting).

Make Autoprefixing Exhaustive

Use the static method in this package https://github.com/rofrischmann/inline-style-prefixer instead of hard-coding a subset: https://github.com/casesandberg/reactcss/blob/master/src/autoprefix.js

Server side rendering

I'm in the middle of converting to a universal app to support server side rendering and running into an issue where I need react-map-styles to run on the server side code.

Any ideas?

Maximum call stack reached trying to pass a React element as a value

will keep attempting to transform the object.

Uncaught TypeError: Cannot read property 'apply' of undefined

This happens when I try to implement your React Color picker, but it looks to be related to this lib. For some reason, the merge library isn't being included properly and I am having a hard time figuring out why.

I am using webpack, and just trying to use a simple component:

var React = require('react');
var ColorPicker = require('react-color');

export default class Component extends React.Component {

  render() {
    return <ColorPicker type="sketch" />;
  }
}

When merge=require("merge"); is ran from lib/merge.js, all that is imported is an empty object. When I log the imported module to the console, all I see is Object {}. It seems to me that it's getting the merge module from somewhere other than the NPM dependency.

React Native Support?

Does this support React Native?

Remove react-addons-test-utils from peerDependencies

I keep getting this warning whenever I install any npm package:

npm WARN [email protected] requires a peer of react-addons-test-utils@^0.14.8 || ^15.1.0 but none was installed.

Can you remove the peer dependency on react-addons-test-utils please, it should only be in devDependencies, and not in peerDependencies...

Pass in onClick component for Hover

Need a fix for https://github.com/casesandberg/fold/blob/master/src/components/common/Icon.js#L39

Possibly:

export handleHover(Icon, Box)

Custom selectors that are vendor specific

Love this reactcss project and what it's seeking to do. I have a less file in a React project that I'm trying to convert to reactcss and ran into this line that I have in my less file:

-ms-overflow-style: none;

How would I translate that to reactcss? I tried this, which I got as an idea from this comment, but no luck.

const styles = reactCSS({
  'default': {
    sidebar: {
      overflowStyle: 'none; -ms-overflow-style: none',
    }
  }
});

Any ideas?

At a higher level, what I'm wondering is, how can we have custom selectors and selectors that are vendor specific? Is that possible?

Input Placeholder Color

I'm having trouble setting the placeholder color using reactcss. Autoprefixer appears to support it (for auto expansion), but I'm not sure it is compatible with the way this module works. I've attempted the following solutions:

Peseudo-selector Style:

'default: { ... },      
placeholder: {
  input: {
    color: 'red'
  }
}, ...

Perhaps a separate selector:

'default: {
  input: {
    placeholderColor: 'red' 
  },      
}, ...

Please advise.

Fix `console.warn` Test Coverage on No Classes in `inline.js`

Don't need vendor prefixes for widely supported CSS properties

box-shadow and border-radius are already widely supported.

http://caniuse.com/#feat=border-radius
http://caniuse.com/#feat=css-boxshadow

If you're looking for more mixins to include out of the box (perhaps to showcase the library's features), check out Bourbon.

Put react in dependencies cause npm install different react version,

I find react hot loader warn that my project has duplicate react, so I search in my project and find that there is another react version in reactcss under node_modules。

should react be put in peerDependencies in reactcss？

reactcss with bower.

Is there any way so that we can use reactcss package with bower ?

The scenario is that we are using react-rails package and don't know how to integrate reactcss using npm ? We already have support for both bower and npm in the rails project and we can go for installing reactjs from npm but it will be redundant to do so as

// Include the library
var React = require('react');
var ReactCSS = require('reactcss');

will include the react library too.

Currently React variable is exposed globally and we can use it directly. I just used only the second line i.e. var ReactCSS = require('reactcss');, but is that a good way ?

I'm just wondering what could possibly be right way of developing with ReactCSS

Add "styles" function to mixin

I think the styles function should be already included in ReactCSS.mixin, in order to avoid adding

styles: function(){
  return this.css({})
},

in every React component.

Decorators over Classes

In your documentation you promote using ReactCSS.Component with ES6 rather than mixins.

Considering how little there is within ReactCSS.Component I believe this would be better suited for an ES7 decorator which better aligns with mixins (maybe someday we'll have real traits in JavaScript).

import React from 'react';
import {cssDecorator} from 'reactcss';

@cssDecorator
class MyComponent extends React.Component {
  // ..
}

export default MyComponent;

What's great is that this easily translates to ES6:

import React from 'react';
import {cssDecorator} from 'reactcss';

class MyComponent extends React.Component {
  // ..
}

export default cssDecorator(MyComponent);

This is a much more composable alternative to a specialized subclass and will work better with nested inheritance.

how to used Autoprefixing ?

I generated inline styles with no prefix, Does it automatically add prefix ? or need to do to some thing make it generate an inline style with prefix?
now:
transform: translate3d(0px, 0px, 0px);

core: Add syntactic sugar when extending a component

Say I've got a ReactCSS component called Page:

class Page extends ReactCSS.Component {
  classes() {
    return {
      'default': {
        'page': {
          fontFamily: 'Arial'
        , color: '#f00'
        }
      }
    }
  }
}

Now I'd like to make a subclass of Page called BoldPage. Right now to reuse the classes, I'd have to do something like:

const merge = require('merge')

class BoldPage extends Page {
  classes() {
    return merge.recursive(true, super.classes(), {
      'default': {
        'page': {
          fontWeight: 'bold'
        }
      }
    })
  }
}

I'm proposing a bit of syntactic sugar built into the module since this (in my opinion) would be a common pattern:

class BoldPage extends Page {
  classes() {
    return ReactCSS.extendSuper(super, {
       ...
    })
  }
}

Good idea? Bad idea?

If it sounds like a good idea, I wouldn't mind tackling the PR for it.

doc's code pane is not adding scroll on MS Edge

Use modularized lodash

Currently, entire lodash is being included in some places

https://github.com/casesandberg/reactcss/search?utf8=%E2%9C%93&q=lodash

In my case it's a problem because including reactcss adds around 450k because of lodash.

Hover.js > hover.js

Case sensitive import.

Module not found: Error: Cannot resolve 'file' or 'directory' ./components/hover.js in /home/jaunkst/Git/bitmonolith/lookout-ui/node_modules/reactcss/lib

Make `hover` importable via deconstruction

Make ReactCSS.hover accessible via:

import ReactCSS, { hover } from 'reactcss' 

React 0.14

Is the use of is="..." going to break with React 0.14?

http://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html#notable-enhancements

"is" is listed as a support HTML attribute now.