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

[WIP] CSS Modules for console #1693

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

outoftime
Copy link
Contributor

This is a proof-of-concept exploring what it would be like to migrate to CSS modules. In particular, it migrates all of the styles surrounding the console to CSS modules. The console is a good test area because it’s self-contained but still encompasses several components with various shared styles.

At this point my main takeaway is that I would like to try the same exercise with styled-components, as I felt that CSS modules have noticeable downsides. Sharing styles between different modules is awkward, as is introducing variants on base rulesets. At a higher level, the whole exercise of coming up with class names, applying them to elements, and then writing selectors with rulesets seems like overkill in a scenario when each selector is pretty clearly talking about a single element (or item in a collection of elements). I get the sense from reading its docs that styled-components addresses all of these pain points.

If we do move forward with CSS modules, though, this PR needs some work before merging:

  • Use shared values rather than CSS variables
  • Introduce the cssnext pipeline to get cross-browser compatibility
  • Extract styles at build time
  • Resolve ambiguity/awkwardness around expression vs. row
  • Fix inactive console error specificity bug

Transfers Console styles into companion CSS module. Uses `css-loader`
and `style-loader`; currently nothing fancy to extract the styles into
an external stylesheet, but that will come.

Also no `react-css-modules`; I don’t find referencing a `styles` object
particularly onerous, and explicit is better than implicit.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant