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

Add script to generate overrides CSS file #118

Merged
merged 5 commits into from Nov 3, 2016
Merged

Conversation

kadamwhite
Copy link
Contributor

This naively transforms the built CSS to the subset of rules for ONLY
look-and-feel styles; anything not relating to font or color is removed.

I am working on getting Webpack to respect the ordering so that this sheet
loads last.

Sample generated CSS output:

.topic-bar-chart .note {
  font-style: italic;
}

.topic-bar-chart .topic-bar-container {
  background-color: #bbb;
}

.topic-bar-chart .topic-bar {
  background-color: #838383;
}

.topic-bar-chart .bar-group.selected,
.topic-bar-chart .bar-group:focus,
.topic-bar-chart .bar-group:hover {
  outline-color: hsla(0,0%,60%,.1);
}

.topic-bar-chart .bar-group.selected .topic-bar,
.topic-bar-chart .bar-group:focus .topic-bar,
.topic-bar-chart .bar-group:hover .topic-bar {
  background-color: red;
}

We could make this smarter, or use it as a basis for a curated subset, or leave it as-is; thoughts?

@kadamwhite
Copy link
Contributor Author

Note that when run from within the build script, this outputs the overrides file into both the public/ and the build/ directories, through the magic of that existing build script. We'll probably want to commit the local version in public/ so that we don't encounter a 404 on a missing stylesheet when checking out a new repo.

@kadamwhite
Copy link
Contributor Author

Hold on merging, addressing issues with assistance from @mzgoddard

@iros
Copy link
Contributor

iros commented Nov 2, 2016

@kadamwhite testing locally

@kadamwhite
Copy link
Contributor Author

@iros test the generation and give me your thoughts on the output content, but this doesn't quite get injected right currently

This naively transforms the built CSS to the subset of rules for ONLY
look-and-feel styles; anything not relating to font or color is removed.

I am working on getting Webpack to respect the ordering so that this sheet
loads last.
Note: this only applies to the production build!
@kadamwhite
Copy link
Contributor Author

This now runs only on the production Webpack build, and injects the built file into the build/ directory as build/overrides.css.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants