Jss: [jss-compose] Plugin for classes composition

[kof]

Original issue #247

In order to use a pure CSS framework together with JSS, we can introduce a plugin, which will compose the selector similar to css-modules compose

export default {
  button: {
    composes: ['btn',  'btn-primary'],
    color: 'red'
  }
}

Compiles to

.button-12345 {
   color: red;
}

However when you use it (React example):

<button className={sheet.classes.button}>My Button</button>

It renders to

<button class="btn btn-primary button-12345">My Button</button>

[kof]

Another use case is to use local rules with composition as well:

export default {
  button: {
    display: 'inline-block'
  },
  ctaButton: {
    composes: ['$button'],
    color: 'red'
  }
}

sheet.classes.ctaButton //  'button-123456 ctaButton-345234'

[zerkalica]

Why not to merge ctaButton with button?

const button = {display: 'inline-block'}

const ctaButton = {
  ctaButton: {
    ...button,
    color: red
  }
}

[kof]

Because this way you can have 2 separate rules, but still be able to put them both at once:

<div className={classes.ctaButton}></div>

Will result in

<div class="button-123456 ctaButton-345234"></div>

[typical000]

I'll try to implement this plugin

[typical000]

@kof Good news! :) https://github.com/typical000/jss-compose pushed first stable version of jss compose. Can you take a look and review it? If it's all ok - I'll transfer repo to cssinjss org.

[typical000]

@kof Did you watched jss-compose? :)

[kof]

Yep, I was busy with other tasks you probably saw in the recent releases. It looks good.

Here are the next steps:

• [x] move it to cssinjs org
• [x] some stylistic changes in code (reduce indentation level), will do it myself
• [x] review documentation (will do or @nathanmarks or anybody are welcome as well)
• [ ] add it to the test suite in jss repository same way jss-nested is added
• [x] add it to jss-default-preset
• [x] announce an official release

[typical000]

Transfered

[typical000]

Added pull request to jss-preset-default: https://github.com/cssinjs/jss-preset-default/pull/2

[typical000]

add it to the test suite in jss repository same way jss-nested is added

@kof did you mean inside branch feature/plugins-test-219 ?

[kof]

nope, will add it, I am on it for react-jss right now.

[kof]

@typical000 can you add me to the package on npm ?

[kof]

@typical000 I would publish it, it is ready, but I need npm package access.

[typical000]

@kof sure. Just added you. Can you try to publish new version? Now console tells:

> npm owner ls
kof <[email protected]>
typical000 <[email protected]>

[typical000]

@kof Not about jss-compose, but I have just added you to https://www.npmjs.com/package/jss-expand too

[kof]

Released.