css same rule problem

[futurist]

using j2c-importer converted JSON as below:

{
  ".canvas.editing": {
            "backgroundImage": "url(images/grid.png) !important"
        },

----ten miles long---->>

  ".canvas.editing": {
            "border": "1px dashed blue"
        },
}

if there's 2 same rules(keys), then JS object will remain only last one, how to solve the problem if want to using an imported j2c from css?

[pygy]

They should be in two different objects, nested in an array:

[
  {
    ".foo": {bar: 5}
  },
  {
    ".foo:" {baz: 5}
  }
}

So that the CSS -> j2c - > CSS preserves all rules in order.

If it isn't the case, it is a bug.

[futurist]

I've checked CSS->j2c part is exactly as your structure, but when I use in j2c.sheet(), there's only border style, backgroundImage gone. maybe it's j2c problem?

[pygy]

That's odd... j2c treats each array entry in isolation (except for localizing names and @extend, which has access to the local namespace too).

By the time it reaches the second object, the content of the first one should already be in the buffer...

It seems to work here: https://tonicdev.com/5694d6c633b2840c007fdee4/5694d6c633b2840c007fdee5

Are you using the latest version (not that there should be a similar issue in previous ones, but to be sure we're on the same page)?

[futurist]

oh, I've found the problem is that I manually changed the structure. sorry for that! get deeper into j2c!

[futurist]

as a note, I remembered why the manually changing, coze there's a @global to all the array, but I want to make some class not in global, the manually moving easy to get into that problem. just FYI, and thanks!

[pygy]

It may be easier to feed the importer piecewise, depending on whether you want to localize or not. I still find CSS more readable than JS(ON), and it's easier to slice.

Just cut/paste the part you want, no need to worry about these pesky comas and braces.

[futurist]

can add an option to combine array into a single object?

[
  {
    ".foo": { font_size:'12px' }
  },
  {
    ".foo": {
      ' .abc':{ border:'1px solid red' }
    }
  }
]

comes into:

  {
    ".foo": { 
      font_size:'12px',
      ' .abc':{ border:'1px solid red' }
    }
  }

that makes life easier. In JS, you have to write additional code to find a rule in array, if it's object, just obj['rule']

[pygy]

At this point, the output of j2c-importer is flat:

{
    ".foo": { font_size:'12px' },
    ".foo .abc":{ border:'1px solid red' }
}

[pygy]

I may merge objects with an identical selector if they follow one another (introducing an array at the property level if there are duplicates), but I don't want to do it in the non-contiguous case.

I'd need a deeper analysis than what I do now...