JSS bug for comma separated values

[heyymarco]

in the JSS documentation: see here, if we want to write comma separated value, we should wrap the values with single bracket, something like this ['value1', 'value2', 'value3'] thus will be rendered to 'value1','value2','value3'

and for the space separated value, wrap it using double bracket, something like this [['value1', 'value2', 'value3']] thus will be rendered to 'value1' 'value2' 'value3'

but I found something weird with boxShadow prop,
the JSS renders it as space separated value. That violates the documentation rule! try to render the js code below:

export default {
  btnErr1: {
    boxShadow: [
      'var(--shadow-blue)',
      'var(--shadow-green)'
    ],
  },
}

with the code above, we expected the result is something like this:

.btnErr1-0-1-15 {
  box-shadow: var(--shadow-blue),var(--shadow-green);
}

but we got this:

.btnErr1-0-1-15 {
  box-shadow: var(--shadow-blue) var(--shadow-green);
}

then I tried to wrap it with double bracket and resulting with the same (space separated value)

and then I tried to wrap it with triple bracket and it WORKS (comma separated value). But this hack only work if we write the code in javascript but complained in typescript.

here the full code:

export default {
  btnWorks: {
    // works, each shadow separated by comma.
    // and each shadow's value separated by space.
    boxShadow: [
      [0, 0, 0, '10px', 'blue'],
      [0, 0, 0, '15px', 'green']
    ],
  },
  btnErr1: {
    // create 2 shadow variables.
    // double bracket to make variable's value separated by space.
    '--shadow-blue' : [[0, 0, 0, '10px', 'blue']],
    '--shadow-green': [[0, 0, 0, '15px', 'green']],
    
    // single bracket to make variables separated by comma
    // BUT doesn't work, the JSS separates them by space!
    // the JSS violates the documented rule in https://cssinjs.org/jss-syntax?v=v10.5.1#alternative-syntax-for-space-and-comma-separated-values
    boxShadow: [
      'var(--shadow-blue)',
      'var(--shadow-green)'
    ],
  },
  btnErr2: {
    '--shadow-blue' : [[0, 0, 0, '10px', 'blue']],
    '--shadow-green': [[0, 0, 0, '15px', 'green']],
    
    // let's try using double bracket & see how the JSS treat it
    // BUT still doesn't work, the JSS separates them by space!
    boxShadow: [[
      'var(--shadow-blue)',
      'var(--shadow-green)'
    ]],
  },
  btnWorksButInvalid: {
    '--shadow-blue' : [[0, 0, 0, '10px', 'blue']],
    '--shadow-green': [[0, 0, 0, '15px', 'green']],
    
    // let's try adding more bracket & see the result
    // now it WORKS, but the triple bracket COMPLAINED by TypeScript check
    // WORKS if written in JS but FAILS in TS
    boxShadow: [[[
      'var(--shadow-blue)',
      'var(--shadow-green)'
    ]]],
  },
}

[kof]

I think the bug is def. not in the core, it must be jss-plugin-expand, but def. a bug