Skip to content

Simplify Rover CSS module scope name#165

Merged
mdespuits merged 1 commit intomasterfrom
better-css-module-names
Apr 24, 2020
Merged

Simplify Rover CSS module scope name#165
mdespuits merged 1 commit intomasterfrom
better-css-module-names

Conversation

@mdespuits
Copy link
Copy Markdown
Contributor

This simplifies the CSS class name generation considerably. Instead of .styles__Avatar-{hash} format, it now is simply .rvr-{hash}. Not only does this clarify that this is a Rover class, but it shortens the classname itself and shrinks the build output a bit

Comment thread example/yarn.lock
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

"lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
"lodash@>=3.5 <5", lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Guess we missed a yarn install on a previous deploy?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Maybe? This is the example/yarn.lock which doesn't get updated as often

Copy link
Copy Markdown
Contributor

@pixelbandito pixelbandito left a comment

Choose a reason for hiding this comment

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

🌻🥪

@dkordik
Copy link
Copy Markdown
Collaborator

dkordik commented Apr 24, 2020

This simplifies the CSS class name generation considerably. Instead of .styles__Avatar-{hash} format, it now is simply .rvr-{hash}. Not only does this clarify that this is a Rover class, but it shortens the classname itself and shrinks the build output a bit

is there a debugging cost to this? inspecting an element no longer tells you what component is applying a style?

@mdespuits
Copy link
Copy Markdown
Contributor Author

@dkordik There may be, but 99% of the time active development on Rover will be using the webpack config which includes the name. For the rollup production build it makes sense to use smaller classnames and rely on Component name and CSS sourcemaps to keep the dependencies smaller

This simplifies the CSS class name generation considerably. Instead
of `.styles__Avatar-{hash}` format, it now is simply `.rvr-{hash}`. Not
only does this clarify that this is a Rover class, but it shortens the
classname itself and shrinks the build output a bit
@mdespuits mdespuits force-pushed the better-css-module-names branch from 849a4d7 to d29b60e Compare April 24, 2020 15:50
@mdespuits mdespuits merged commit 7aa2601 into master Apr 24, 2020
@mdespuits mdespuits deleted the better-css-module-names branch April 24, 2020 15:52
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.

4 participants