Unable to use SASS/SCSS with svelte-preprocess

[simonwiles]

I'm having a hard time getting this to work with SASS/SCSS through svelte-preprocess. The documentation seems to suggest this should work, but I get errors like parcel-transformer-svelte: Colon is expected that indicate that the sass compiler is not being invoked. Is there a step I'm missing?

svelte.config.js:

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess(),
};

.parcelrc:

{
  "extends": ["@parcel/config-default"],
  "transformers": {
    "*.svelte": ["parcel-transformer-svelte"]
  }
}

App.svelte:

<style lang="scss">
  header {
    h1 {
      color: red;
    }
  }
</style>

[Indyandie]

I had the same issue with less. I ended up importing my less styles inside the script in the mean time.

[simonwiles]

Yeah, I'm just having parcel handle my SASS/SCSS outside of svelte altogether at the moment, which isn't all that painful, I suppose, but it uncouples (at least physically) my styles from my components. Surely it should be possible to get this to work? With rollup, I believe, it's necessary to invoke svelte-preprocess in svelte.config.js and in the rollup config -- I wonder is there something that needs to be hooked up in .parcelrc or similar, perhaps?

[orlov-vo]

Thank you for reporting the issue! I've found some bug with reading options from config (parcel team has changed api little bit again), so I've made a small fix and released it in v1.0.8. Give me feedback does it helps or not?

[simonwiles]

Doesn't seem to make a difference in my build, I'm sorry.

[Indyandie]

Just tested with less. I am getting a different error from before.

console: (node:17466) UnhandledPromiseRejectionWarning: DataCloneError: async ({ content, filename }) => {
        if (transformers.replace) {
            const transformed = await ex...<omitted>... } could not be cloned.
    at ThreadsChild.send (/Users/andycj/Playground/color-picker/node_modules/@parcel/workers/lib/threads/ThreadsChild.js:85:62)
    at Child.send (/Users/andycj/Playground/color-picker/node_modules/@parcel/workers/lib/child.js:142:16)
    at Child.handleRequest (/Users/andycj/Playground/color-picker/node_modules/@parcel/workers/lib/child.js:245:10)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
(Use `node --trace-warnings ...` to show where the warning was created)
console: (node:17466) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
console: (node:17466) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[moevbiz]

Same issue as @simonwiles here, the compiler doesn't seem to be used. My config files are the same.

Error: Error in file src/components/Recipe.svelte: Identifier is expected (17:6)
15:       margin: 0;
16:       display: block;
17:       &:hover {
          ^
18:         transform: scale(1.1);
19:       }
    at handleError (xxx/node_modules/parcel-transformer-svelte/index.js:37:11)
    at Object.transform (xxx/node_modules/parcel-transformer-svelte/index.js:70:31)
    at async runTransformer (xxx/node_modules/@parcel/core/lib/Transformation.js:657:3)
    at async Transformation.runPipeline (xxx/node_modules/@parcel/core/lib/Transformation.js:436:36)
    at async Transformation.runPipelines (xxx/node_modules/@parcel/core/lib/Transformation.js:365:40)
    at async Transformation.run (xxx/node_modules/@parcel/core/lib/Transformation.js:277:19)
    at async Child.handleRequest (xxx/node_modules/@parcel/workers/lib/child.js:255:9)

[orlov-vo]

@moevbiz can you give your config? or publish a reproducible example?

For example I using postcss in Svelte like this:

// svelte.config.js
const postcss = require('postcss')
const postcssrc = require('postcss-load-config')

const { plugins } = postcssrc.sync()

module.exports = {
  compilerOptions: {
    customElement: true,
  },
  preprocess: {
    style: ({ content, filename }) =>
      postcss(plugins)
        .process(content, {
          from: filename,
          map: { inline: false },
        })
        .then(result => ({
          code: result.css,
          map: result.map.toJSON(),
        })),
  },
}

[moevbiz]

My config files looked the exact same as OP, I didn't configure anything else. Unfortunately I have moved away from that setup, but I'll see if I can manage to reproduce an example soon. Thanks for sharing your config, I'll try this as well.

[willstott101]

Following this example, after removing "type": "module" from my package.json, I tried this:

var sass = require('sass');

module.exports = {
  preprocess: {
    style: ({content, filename}) => {
      return new Promise((success, failure) => {
        sass.render({
          data: content,
          file: filename,
        }, (err, result) => {
          if (err)
            failure(err);
          else
            success(result);
        });
      })
    },
  }
};

But I get the following error:

TypeError: config.shouldInvalidateOnStartup is not a function
    at load (...\node_modules\parcel-transformer-svelte\loadConfig.js:43:12)
    at async loadPluginConfig (...\node_modules\@parcel\core\lib\requests\ConfigRequest.js:65:21)
    at async Transformation.loadTransformerConfig (...\node_modules\@parcel\core\lib\Transformation.js:533:5)
    at async Transformation.loadPipeline (...\node_modules\@parcel\core\lib\Transformation.js:472:20)
    at async Transformation.run (...\node_modules\@parcel\core\lib\Transformation.js:169:20)
    at async Child.handleRequest (...\node_modules\@parcel\workers\lib\child.js:217:9)

[willstott101]

shouldInvalidateOnStartup => invalidateOnStartup in the Parcel API - and shouldReload has also been removed - but I'm not sure what (if anything) it should be replaced with.

Making those changes to this plugins source didn't make the sass compilation work :(

[orlov-vo]

@willstott101 the error is fixed in v1.2.3 release