CSS prop does not work with TS (using Babel), but with JS it did
Closed this issue · 2 comments
The last days I converted a library of mine from JavaScript to TypeScript. Everything works except for one thing: Previously I have used babel-plugin-styled-components to enable the css prop in my library. Everyone who used the library had to install styled-components as dependency therefore. Since I moved to TS, I read up that I had to use typescript-plugin-styled-components now.
So added it, rebuild and published the library, but got the following warning without the CSS being applied when using the library in a third-party project.
Warning: Invalid value for prop `css` on <div> tag.
A third-party minimal project where I use the library can be seen here. One can see in the console the warning and in the browser the non-styled HTML.
Let's get to the library which I upgraded to TS and which uses the typescript-plugin-styled-components package. The up-to-date implementation can be found here.
I use it in my rollup.config.js which is the following:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import del from 'rollup-plugin-delete';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import ts from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import createStyledComponentsTransformer from 'typescript-plugin-styled-components';
import pkg from './package.json';
const styledComponentsTransformer = createStyledComponentsTransformer();
export default {
input: {
main: './src/index.ts',
types: './src/types/index.ts',
common: './src/common/index.ts',
table: './src/table/index.ts',
theme: './src/theme/index.ts',
sort: './src/sort/index.ts',
select: './src/select/index.ts',
tree: './src/tree/index.ts',
pagination: './src/pagination/index.ts',
},
output: [
{
name: '@table-library/react-table-library',
dir: `${__dirname}/lib`,
format: 'es',
sourcemap: true,
entryFileNames: '[name].js',
// preserveModules: true,
},
],
external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
plugins: [
del({ targets: 'lib/*' }),
peerDepsExternal(),
postcss({
modules: true,
}),
resolve({
browser: true,
}),
commonjs({
sourceMap: true,
exclude: 'src/**',
}),
ts({
transpiler: 'babel',
transformers: [
() => ({
before: [styledComponentsTransformer],
}),
],
}),
terser({
module: true,
}),
],
};
I am not a 100% sure about this, but I think the rollup configuration still picks up my .babelrc file where I still use babel-plugin-styled-components if that matters:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"babel-plugin-styled-components",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-optional-chaining",
[
"module-resolver",
{
"alias": {
"@table-library/react-table-library/types": "./src/types",
"@table-library/react-table-library/common": "./src/common",
"@table-library/react-table-library/table": "./src/table",
"@table-library/react-table-library/theme": "./src/theme",
"@table-library/react-table-library/resize": "./src/resize",
"@table-library/react-table-library/sort": "./src/sort",
"@table-library/react-table-library/select": "./src/select",
"@table-library/react-table-library/tree": "./src/tree",
"@table-library/react-table-library/pagination": "./src/pagination"
}
}
],
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
],
"env": {
"test": {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
}
}
In addition, because I have found it in the documentation of this library, I added this library to my tsconfig.json too:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"paths": {
"@table-library/react-table-library/types/*": ["./src/types/*"],
"@table-library/react-table-library/common/*": ["./src/common/*"],
"@table-library/react-table-library/table/*": ["./src/table/*"],
"@table-library/react-table-library/theme/*": ["./src/theme/*"],
"@table-library/react-table-library/resize/*": ["./src/resize/*"],
"@table-library/react-table-library/sort/*": ["./src/sort/*"],
"@table-library/react-table-library/select/*": ["./src/select/*"],
"@table-library/react-table-library/tree/*": ["./src/tree/*"],
"@table-library/react-table-library/pagination/*": ["./src/pagination/*"]
},
"plugins": [
{
"transform": "typescript-plugin-styled-components",
"type": "config"
}
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"declaration": true,
"jsx": "react-jsx",
"importHelpers": true,
"removeComments": true,
"typeRoots": ["node_modules/@types"]
},
"include": ["src"]
}
Essentially that's it. I hoped to get the CSS prop running again when I switched the library to TS, but whatever I do it doesn't work. Can anyone spot anything that's missing or wrongfully configured here? Very much appreciate any help that I can get here!
Not sure if related, but I also had to implement a styled.d.ts file in my library to please the type checking for the CSS prop:
import { CSSProp } from 'styled-components';
declare module 'react' {
interface Attributes {
css?: CSSProp;
}
}
Seems to be related to no css prop support. How difficult would it be to integrate it in this library @Igorbek ? Hard to tell from my perspective, because I am not super much into build tools unfortunately.