Problems with Ember, PostCSS, SASS and @apply

Question

I'm trying to use TailwindCSS in my ember app and I ended up using this add-on to do this. But unfortunately some other add-ons require to include their 'scss' files to app styles. So I tried to add 'postcss-sass' to make it work. But it doesn't want to work with "@apply" command. Is it possible to use postcss and sass and @apply command at the moment?

My ember-cli-build.js:

postcssOptions: {
      compile: {
        extension: 'scss',
        enabled: true,
        parser: require('postcss-scss'),
        plugins: [
          {
            module: require('@csstools/postcss-sass'),
            options: {
              includePaths: ['node_modules']
            }
          },
          require('tailwindcss')('./app/tailwind/config.js'),
          ...isProduction ? [purgeCSS] : []
        ]
      }
    }

And I'm getting an error: UnhandledPromiseRejectionWarning: Error: Invalid mapping: {"generated":{"line":53,"column":-1},"source":"../../out-338-broccoli_merge_trees_full_application/app/styles/app.scss","original":{"line":52,"column":25},"name":null}

This is precisely where @apply appeared the first time.

Answer 1

It turned out the problem was with a missing semicolon in "app.scss". It worked fine when it was a plain css, and stopped working when I converted it to SASS.