DEMO: Export SCSS to JS

[ecgan]

Changes proposed in this Pull Request:

This is just a demo PR for discussion, not meant to be merged.

Some online source:

• https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
• https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

Apparently we can only export SCSS variables (the ones with $ prefix). There isn't a way to export mixins.

This video shows manually creating JavaScript mixin function to replace SCSS mixin: https://egghead.io/lessons/scss-use-javascript-functions-as-mixin-directives-for-css-in-js-style-declarations

Screenshots:

Detailed test instructions:

1. Go to http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fstart
2. Notice the small output at the bottom of the screen as per screenshot.
3. In the console, you can see the exported object.

[jconroy]

So we still need to manually map everything like this?

[ecgan]

Yeah, which means we probably can't go CSS-in-JS / emotion library 100%, instead we might have to use emotion when possible and SCSS when needed until the wp-g2 CSS-in-JS matures.

[jconroy]

I'd personally rather us be able to use a single approach. Mixing approaches for anything almost certainly from my experience will be a headache/nightmare. In which case I'd suggest we stick with scss for now and put a pin in the CSS in JS convo (again, just for now),

[ecgan]

Haha, if that's the case, we gonna set our expectations that there will be ongoing arguments on CSS class naming conventions between me and @tomalec 🤣 OK, stick with current SCSS way for now.

[jconroy]

ongoing arguments on CSS class naming conventions

An exchange of views among peers 😄

If we stick to something based around hopefully we won't get into too much trouble and/or have to spend too much time thinking of the perfect name

If we hit uniqueness issues we can revisit.