data attribute problem

[fatihhayri]

css
.content-file[data-content-file-type='.doc'], 
.content-file[data-content-file-type='.docx'] {background-position: -5px -5px;}

.content-file[data-content-file-type='.jpg'],
.content-file[data-content-file-type='.jpeg'] {background-position: -95px -5px;}

.content-file[data-content-file-type='.png'] {background-position: -187px -5px;}

.content-file[data-content-file-type='.ppt'],
.content-file[data-content-file-type='.pptx'] {background-position: -276px -4px;}

.content-file[data-content-file-type='.pdf']{background-position: -367px -5px;}

.content-file[data-content-file-type='.css']{background-position: -5px -115px;}

.content-file[data-content-file-type='.json']{background-position: -203px -239px;}

.content-file[data-content-file-type='.js']{background-position: -186px -115px;}

.content-file[data-content-file-type='.html'] {background-position: -277px -115px;}

.content-file[data-content-file-type='.xml'] {background-position: -783px -239px;}

.content-file[data-content-file-type='.xlsx'],
.content-file[data-content-file-type='.xls']{background-position: -5px -224px;}

.content-file[data-content-file-type='.csv'] {background-position: -96px -224px;}

.content-file[data-content-file-type='.zip'], 
.content-file[data-content-file-type='.rar'] { background-position: -187px -224px; }

export

{
  "content_file_data_content_file_type___doc": {
    "backgroundPosition": "-5px -5px"
  },
  "content_file_data_content_file_type___docx": {
    "backgroundPosition": "-5px -5px"
  },
  "content_file_data_content_file_type___jpg": {
    "backgroundPosition": "-95px -5px"
  },
  "content_file_data_content_file_type___jpeg": {
    "backgroundPosition": "-95px -5px"
  },
  "content_file_data_content_file_type___png": {
    "backgroundPosition": "-187px -5px"
  },
  "content_file_data_content_file_type___ppt": {
    "backgroundPosition": "-276px -4px"
  },
  "content_file_data_content_file_type___pptx": {
    "backgroundPosition": "-276px -4px"
  },
  "content_file_data_content_file_type___pdf": {
    "backgroundPosition": "-367px -5px"
  },
  "content_file_data_content_file_type___css": {
    "backgroundPosition": "-5px -115px"
  },
  "content_file_data_content_file_type___json": {
    "backgroundPosition": "-203px -239px"
  },
  "content_file_data_content_file_type___js": {
    "backgroundPosition": "-186px -115px"
  },
  "content_file_data_content_file_type___html": {
    "backgroundPosition": "-277px -115px"
  },
  "content_file_data_content_file_type___xml": {
    "backgroundPosition": "-783px -239px"
  },
  "content_file_data_content_file_type___xlsx": {
    "backgroundPosition": "-5px -224px"
  },
  "content_file_data_content_file_type___xls": {
    "backgroundPosition": "-5px -224px"
  },
  "content_file_data_content_file_type___csv": {
    "backgroundPosition": "-96px -224px"
  },
  "content_file_data_content_file_type___zip": {
    "backgroundPosition": "-187px -224px"
  },
  "content_file_data_content_file_type___rar": {
    "backgroundPosition": "-187px -224px"
  }
}

Problem content_file_data_content_file_type___doc 

[staxmanade]

@fatihhayri in the context of a react component, how would you represent the JSON of a react element with this kind of selector?

Can you show what the JSON should look like that would work with this case? Not sure I follow.

[fatihhayri]

sample

.content-file[data-content-file-type='.docx'] {
background-position: -5px -5px;
}

result

".content-file[data-content-file-type='.doc']" {
"background-position": "-5px -5px";
}

[staxmanade]

I do see your provided conversion. I'd like to understand more as I'm still not following the actual use case.

Can you provide a https://codesandbox.io/ example showing this type of selector.

Thanks (sorry I'm being slow 😛)