jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.2k stars 505 forks source link

Unabel to use .css files alongside .ts(x) files #1181

Open Stophface opened 1 year ago

Stophface commented 1 year ago

Current Behavior

tsdx is unable to build the library because of .css files

Expected behavior

I want the build to run with .css files

Suggested solution(s)

Well, I have none, that is why I am here...

Additional context

I am currently writing a custom component library in React. Obviously, this requires styling of the components. So each component, like <Button /> has an accompanying CSS file which is imported in each component by import ./styles.css.

// Button.tsx
import React from 'react'
import './styles.css

interface ButtonProps {
    ...
}

const Button = ({ ... }: ButtonProps) => {
    return <button className='button-container' onClick=... />
}

export default Button;

However, when I try to build the library, I am getting

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) at C:\Users...\src\atmos\base-text\styles.css:1:0

And it gives me syntax highlight

1: .button-container {
   ^
2:     font-family: var(--main-font);
3: }

This is my tsdx.config.js file

/* eslint-disable @typescript-eslint/no-var-requires */
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
    /**
     * @param {import('rollup/dist/rollup').InputOptions} config
     */
    rollup(config, options) {
        config.plugins.push(
            postcss({
                modules: true,
                plugins: [
                    autoprefixer(),
                    cssnano({
                        preset: 'default',
                    }),
                ],
                sourceMap: true,
                inject: true,
                extract: false,
            })
        );
        return config;
    },
};

How can I include .css files into my library?

Your environment

  System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.83 GB / 15.69 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.35)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1
    typescript: ^5.0.4 => 5.0.4