parcel-bundler/parcel · error · ThrowableDiagnostic

Unknown style language: "${style.lang}"

Error message

Unknown style language: "${style.lang}"

What it means

Thrown by @parcel/transformer-vue when a <style lang="..."> value is not in the supported set (less, stylus, styl, scss, sass, css, or undefined). The switch allows these and breaks; the default branch throws. Note Parcel does NOT pre-install these preprocessors — it relies on the style compiler to invoke them.

Source

Thrown at packages/transformers/vue/src/VueTransformer.js:365

              )
            ).toString();
            if (!style.module) {
              style.module = MODULE_BY_NAME_RE.test(style.src);
            }
            style.lang = extname(style.src).slice(1);
          }
          switch (style.lang) {
            case 'less':
            case 'stylus':
            case 'styl':
            case 'scss':
            case 'sass':
            case 'css':
            case undefined:
              break;
            default:
              // TODO: codeframe
              throw new ThrowableDiagnostic({
                diagnostic: {
                  message: md`Unknown style language: "${style.lang}"`,
                  origin: '@parcel/transformer-vue',
                },
              });
          }
          let styleComp = await compiler.compileStyleAsync({
            filename: asset.filePath,
            source: style.content,
            modules: style.module,
            preprocessLang: style.lang || 'css',
            scoped: style.scoped,
            inMap: style.src ? undefined : style.map,
            isProd: options.mode === 'production',
            id,
          });
          if (styleComp.errors.length) {
            throw new ThrowableDiagnostic({

View on GitHub (pinned to 59484858a1)

Solutions

  1. Use one of: less, stylus/styl, scss, sass, css, or omit lang.
  2. Correct any typo in the existing lang attribute.
  3. If you need PostCSS/Windicss, configure it at the Parcel CSS layer rather than via Vue style lang.

Example fix

// before
<style lang="scssz">...</style>
// after
<style lang="scss">...</style>
Defensive patterns

Strategy: validation

Validate before calling

const supported = new Set(['less','stylus','styl','scss','sass','css', undefined]);
if (!supported.has(style.lang)) {
  throw new Error(`Unsupported style lang '${style.lang}'; use less, stylus, styl, scss, sass, or css.`);
}

Type guard

const SUPPORTED_STYLE_LANGS = new Set(['less','stylus','styl','scss','sass','css', undefined]);
function isSupportedStyleLang(lang) {
  return SUPPORTED_STYLE_LANGS.has(lang);
}

Prevention

When it happens

Trigger: style.lang set to an unsupported value (e.g. 'stylus-sheet', 'postcss', 'windicss') or a typo like 'scssz'.

Common situations: Typo in the lang attribute, using 'postcss' or 'windicss' (not supported as a Vue style lang here), or migrating from a loader that accepted extra values.

Related errors


AI-assisted analysis of parcel-bundler/parcel@59484858a1 (2026-08-13). Data as JSON: /api/errors/5f70ac452afe1ffd. Report an issue: GitHub.