Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from Mar 17, 2016
Merged

Conversation

@islemaster
Copy link
Member

islemaster commented Mar 17, 2016

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 added 2 commits Mar 17, 2016
Enforce non-terminal mode for readline.createInterface()
See jashkenas/coffeescript#1078 (comment)
colorScssPath + ':' + currentLine,
line,
' ^'
].join('\n'));

This comment has been minimized.

Copy link
@islemaster

islemaster Mar 17, 2016

Author Member

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.

This comment has been minimized.

Copy link
@Bjvanminnen

Bjvanminnen Mar 17, 2016

Contributor

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

@Bjvanminnen

This comment has been minimized.

Copy link
Contributor

Bjvanminnen commented Mar 17, 2016

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

var colorJsPath = path.resolve('./src/color.js');

// Regular expression to capture a color definition from SCSS
var colorRe = /\$(\w+)\s*:\s*([^;]+);/;

This comment has been minimized.

Copy link
@islemaster

islemaster Mar 17, 2016

Author Member

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.

// color definitions. Since we're reading them in order,
// we can recursively resolve these referential defintions
// until we land on an actual color.
function resolveColor(value) {

This comment has been minimized.

Copy link
@islemaster

islemaster Mar 17, 2016

Author Member

Resolving colors lets us export entries like $level_submitted: $purple; as level_submitted: "#7665a0",

@Bjvanminnen

This comment has been minimized.

Copy link
Contributor

Bjvanminnen commented Mar 17, 2016

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 added 2 commits Mar 17, 2016
@islemaster

This comment has been minimized.

Copy link
Member Author

islemaster commented Mar 17, 2016

Review comments addressed; PTAL.

charcoal: '#5b6770',
green: '#b9bf15',
white: '#fff',
orange: '#ffa400',

This comment has been minimized.

Copy link
@Bjvanminnen

Bjvanminnen Mar 17, 2016

Contributor

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

This comment has been minimized.

Copy link
@islemaster

islemaster Mar 17, 2016

Author Member

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.

islemaster added a commit that referenced this pull request Mar 17, 2016
Generate apps/src/color.js from shared/css/color.scss
@islemaster islemaster merged commit 42b176a into staging Mar 17, 2016
5 checks passed
5 checks passed
ci/circleci Your tests passed on CircleCI!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
coverage/coveralls Coverage increased (+0.03%) to 84.947%
Details
hound No violations found. Woof!
@islemaster islemaster deleted the generate-color-js branch Mar 17, 2016
@islemaster islemaster restored the generate-color-js branch Mar 17, 2016
deploy-code-org added a commit that referenced this pull request Mar 18, 2016
26954f8 Merge pull request #7369 from code-dot-org/icon-color-picker (Josh Lory)
53cfb6e add column in cdo-languages for which languages are supported on hoc.com (Continuous Integration)
7ca9bc8 Merge pull request #7371 from code-dot-org/use-color-js (Brad Buchanan)
3761f86 fix path to unbreak build (Brent Van Minnen)
f4526fa Merge branch 'staging' into icon-color-picker (Josh Lory)
ba63a4d Code review feedback (Josh Lory)
42b176a Merge pull request #7367 from code-dot-org/generate-color-js (Brad Buchanan)
@davidsbailey davidsbailey deleted the generate-color-js branch Mar 22, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.