.css.ts imports not inlined in output about packemon HOT 13 CLOSED

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.

from packemon.

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

from packemon.

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.

from packemon.

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

from packemon.

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?

from packemon.

task is:

type: 'library'
language: 'typescript'

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

from packemon.

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

from packemon.

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}

from packemon.

Thanks, will give this a shot.

from packemon.

Figured this out, will release shortly #240

from packemon.

Released 4.0.0-alpha.2

from packemon.

Fixed in v4

from packemon.

from packemon.