[jss-extend][jss-compose] support array of rule names

[damianobarbati]

It looks like a single string is accepted to pass an "existing" rule, but what if more than one has to be extended?

Example:

cellMinWidth: {
    minWidth: 50,
},
blue: {
    backgroundColor: 'blue',
},
serviceTable: {
    '& th': {
        verticalAlign: 'middle',
        textAlign: 'center',
        padding: 0,
        extend: ['cellMinWidth', 'blue'], //not valid
    },
    '& td': {
        verticalAlign: 'top',
        textAlign: 'center',
        padding: 0,
        extend: ['cellMinWidth', 'blue'], //not valid
    },
},

jss-compose doesn't seem to fit too:

cellMinWidth: {
    minWidth: 50,
},
blue: {
    backgroundColor: 'blue',
},
serviceTable: {
    '& th': {
        verticalAlign: 'middle',
        textAlign: 'center',
        padding: 0,
        composes: ['$cellMinWidth', '$blue'], //neither is applied
    },
    '& td': {
        verticalAlign: 'top',
        textAlign: 'center',
        padding: 0,
        composes: ['$cellMinWidth', '$blue'], //neither is applied
    },
},

[damianobarbati]

@kof can you confirm the correct usage is jss-compose but it does not work because of the caveat Does not work inside of nested rules (just found into docs)?

[kof]

Oh actually, extend should support this, it might be an issue inside of jss-nested

[damianobarbati]

When trying to "compose" a rule/class from other existing rules/classes in the same style object, which is the correct approach: jss-extend or jss-compose? 🤔

Thanks and merry xmas @kof 🎉

[kof]

Tried on playground, jss-extend supports rule name only as a string, not within an array, this can be a good enhancement.

[depiction]

This looks like you're trying a specify an array of values, not names.

I'm trying to do an array of rule names as one declaration as shown below. Would this feature allow this?

[h1, h2, h3, h4, h5, p]: { marginBottom: '.35em' }

I'd expect this to return:

h1, h2, h3, h4, h5, p { margin-bottom: .35em }