Feature Request: Ability to copy CSS JS Syntax from Styles tab

34 views
Skip to first unread message

Sam Strongarm

unread,
May 24, 2020, 3:22:00 PM5/24/20
to Chrome DevTools
Hello all,

It would be a nice addition to the CSS Styles tab (in the Elements section) to have the ability to copy the CSS code out in JS format.

Capture.PNG

e.g. copying 
padding-left: 4vw;

would automatically convert into
paddingLeft: '4vw'

The use case is that I tend to do a lot of my CSS tweaking within dev tools and then copy them into my code when I'm happy.  ATM I need to convert the changes manually into the JS format, but it'd be a nice feature to have the ability to copy them out that way instead.

Not a massive deal but a nice addition, and maybe more useful to people than some of the other tools in that space like "Add box-shadow".

guest271314

unread,
May 24, 2020, 5:46:33 PM5/24/20
to Chrome DevTools
Gain focus on window before pasting

onfocus = async _ => {
 
const text = await navigator.clipboard.readText();
 
const [key, prop] = text.split(/:|;/);
 
// handle content: '', content: ' '
  await navigator
.clipboard.writeText(
   
!/"|'/.test(text)
   
? `${key}:"${/^\s+$/.test(prop) ? prop : prop.trimStart()}"`
   
: text.replace(/\s+(?='|")/,'')
 
);
}

Mathias Bynens

unread,
May 25, 2020, 1:27:58 AM5/25/20
to google-chrome-...@googlegroups.com
Could you elaborate on this use case? Are you using a CSS-in-JS framework, CSSOM APIs, or setting styles through `element.style.paddingLeft = '4vw'`?

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/3fceea9e-be4e-4f6d-a4b6-3faedeaf16e4%40googlegroups.com.

Sam Strongarm

unread,
Jul 4, 2020, 5:27:41 PM7/4/20
to Chrome DevTools
Hey Mathias.  Sure, yeah I'm using a CSS-in-JS framework in React.  ATM there's no neat way for me to copy across style changes I play around with in dev tools straight into my code.  I currently copy it across and then have to change the formatting to be JS compatible rather than plain CSS.  Hope that makes some sense.  In my React code I have stuff like follows:

const styles = {
    header
: {
        marginRight
: '20px',
        fontFamily
: 'blah'
   
}
}

Reply all
Reply to author
Forward
0 new messages