CSS prop does not work with TS (using Babel), but with JS it did

[rwieruch]

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;
  }
}

[rwieruch]

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.

[rwieruch]

Closed in favor of #29