lakkanna/css-converter

Convert HTML CSS to JS CSS for styled components and vice-versa.

css-converter's Issues

css styles staring with '-' (-webkit-background-clip: text) should keep capitalization on first character

Right now
-webkit-background-clip: text; converts to webkitBackgroundClip: 'text',

correct conversion should be WebkitBackgroundClip: 'text',

css-in-js libraries will convert the capital 'W' back to '-w'

The space disappears after converting a negative number

Original CSS:

background-position: 0 -10px;

Current conversion result:

backgroundPosition: "0-10px",

Expected result:

backgroundPosition: "0 -10px",

Fails with complicated css icon

Hello,
Your tool works pretty well!
Unfortunately I had a issue while converting this CSS code:

.nes-icon.instagram {
    width: 1px;
    height: 1px;
    color: #fff;
    box-shadow: 3px 1px #8005c8,4px 1px #8005c8,5px 1px #8005c8,6px 1px #8005c8,7px 1px #8005c8,8px 1px #8005c8,9px 1px #8005c8,10px 1px #8005c8,11px 1px #8005c8,12px 1px #8005c8,13px 1px #8005c8,14px 1px #8005c8,2px 2px #8005c8,3px 2px #8005c8,4px 2px #8005c8,5px 2px #8005c8,6px 2px #8005c8,7px 2px #8005c8,8px 2px #8005c8,9px 2px #8005c8,10px 2px #8005c8,11px 2px #8005c8,12px 2px #8005c8,13px 2px #8005c8,14px 2px #8005c8,15px 2px #8005c8,1px 3px #8005c8,2px 3px #8005c8,3px 3px #8005c8,4px 3px,5px 3px,6px 3px,7px 3px,8px 3px,9px 3px,10px 3px,11px 3px,12px 3px,13px 3px,14px 3px #8005c8,15px 3px #8005c8,16px 3px #8005c8,1px 4px #8005c8,2px 4px #8005c8,3px 4px,4px 4px,5px 4px,6px 4px,7px 4px,8px 4px,9px 4px,10px 4px,11px 4px,12px 4px #8005c8,13px 4px #8005c8,14px 4px,15px 4px #8005c8,16px 4px #8005c8,1px 5px #8005c8,2px 5px #8005c8,3px 5px,4px 5px,5px 5px,6px 5px,7px 5px,8px 5px,9px 5px,10px 5px,11px 5px,12px 5px #8005c8,13px 5px #8005c8,14px 5px,15px 5px #8005c8,16px 5px #8005c8,1px 6px #8005c8,2px 6px #8005c8,3px 6px,4px 6px,5px 6px,6px 6px,7px 6px #8005c8,8px 6px #8005c8,9px 6px #8005c8,10px 6px #8005c8,11px 6px,12px 6px,13px 6px,14px 6px,15px 6px #8005c8,16px 6px #8005c8,1px 7px #d40075,2px 7px #8005c8,3px 7px,4px 7px,5px 7px,6px 7px #8005c8,7px 7px,8px 7px,9px 7px,10px 7px,11px 7px #8005c8,12px 7px,13px 7px,14px 7px,15px 7px #8005c8,16px 7px #d40075,1px 8px #d40075,2px 8px #d40075,3px 8px,4px 8px,5px 8px,6px 8px #8005c8,7px 8px,8px 8px,9px 8px,10px 8px,11px 8px #8005c8,12px 8px,13px 8px,14px 8px,15px 8px #d40075,16px 8px #d40075,1px 9px #d40075,2px 9px #d40075,3px 9px,4px 9px,5px 9px,6px 9px #d40075,7px 9px,8px 9px,9px 9px,10px 9px,11px 9px #d40075,12px 9px,13px 9px,14px 9px,15px 9px #d40075,16px 9px #d40075,1px 10px #d40075,2px 10px #d40075,3px 10px,4px 10px,5px 10px,6px 10px #d40075,7px 10px,8px 10px,9px 10px,10px 10px,11px 10px #d40075,12px 10px,13px 10px,14px 10px,15px 10px #d40075,16px 10px #d40075,1px 11px #e98c25,2px 11px #e98c25,3px 11px,4px 11px,5px 11px,6px 11px,7px 11px #d40075,8px 11px #d40075,9px 11px #d40075,10px 11px #d40075,11px 11px,12px 11px,13px 11px,14px 11px,15px 11px #d40075,16px 11px #d40075,1px 12px #e98c25,2px 12px #e98c25,3px 12px,4px 12px,5px 12px,6px 12px,7px 12px,8px 12px,9px 12px,10px 12px,11px 12px,12px 12px,13px 12px,14px 12px,15px 12px #d40075,16px 12px #d40075,1px 13px #e98c25,2px 13px #e98c25,3px 13px,4px 13px,5px 13px,6px 13px,7px 13px,8px 13px,9px 13px,10px 13px,11px 13px,12px 13px,13px 13px,14px 13px,15px 13px #d84646,16px 13px #d84646,1px 14px #e98c25,2px 14px #e98c25,3px 14px #e98c25,4px 14px,5px 14px,6px 14px,7px 14px,8px 14px,9px 14px,10px 14px,11px 14px,12px 14px,13px 14px,14px 14px #d84646,15px 14px #d84646,16px 14px #d84646,2px 15px #e98c25,3px 15px #e98c25,4px 15px #e98c25,5px 15px #e98c25,6px 15px #e98c25,7px 15px #e98c25,8px 15px #e98c25,9px 15px #e98c25,10px 15px #d84646,11px 15px #d84646,12px 15px #d84646,13px 15px #d84646,14px 15px #d84646,15px 15px #d84646,3px 16px #e98c25,4px 16px #e98c25,5px 16px #e98c25,6px 16px #e98c25,7px 16px #e98c25,8px 16px #e98c25,9px 16px #d84646,10px 16px #d84646,11px 16px #d84646,12px 16px #d84646,13px 16px #d84646,14px 16px #d84646;
  }

Wrong conversion

Style to convert:
backgroundColor: '#efefef', padding: '4px 10px', borderRadius: '4px',

Converted output:
background-color: #efefef, padding;

Expected output:
background-color: #efefef; padding: 4px 10px; border-radius: 4px;

Extension command and configuration setting not working

• CTRL+Shift+V (or corresponding shortcut) gives "command 'pasteAndIndent.action' not found"
• "Unknown configuration setting" given for cssConvert.autoFormat in settings.json

The space disappears after converting complex value

Original CSS:

border-radius: 100%/130% 130% 15px 15px;
box-shadow: 0 1px 2px rgba(0,0,0,.5);
text-shadow: -1px -1px 0 #000,2px -1px 0 #000,2px 2px 0 #000,-1px 2px 0 #000,2px 3px 0 #000,1px 3px 0 #000,2px 3px 0 #000;

❌ Current conversion result:

borderRadius: "100%/130%130%15px15px",
boxShadow: "01px2pxrgba(0,0,0,.5)",
textShadow: "-1px-1px0#000,2px-1px0#000,2px2px0#000,-1px2px0#000,2px3px0#000,1px3px0#000,2px3px0#000",

✅ Expected result:

borderRadius: "100%/130% 130% 15px 15px",
boxShadow: "0 1px 2px rgba(0,0,0,.5)",
textShadow: "-1px -1px 0 #000, 2px- 1px 0 #000, 2px 2px 0 #000, -1px 2px 0 #000, 2px 3px 0 #000, 1px 3px 0 #000, 2px 3px 0 #000",

extension.cssConverter not found

After installing, I get extension.cssConverter not found. Also, if I go to the settings and enable/disable auto format, I get cssConverter.autoFormat is not a registered configuration