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

[Sam Strongarm]

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.

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]

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]

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]

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'
    }
}