wix-ui-jss

This package uses jss (css-in-js mechanism) in order to enrich components from wix-ui-core library with styles.

API

withClasses(Component, styles) is an HOC wrapping the component and passing it a classes prop. the classes prop is generated from the data passed to styles (the theme). When rendered - it generates a new style tag using jss (css-in-js) mechanism. Note that by using withClasses on some component, it will get a unique id as a side effect for performance purposes.

styles is a style template written in css-in-js syntax (will be explained after).

Example

We wish to create a themed component of the core Button component in wix-ui-core. For simplicity, let's say it has the following implementation:

export const Button = ({classes}) => (
  <button className={classes.someClass}>
    click me
  </button>
);

The Button expects to receive a classes prop by some magical way. This is where wix-ui-jss kicks in.

Let's assume theme is an object which specifies the values for the style. for example:

const theme = {
  fontSize: '10px',
  color: 'green'
}

The core Button has also styles which is a function that gets the theme object and uses it in order to create a style template written in css-in-js syntax:

export const styles = theme => ({
  someClass: {
    fontSize: theme.fontSize,
    color: theme.color
  }
});

Now, in order to pass the classes prop to the Button, we simply use the withClasses API to generate the HOC:

import {withClasses} from 'wix-ui-jss';
import {styles} from './styles';
import Button from './Button';

export default withClasses(Button, styles);

Testkit

In order to test the styles of the components which are being styled by the jss style element that was injected to the DOM, you can use the DomTestkit.

Lets see for example how we can test that the themed Button we just created above has a green color.

import {DomTestkit} from 'wix-ui-jss/domTestkit';
import {mount} from 'enzyme';

describe('Button', () => {
  it('should have green color', () => {
    const wrapper = mount(<ThemedButton/>);
    const domTestkit = new DomTestkit({componentId: wrapper.node.id});

    expect(domTestkit.getCssValue({className: 'someClass', property: 'color'})).toBe('green');
  });
});