milesj/packemon

.css.ts imports not inlined in output

SlexAxton opened this issue · 13 comments

SlexAxton commented

I am guessing this is related to #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 commented

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.

  • 🎉1
milesj commented

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 commented

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

milesj commented

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

  • ❤️1
SlexAxton commented

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

image image

Is there a flag or something I need to add?

SlexAxton commented

task is:

type: 'library'
language: 'typescript'

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

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

SlexAxton commented

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 commented

Thanks, will give this a shot.

milesj commented

Figured this out, will release shortly #240

milesj commented

Released 4.0.0-alpha.2

milesj commented

Fixed in v4

SlexAxton commented