-
Notifications
You must be signed in to change notification settings - Fork 506
Open
Description
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
quentinM22 and schwarzova
Metadata
Metadata
Assignees
Labels
No labels