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

feat(svelte): warn on unquoted class attributes #690

merged 2 commits into from Nov 26, 2019

feat(svelte): warn on unquoted class attributes #690

merged 2 commits into from Nov 26, 2019


Copy link

tivac commented Nov 25, 2019


Warn users whenever an unquoted class={} is discovered.

Motivation and Context

The svelte preprocessor can create subtle bugs in cases where the user types something like class={}, this is fine assuming that is replaced with a single class but fails hard if there's any composition involved.

Single-class case ✔

-<div class={}>
+<div class=foo>

which is treated by the browser as <div class="foo">

Multi-class case 💀

-<div class={css.fooandbar}>
+<div class=foo bar>

which is treated by the browser as <div class="foo" bar>, which is definitely a problem.

More background on unquoted attributes is available from Mathias Bynens.

How Has This Been Tested?

Added tests!

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)


  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
tivac added 2 commits Nov 25, 2019
Also standardize errors/warnings a bunch and modernize test files a bit.
@tivac tivac self-assigned this Nov 25, 2019

This comment has been minimized.

Copy link

codecov bot commented Nov 25, 2019

Codecov Report

Merging #690 into master will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #690      +/-   ##
+ Coverage   98.44%   98.45%   +0.01%     
  Files          45       45              
  Lines        1157     1168      +11     
  Branches      179      181       +2     
+ Hits         1139     1150      +11     
  Misses         15       15              
  Partials        3        3
Impacted Files Coverage Δ
packages/svelte/svelte.js 100% <100%> (ø) ⬆️

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 0e913b0...b156a21. Read the comment docs.

@tivac tivac merged commit 846f4db into master Nov 26, 2019
9 checks passed
9 checks passed
Header rules No header rules processed
Pages changed All files already uploaded
Redirect rules No redirect rules processed
Mixed content No mixed content detected
codecov/patch 100% of diff hit (target 98.44%)
codecov/project 98.45% (+0.01%) compared to 0e913b0
continuous-integration/travis-ci/pr The Travis CI build passed
continuous-integration/travis-ci/push The Travis CI build passed
deploy/netlify Deploy preview ready!
@tivac tivac deleted the warn-on-unquoted branch Nov 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
1 participant
You can’t perform that action at this time.