Feature Request: Auto-convert syntax when switching between SCSS and Sass tabs in the playground

[amaralazizy]

Problem

Currently, when switching between SCSS and Sass syntax tabs in the playground, the editor only changes syntax highlighting but doesn't convert the user's code. This means:

1. If a user writes SCSS code and switches to the Sass tab, the SCSS syntax remains but with Sass syntax highlighting, causing syntax errors
2. Users must manually rewrite their code in the new syntax to see it work
3. The conversion only happens for the default example content, not for custom code

Proposed Solution

Automatically convert the user's code between SCSS and Sass syntaxes when switching tabs. This would:

• Improve learning experience: Users can write in one syntax and immediately see the equivalent in the other
• Enable syntax comparison: Learners can compare both syntaxes side-by-side while writing their own code
• Prevent confusion: No more syntax errors when switching tabs
• Match user expectations: Similar to other code playgrounds (TypeScript, Babel REPL) that show transpiled output

Current Behavior

// In playground.ts, lines 56-64
if (prop === 'inputFormat') {
  let newValue: string | undefined = undefined;
  // Show the default content in the new syntax if the editor still has
  // the default content in the old syntax.
  if (
    playgroundState.inputValue === defaultContents[previousInputFormat]
  ) {
    newValue = defaultContents[state.inputFormat];
  }
  changeSyntax(editor, state.inputFormat === 'indented', newValue);
}

Only converts when the editor contains the default example content.

Proposed Implementation

Add syntax conversion for all user code:

if (prop === 'inputFormat') {
  let newValue: string | undefined = undefined;
  
  if (
    playgroundState.inputValue === defaultContents[previousInputFormat]
  ) {
    // Show default content in new syntax
    newValue = defaultContents[state.inputFormat];
  } else {
    // Convert user's code to the new syntax
    try {
      newValue = convertSyntax(
        playgroundState.inputValue,
        previousInputFormat,
        state.inputFormat
      );
    } catch (error) {
      // If conversion fails, keep existing code and show warning
      console.warn('Failed to convert syntax:', error);
    }
  }
  
  changeSyntax(editor, state.inputFormat === 'indented', newValue);
}

Technical Challenges

1. Bidirectional conversion: The Sass compiler only converts SCSS/Sass → CSS. We need to:

   • Compile to CSS first using the previous syntax
   • Parse the CSS and format it in the target syntax
   • Or find/create a dedicated SCSS ↔ Sass converter

2. Preserving semantics: Need to ensure:

   • Comments are preserved
   • Variable names and structure remain intact
   • Formatting is readable

3. Error handling: Handle cases where conversion fails gracefully

Alternative Approaches

1. Opt-in toggle: Add a checkbox "Auto-convert syntax when switching" to preserve current behavior for users who prefer it
2. Two-way binding: Show both syntaxes simultaneously in split view
3. Use external library: Leverage existing tools like sass-convert

Questions for Maintainers

1. Is this feature aligned with the playground's goals?
2. Should conversion be always-on or opt-in?

Additional Context

This feature would particularly benefit:

• Beginners learning Sass who want to understand both syntaxes
• Teams migrating between SCSS and Sass
• Educators demonstrating syntax differences in real-time

I'm willing to implement this feature and would appreciate guidance on the preferred approach.

[nex3]

Back in the Ruby Sass days, we had a tool called sass-convert that could do this (among other things). When we moved to Dart Sass, we opted not to port this behavior over because implementing and verifying all the syntax conversions added a bunch of additional labor for every new language feature.

That said, now that we're working on supporting sass-parser, this may be unavoidable for a full 1.0.0 release. The PostCSS Syntax API, which we implement for both SCSS and the indented syntax, has a stringify() method. Currently sass.stringify() isn't specialized at all, but that really should change. If you want to contribute this feature, implementing that is the place to start.