CSS Imports Getting Removed from Build Output

[thomas-j-moffett]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFChIsOAHJ8qGBwDGqVHMkT0ADxnw2JHMibwSyAHYqY3C3ACyATwDCFSBfQWYACjDkwqACUiBJwcCoQFkpwANoWOCDoADRwGDAAcgnoALpwALwoGNh46N5U2OgAbuhUgVphUOgwyFB23qFhcAA8LMCVAHwdnd3AFmDIMEPD4ep5CAhT0%2BEQTNAAXNSNLFRJi52EhHthlThMyOhz8YmHS2GRzgAWOBYA5hcI3lWeMMF5%2FalNTKJT7VLwcXBQN7KE5ndCBG7THiDJYACXQTFWAEI4ABJcLPOBQSxweI2apMRxwUZwABK6Bw1hSADVzilMOT8CkAIoAd2AAGsUs8WHAQM9KSBoAQyFkedB%2BahMVMujxegMOnUJIQgA%3D%3D%3D

Expected Behaviour

I expect the CSS imports to stay in the file.

I'm not expecting anything fancy for Mitosis to handle CSS, but I needed the imports to remain in the file. Your docs show that is supposed to be a possibility: https://mitosis.builder.io/docs/components/#import-css-file

I thought that it was supposed to work that way, and weirdly enough, the Playground does show it working that way, but I was able to reproduce the issue following your Quickstart docs (see my additional info section).

I only tried this with React. I have not tried other frameworks/libraries for output.

Actual Behaviour

CSS imports are getting removed from the output.

Additional Information

I thought this was maybe just a problem in my project, but I created a completely separate test project from scratch using the Quickstart in your docs, and I was able to reproduce the issue. I tried to keep everything at defaults and only add my CSS import.

npm create @builder.io/mitosis@latest

> npx
> create-mitosis

┌  Welcome to Mitosis! Let's get started.
│
◇  What is your Mitosis project name?
│  my-project
│
◇  Select your desired outputs
│  react
│
◇   ────────────────────────────╮
│                               │
│  Generating your template...  │
│                               │
├───────────────────────────────╯
│
◇   ────────────────────╮
│                       │
│  Template generated!  │
│                       │
├───────────────────────╯
│
◇  Install dependencies?
│  Yes
│
◇   ─────────────────────────────────────────────────╮
│                                                    │
│  Installing dependencies...this may take a while!  │
│                                                    │
├────────────────────────────────────────────────────╯

Then, in the my-project/library/src/autocomplete/autocomplete.lite.tsx file I added a import './test.css'; line:

import { For, onUpdate, Show, useStore } from '@builder.io/mitosis';
import './test.css';

export type Props = {

...

Then, the output file my-project/library/packages/react/src/autocomplete/autocomplete.tsx, had this content at the top (and test.css import is nowhere in the file):

"use client";
import * as React from "react";
import { useState, useEffect } from "react";

export type Props = {
...

[thomas-j-moffett]

I think I tracked it down to this change: af43f50#diff-859c2c3ada7a04b9d0a45853a907e1e7611a232190a6e42666c289d216debc75

It's in the packages/core/src/parsers/jsx/imports.ts file.

It seems that before that change, the importObject returned from mapImportDeclarationToMitosisImport was always added to the context.builder.component.imports. But afterwards, it was only added if the importObject.imports was not empty. The importObject.imports appears to always be empty for import declarations in the format import './test.css';.

It looks like changing this:

if (Object.keys(importObject.imports).length > 0) {
  context.builder.component.imports.push(importObject);
}

back to this:

context.builder.component.imports.push(importObject);

allows the import './test.css'; declaration to be preserved.

I don't know what implications changing that will have though, so I don't want to try and proceed with a fix without further feedback.

Also, I don't know if this is what should be changed or if the mapImportDeclarationToMitosisImport function needs to change to add to the importObject.imports for an import with the format import './test.css';.