Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Stophface opened this issue May 19, 2023 · 0 comments
Open

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

Stophface opened this issue May 19, 2023 · 0 comments

Comments

@Stophface
Copy link

Stophface commented May 19, 2023

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
@Stophface Stophface changed the title Unabel to use .css files alongside .ts(x) files with Unabel to use .css files alongside .ts(x) files May 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant