sveltejs / template-webpack

Template for building basic Svelte applications with webpack
304 stars 119 forks source link

CSS compilation error #26

Closed badunius closed 3 years ago

badunius commented 4 years ago

Bug

<style>
#view {
  grid-area: view;
  display: flex;
  flex-flow: column nowrap;
}

#view :first-child {
  margin-top: 0;
}
</style>

Produces a warning and doesn't compile the second rule

WARNING in ./src/comp/View.svelte
Module Warning (from ./node_modules/svelte-loader/index.js):
Unused CSS selector (48:0)
46: }
47: 
48: #view :first-child {
    ^
49:   margin-top: 0;
50: }
 @ ./src/App.svelte 25:0-37 51:18-22
 @ ./src/main.js
 @ multi ./src/main.js

Replacing " " with ">" (which is even better) solves the warning but leads to the wrong CSS output

#view.svelte-16764tj {
 grid-area:view;
 display:flex;
 flex-flow:column nowrap
}
#view>.svelte-16764tj:first-child {
 margin-top:0
}

.svelte-16764tj is supposed to go before ">" not after

ahsath commented 4 years ago

I think there is a space between #viex :first-childit should be #viex:first-child