.css.ts imports not inlined in output

[SlexAxton]

I am guessing this is related to https://github.com/milesj/packemon/issues/229.

When I import File.css.ts it no longer throws an error, but also it does not inline the import into the index.js output file. So in the eventual build I'm missing all of the css files and they are not inlined.

So my build output will succeed, but esm/index.js will contain stuff like:

import { link } from './Link.css';
import { card } from './Card.css';

But packemon won't output those Link.css.ts and Card.css.ts files.

I haven't been able to dive too far into packemon, but I assume there's some other place where something is assuming that these are real .css files and not .css.ts files.

[SlexAxton]

Ooh, I can also confirm that if I change my .css.ts file to .vss.ts and import it as File.vss - then it is correctly inlined. So I think that should more or less narrow it down to packemon handling .css in a weird way.

[milesj]

I think the fact is that './Link.css' being a TS file under the hood is just bad design on their part. I'm not sure there's an easy way around this from Packemon's side, so I think I'll just add a setting to disable the asset stuff.

[SlexAxton]

Potential middle ground would be control over that constant of asset file extensions.

[milesj]

@SlexAxton I just released 4.0.0-alpha.0, can you give that a shot?

[SlexAxton]

I haven't changed any configuration, but by default I still have the same issue:

Is there a flag or something I need to add?

[SlexAxton]

task is:

type: 'library'
language: 'typescript'

tasks:
  build:
    command:
      - 'packemon'
      - 'pack'
      - '--addEngines'
      - '--declaration'
    inputs:
      - '@globs(sources)'
      - 'package.json'
      - 'tsconfig.*.json'
    outputs:
      - 'esm'

[milesj]

Whats the content of one of these css files, so I can test it thoroughly

[SlexAxton]

Minimum viable .css.ts file is gonna be something like:

style.css.ts

import {style} from '@vanilla-extract/css';

export const redText = style({
  color: 'red',
});

Component.tsx

import {redText} from './style.css';

export const MyComponent = (props) => (
  <div className={redText} {...props} />
);

packemon.config.js

Then technically we'd also want to make sure these got built at build time. I have this configured, but it fails for the same reason with or without this configuration at the moment.

const {vanillaExtractPlugin} = require('@vanilla-extract/rollup-plugin');

module.exports = {
  rollupInput(config) {
    config.plugins.unshift(vanillaExtractPlugin());
  },
};

Result

The resulting build output without the plugin added should just be the .css.ts file is inlined as a module just like other .ts files.

The resulting build output with the plugin should more or less replace the contents of style.css.ts with:

export const redText = 'redtextclass-982398';

and then the rollup file also ends up generating a css output file at like esm/assets/src/style.css.ts.vanilla.css and it would have something like:

.redtextclass-982398 {color:red}

[milesj]

Thanks, will give this a shot.

[milesj]

Figured this out, will release shortly https://github.com/milesj/packemon/pull/240

[milesj]

Released 4.0.0-alpha.2

[milesj]

Fixed in v4

[SlexAxton]

it did indeed work, i think, in my small test! Thanks so much!

Alex Sexton

On Sat, Mar 9, 2024 at 6:12 PM Miles Johnson @.***> wrote:

Fixed in v4

— Reply to this email directly, view it on GitHub https://github.com/milesj/packemon/issues/235#issuecomment-1987019404, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAXSKQRW6ZNQZPADWVBQR3YXOQN7AVCNFSM6AAAAABDILJDXSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGAYTSNBQGQ . You are receiving this because you were mentioned.Message ID: @.***>