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

chore(demos): Use CSS files directly instead of Webpack's .css.js #1916

Merged
merged 3 commits into from
Jan 10, 2018

Conversation

acdvorak
Copy link
Contributor

@acdvorak acdvorak commented Jan 9, 2018

BREAKING CHANGE: Sass source maps and hot reloading no longer work on demo pages. We can address those issues in future PRs if they become a problem. In addition, the MDC_WRAP_CSS_IN_JS env var now defaults to false.

This change:

  1. Makes it possible to dynamically switch themes at runtime (follow-up PR)
  2. Fixes the FOUC on all demo pages
  3. Fixes sporadic rendering errors on all demo pages that call getComputedStyle() on page load (e.g., ripple)
  4. Allows us to remove CSS polling from our demo JS (follow-up PR)
  5. Reduces Chrome devtools memory leaks after hot reloading

The `MDC_WRAP_CSS_IN_JS` env var now defaults to `false`
@codecov-io
Copy link

codecov-io commented Jan 9, 2018

Codecov Report

Merging #1916 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1916   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files          84       84           
  Lines        3721     3721           
  Branches      484      484           
=======================================
  Hits         3700     3700           
  Misses         21       21

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bbc479c...8db48db. Read the comment docs.

Copy link
Contributor

@lynnmercier lynnmercier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@acdvorak acdvorak merged commit d1ec729 into master Jan 10, 2018
@acdvorak acdvorak deleted the chore/demos/css-files branch January 10, 2018 23:26
acdvorak added a commit that referenced this pull request Jan 19, 2018
This PR also adds hot reloading of stylesheets that have a `data-hot` attribute.

Currently, only the theme demo page has a `<link rel="stylesheet" href="..." data-hot>` element, but I plan to create follow-up PRs to add hot swapping to the remaining demo pages. Hot swapping was broken when we switched to CSS files in #1916.

When Webpack starts recompiling our Sass, the theme demo page displays a linear-progress bar in the toolbar until compilation finishes, at which point it automatically swaps in the new stylesheet.

I tested this PR in:

- Chrome 63 (desktop and mobile)
- Firefox 57 (desktop)
- Safari 11 (desktop and mobile)
- IE 11
- Edge 14
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