Preprocessor support (SCSS, PostCSS) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does SCSS nesting affect Svelte component styles?

Consider this Svelte component style block using SCSS:

<style lang="scss">
.parent {
  color: blue;
  .child {
    color: red;
  }
}
</style>

What CSS will be generated and applied to the component?

Svelte

<style lang="scss">
.parent {
  color: blue;
  .child {
    color: red;
  }
}
</style>

A .parent { color: blue; } .child { color: red; }

B .child { color: blue; } .parent { color: red; }

C .parent { color: blue; } .parent .child { color: red; }

D .parent .child { color: blue; } .child { color: red; }

💡 Hint

Think about how SCSS nesting combines selectors.

SCSS nesting combines selectors so .child inside .parent becomes .parent .child. The parent style applies to .parent only.

📝 Syntax

intermediate

Which PostCSS syntax is valid in a Svelte style block?

Given a Svelte component using PostCSS, which style block syntax is correct?

A

<style lang="postcss">
:root {
  --main-color: #06c;
}
</style>

B

<style lang="postcss">
@apply --main-color;
</style>

C

<style lang="css">
@apply --main-color;
</style>

D

<style lang="postcss">
:root {
  --main-color: #06c
}
</style>

💡 Hint

PostCSS supports CSS variables and standard CSS syntax.

Option A uses valid CSS variable declaration inside a PostCSS block. Option A misuses @apply with a variable, which is invalid. Option A uses wrong lang and invalid syntax. Option A misses semicolon causing syntax error.

🔧 Debug

advanced

Why does this SCSS style not apply in Svelte?

Given this Svelte component style block:

<style lang="scss">
.button {
  color: green;
  &:hover {
    color: darkgreen;
  }
}
</style>

Why does the hover style not work?

Svelte

<style lang="scss">
.button {
  color: green
  &:hover {
    color: darkgreen;
  }
}
</style>

A Svelte does not support nested selectors in SCSS style blocks.

B Missing semicolon after 'color: green' causes SCSS compile error, so hover style is ignored.

C The hover selector must be written as '.button:hover' outside nesting.

D The color 'darkgreen' is invalid and ignored by the browser.

💡 Hint

Check SCSS syntax carefully for missing punctuation.

SCSS requires semicolons after property declarations. Missing semicolon after 'color: green' causes the whole block to fail compiling, so nested hover styles do not apply.

❓ state_output

advanced

What is the effect of PostCSS autoprefixer in Svelte styles?

Consider this style block in a Svelte component using PostCSS with autoprefixer enabled:

<style lang="postcss">
.example {
  display: flex;
}
</style>

What CSS will be output to support older browsers?

Svelte

<style lang="postcss">
.example {
  display: flex;
}
</style>

A .example { display: grid; }

B .example { display: flex; }

C .example { display: block; }

D .example { display: -webkit-box; display: -ms-flexbox; display: flex; }

💡 Hint

Autoprefixer adds vendor prefixes for compatibility.

Autoprefixer adds vendor prefixes like -webkit-box and -ms-flexbox before the standard flex to support older browsers.

🧠 Conceptual

expert

How does Svelte handle scoped styles with SCSS preprocessing?

In Svelte, when using lang="scss" in a style block, how does Svelte ensure styles are scoped only to the component?

A Svelte adds unique data attributes to elements and rewrites SCSS selectors to include these attributes after preprocessing.

B SCSS automatically scopes styles by prefixing selectors with the component name.

C Svelte wraps the component in a shadow DOM to isolate styles when using SCSS.

D Svelte requires manual addition of unique classes in SCSS to scope styles.

💡 Hint

Think about how Svelte compiles components and styles.

Svelte preprocesses SCSS to CSS, then adds unique data attributes to component elements and rewrites selectors to include these attributes, ensuring styles apply only inside the component.