Open simonwiles opened 3 years ago
I had the same issue with less. I ended up importing my less styles inside the script in the mean time.
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?
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?
Doesn't seem to make a difference in my build, I'm sorry.
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.
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)
@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(),
})),
},
}
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.
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)
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 :(
@willstott101 the error is fixed in v1.2.3 release
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 likeparcel-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
:.parcelrc
:App.svelte
: