Generate apps/src/color.js from shared/css/color.scss

[islemaster]

Given:

• We define our standard application color palette in shared/css/color.scss (and preferably nowhere else)
• Our accepted approach to styling React components is to define their styles in JavaScript.

Then:

• We need a way for our JavaScript components to read shared/css/color.scss

I decided the best way to do this would be a build step that generates cdo/apps/src/color.js by parsing cdo/shared/css/color.scss.

color.js is not used yet - I've just extracted this from my GameLab Animation Tab work, where I will be using it.

Here's the generated file in its entirety; it's .gitignored and not checked in, because it's entirely derived from color.scss. This file is regenerated before every apps build or test run (though not by the apps watcher, since the build step crosses apps/shared boundaries).

// color.js
// GENERATED FILE: DO NOT MODIFY DIRECTLY
// This generated file exports all colors defined in color.scss
// for use in JavaScript. The generator script is build-color-js.js
module.exports = {
  black: "black",
  dark_charcoal: "#4d575f",
  charcoal: "#5b6770",
  light_gray: "#949ca2",
  lighter_gray: "#c6cacd",
  lightest_gray: "#e7e8ea",
  white: "white",
  teal: "#00adbc",
  light_teal: "#59cad3",
  lightish_teal: "#80d6de",
  lighter_teal: "#a6e3e8",
  lightest_teal: "#d9f3f5",
  purple: "#7665a0",
  light_purple: "#a69bc1",
  lighter_purple: "#cfc9de",
  lightest_purple: "#ebe8f1",
  cyan: "#0094ca",
  light_cyan: "#59b9dc",
  lighter_cyan: "#a6daed",
  lightest_cyan: "#d9eff7",
  orange: "#ffa400",
  light_orange: "#ffc459",
  lighter_orange: "#ffe0a6",
  lightest_orange: "#fff2d9",
  green: "#b9bf15",
  light_green: "#d1d567",
  lighter_green: "#e7e9ad",
  lightest_green: "#f5f5dc",
  yellow: "#ffb81d",
  light_yellow: "#ffdb74",
  lighter_yellow: "#ffebb5",
  lightest_yellow: "#fff7df",
  header_text: "white",
  bkgnd_color: "#00adbc",
  inset_color: "#c6cacd",
  dark_color: "#7665a0",
  hdr_color: "#7665a0",
  red: "#c00",
  realyellow: "yellow",
  level_submitted: "#7665a0",
  level_perfect: "rgb(14, 190, 14)",
  level_passed: "rgb(159, 212, 159)",
  level_attempted: "yellow",
  level_not_tried: "#fefefe",
  level_current: "#ffa400",
  assessment: "#0094ca",
  link_color: "#0596CE",
  shadow: "rgba(0, 0, 0, 0.3)",
};

[islemaster]

I did my best here to mimic standard node error messages, which makes this stand out nicely when something goes wrong. Here's an example failure running npm run build when there's an unresolvable reference in color.scss:

Running "exec:buildColorJs" (exec) task
>> /home/brad/Projects/code-dot-org/apps/script/build-color-js.js:52
>>     throw new Error([
>>           ^
>> Error: Unable to resolve color broken_color
>> /home/brad/Projects/code-dot-org/shared/css/color.scss:10
>> $broken_color: $teal;
>>  ^
>>     at Interface.<anonymous> (/home/brad/Projects/code-dot-org/apps/script/build-color-js.js:52:11)
>>     at Interface.emit (events.js:107:17)
>>     at Interface._onLine (readline.js:214:10)
>>     at Interface.<anonymous> (readline.js:344:12)
>>     at Array.forEach (native)
>>     at Interface._normalWrite (readline.js:343:11)
>>     at ReadStream.ondata (readline.js:91:10)
>>     at ReadStream.emit (events.js:107:17)
>>     at readableAddChunk (_stream_readable.js:163:16)
>>     at ReadStream.Readable.push (_stream_readable.js:126:10)
>> Exited with code: 1.
Warning: Task "exec:buildColorJs" failed. Use --force to continue.

Note, this sort of resolution error is equally problematic for scss (which doesn't hoist variables) so that's not some new rule we're imposing on that file.

[Bjvanminnen]

Worth a comment in colors.scss? Any way to enforce it (I think no?)

[Bjvanminnen]

Note: We have some color info in sharedJsxStyles.js that probably becomes unnecessary with this change.

[islemaster]

This regex captures any scss variable definition, so we're sort of creating a new constraint on color.scss that says we should keep it relatively simple and only define colors there. I think that was always implied, but this script formalizes it somewhat.

[Bjvanminnen]

This is pretty sweet. I semi-intended to do something like this at one point, but decided it would take me more time than I wanted. Thanks for doing it! :)

[islemaster]

Review comments addressed; PTAL.

[Bjvanminnen]

Would it make more sense to get rid of this file completely, and add remaining colors to the scss file?

[islemaster]

Yeah, maybe; I went conservative not moving anything out of apps, but since there's nothing but colors in this file right now maybe that's the right thing to do. I was going to say other common styles / style bundles might eventually live here, but personally I prefer doing that case-by-case anyway (e.g. ToggleButtonStyles.js). I'll tear this out before I merge.