JSS adapter with default preset for plugins not working properly

[RobinVanCauter]

We're trying to setup Aesthetic in our project in combination with the JSS adapter.

But we're running into an issue where the jss plugins provided by 'jss-preset-default' aren't being used.

As an example, the style object used:

paper: {
    maxWidth: 380,
    padding: '24px',
    margin: '0 auto',
    transform: 'translateY(-56px)',
}

results in the following class:

.paper-1372835007 {
    maxWidth: 380;
    padding: 24px;
    margin: 0 auto;
    transform: translateY(-56px);
}

As you can see, the maxWidth rule is not being compiled to max-width (jss-camel-case plugin) as well as it's value, which should become 380px (jss-default-unit plugin).

This is what our styler configuration file looks like currently, is there anything we're missing here?

import Aesthetic, { createStyler } from 'aesthetic';
import JSSAdapter from 'aesthetic-adapter-jss'; // Or your chosen adapter

import { create } from 'jss';
import preset from 'jss-preset-default';

const jss = create().use(preset());
export default createStyler(new Aesthetic(new JSSAdapter(jss)));

Nice job on this library btw, looks very promising!

[milesj]

I believe the problem is use(), as it requires plugins to be spread in: https://github.com/cssinjs/jss/blob/master/src/Jss.js#L88

Where as preset() returns an object of plugins: https://github.com/cssinjs/jss-preset-default/blob/master/src/index.js#L12

I believe you want setup(): https://github.com/cssinjs/jss/blob/master/src/Jss.js#L31

Sorry for my docs being wrong, I will update them! Let me know if this fixes it.

[RobinVanCauter]

This fixes the issue. Thanks!

[milesj]

Sweet. Thanks for using Aesthetic!