chip-group.scss has an invalid selector :global

[CherryDT]

[!] (plugin svelte) ParseError: :global() must contain a selector
node_modules/attractions/chip/radio-chip-group.svelte
66:   flex-wrap: wrap;
67: }
68: div :global .chip {
        ^
69:   margin-right: 0.5em;
70:   margin-top: 0.5em;
ParseError: :global() must contain a selector

[illright]

Do you have svelte-preprocess installed and configured?

[CherryDT]

Yes:

'use strict'

import preprocess from 'svelte-preprocess'
import { dirname, join } from 'path'
import { fileURLToPath } from 'url'
import makeAttractionsImporter from 'attractions/importer.js'

const __dirname = dirname(fileURLToPath(import.meta.url))

const production = !process.env.ROLLUP_WATCH

const svelteConfig = {
  compilerOptions: {
    // enable run-time checks when not in production
    dev: !production
  },
  onwarn: (warning, handler) => {
    // Suppress warnings from modules which we have no control over (e.g. Svelma)
    if (warning.filename.includes('node_modules/')) return
    handler(warning)
  },
  preprocess: preprocess({
    scss: {
      importer: makeAttractionsImporter({
        themeFile: join(__dirname, 'styles/theme.scss')
      }),
      includePaths: [__dirname]
    }
  })
}

export default svelteConfig

[CherryDT]

I found the problem - I had to install postcss as peer dependency. It's surprising that this is what happens when it's missing, though...