How to import a generated asset in Parcel 2?

[episage]

I wrote a transformer for lol-lang.

*.lol - transforms into -> *.scss + *.js

  async transform({ asset, ast, config, logger, resolve, options }) {
        var code = await asset.getCode();
        var { js, css } = transpile(code, asset.filePath);
        
        var assets = [
            {
                type: 'js',
                content: js,
            },
            {
                type: 'scss',
                content: css,
            }
        ]        

        return assets;
    },

Is it possible that I can access this scss generated asset from source code?

Im asking because there is a mixin generated in that scss asset. I want to import it in source code. However I try, my code does not see it.

app.lol

<style>
  @import '/c/microlabel'; // <- here I tried different options like microlabel.scss/.sass/.lol
   
</style> 

🚨 Build failed.
@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
2 │ @import '/c/microlabel'; // <- here I tried different options like microlabel.scss/.sass/.lol
  │         ^^^^^^^^^^^^^^
  ╵
  src/app.lol 2:9  root stylesheet

.parcelrc

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

Any hints?

[mischnic]

I don't fully understand what you are trying to import from where, but:

There is a way to import a new child asset:

        asset.addDepenedency({ moduleSpecifier: "XYZ"});
        var assets = [
            {
                type: 'js',
                content: js,
            },
            {
                type: 'scss',
                content: css,
                uniqueKey: "XYZ"
            }
        ]        

(Similar:

parcel/packages/transformers/html/src/inline.js

Lines 85 to 99 in 46e8ffa

	asset.addDependency({
	moduleSpecifier: parcelKey,
	});
	parts.push({
	type,
	content: value,
	uniqueKey: parcelKey,
	isInline: true,
	env,
	meta: {
	type: 'tag',
	node,
	},
	});

)

If this doesn't work in your situation, please provide more details and/or more code samples

[episage]

@mischnic Thanks for your reply. It is something different.

*.lol - transpiles to -> *.js + *.scss

*.scss contains a SCSS mixin that I would like to import. Since the mixin is in the scss asset I should be able to reference it.

Minimal example

fancy-button.lol - contains just styles for the example sake

<style>
  background: crimson; /* fancy color! */
</style> 

fancy-button.scss - this is generated Parcel 2 asset from fancy-button.lol; it does not exist on disk

@mixin styles() { // <- this is the SCSS mixin I want to import inside app.lol
  background: crimson; /* fancy color! */
}
  
.style-1oe0mtk {
  @include styles();
}

app.lol

<style>
  @use "fancy-button.scss" as fb; /* !!! ./fancy-button.scss does not exist on disk. It is generated by `parcel-transformer-lol` while bundling. How to import (reference) it? */

  .my-button {
    @include fb.styles();
  }
</style> 

<div>
  <div class="my-button">this is a button</div>
</div>

@parcel/transformer-sass: Can't find stylesheet to import.
  ╷
1 │ @use "fancy-button.scss" as fb;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app.lol 1:1  root stylesheet

• the Parcel's error message makes sense because the file does not exist on disk. However I expect the file (?) to exist somewhere (where?) because it has been generated by parcel-transformer-lol (virtual file system?)
• SCSS @use directive is correctly transpiled so it is always at very the top of the SCSS asset

How can I reference such generated scss asset?

[mischnic]

I see

However I expect the file (?) to exist somewhere (where?) because it has been generated by parcel-transformer-lol (virtual file system?)

This asset doesn't exist on any filesystem. I think using the SCSS transformer isn't possible in this case because a transformer doesn't have access to another transformer's result (including children) as they run in parallel. Other possibilities would be a packager or running SCSS manually in your transformer (and using a custom importer like here:

parcel/packages/transformers/sass/src/SassTransformer.js

Line 71 in 46e8ffa

importer: [...rawConfig.importer, resolvePathImporter({resolve})],

)

Looks like this language is similar to svelte?

[episage]

I'm so glad you pointed me in a direction. Thanks.

Yeah

• Svelte inspired
• Svelte-like performance
• JSX
• nested observables support (~trimmed down MobX)
• SCSS
• Preact
• React compat on demand

and all that goodies contained in 7kB gzipped runtime bundle flat.

It works and it took me ~200LOC to develop in Parcel 2.

[episage]

It turned out that it is way easier to watch for changes in 'src' dir (chokidar) and run 'transpile(..)' on changed '.lol' files. Parcel 2 watches for changes in 'manually-transpiled' directory