Does tailwind.macro has typescript support ?

[bipsBro]

I am using this package(tailwind.macro) on my typescript project, I got error any where i try to import as

  import tw from "tailwind.macro";

got error with message

Could not find a declaration file for module 'tailwind.macro'. 
'node_modules/tailwind.macro/macro.js' implicitly has an 'any' type.
 Try `npm install @types/tailwind.macro` if it exists or add a new declaration (.d.ts) file containing 
 `declare module 'tailwind.macro';`

currently there is no package named @types/tailwind.macro on npm.

is there is any type definition file for this package?

[zlatanpham]

@bipsBro you can define your local definition like below to make the compiler happy.

declare module 'tailwind.macro'

[cabello]

Hello, I tried this module declaration and for some reason it did not work. 🤔

I also tried:

declare module 'tailwind.macro' {
  export default function tw(string: TemplateStringsArray): string;
}

The error I get when trying to load the page:

Failed to compile.

./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in '/Users/john/project/node_modules/babel-plugin-macros/node_modules/resolve-from'

I am using:

• babel-plugin-macros@2.8.0
• tailwind.macro@1.0.0-alpha.10

The code excerpt I am using just to check if it can compile and use the macro:

import styled from 'styled-components';
import tw from 'tailwind.macro';
const Button = styled.button`
  ${tw`bg-gray-300 text-yellow-900 px-8 m-8 rounded h-20 text-3xl`}
`;
console.log(Button);

I also got extra potentially useful errors in the console:

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/tailwind.macro/macro.js 1178:49-68
Critical dependency: the request of a dependency is an expression

I also tried additional things like:

• adding "@babel/preset-typescript": "^7.9.0", to my dependencies and configure it on babel.config.js
• adding "typescript-transform-macros": "^1.1.1", to my dependencies and configure it on tsconfig.json

I ran out of ideas, any thoughts? I appreciate any replies 🙏

[paul-vd]

@cabello using the declaration that you supplied works fine for me

I suppose it it your typescript setup that is incorrect?

Do you have a minimal reproduction URL then we could have a closer look?

[ben-rogerson]

Checkout Twin - it received TypeScript support yesterday.

[cabello]

HI @ben-rogerson, thank you for working on Twin. I just tried Twin and got the same error :( @PaulPCIO I do not discard the possibility of being my setup, I am using webpacker, this is my package.json:

{
  "name": "app",
  "private": true,
  "engines": {
    "node": "12.16.x"
  },
  "dependencies": {
    "@babel/preset-react": "^7.8.3",
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "@types/jest": "^24.0.25",
    "@types/markdown-to-jsx": "^6.9.1",
    "@types/mustache": "^4.0.0",
    "@types/node": "^13.1.4",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-icons": "^3.0.0",
    "@types/react-router-dom": "^5.1.3",
    "@types/styletron-engine-atomic": "^1.1.0",
    "@types/styletron-react": "^5.0.2",
    "@types/styletron-standard": "^2.0.0",
    "agora-rtc-sdk": "^3.0.2",
    "axios": "^0.19.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "baseui": "^9.52.0",
    "csstype": "^2.6.10",
    "dotenv": "^8.2.0",
    "firebase": "7.13.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-icons": "^3.9.0",
    "react-redux": "7.1.1",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "styletron-engine-atomic": "^1.4.6",
    "styletron-react": "^5.2.7",
    "ts-loader": "^6.2.2",
    "turbolinks": "^5.2.0",
    "twin.macro": "^1.0.0-alpha.9",
    "typescript": "^3.8.3",
    "unstated-next": "^1.1.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "babel-plugin-emotion": "^10.0.33",
    "eslint-plugin-baseui": "^9.67.2",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react-hooks": "^3.0.0",
    "prettier": "^2.0.3",
    "source-map-loader": "^0.2.4",
    "tslint": "^6.1.1",
    "tslint-config-prettier": "^1.18.0",
    "webpack-dev-server": "^3.10.3"
  },
  "eslintConfig": {
    "extends": "react-app",
    "plugins": [
      "prettier",
      "react-hooks",
      "baseui"
    ],
    "rules": {
      "prettier/prettier": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react-hooks/rules-of-hooks": "error",
      "baseui/deprecated-theme-api": "warn",
      "baseui/deprecated-component-api": "warn",
      "baseui/no-deep-imports": "warn"
    }
  },
  "prettier": {
    "jsxSingleQuote": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I see there is a webpacker v5.0.1 and I am on v4.2.2, I will attempt to upgrade it to see if that fixes anything. The fact that I don't know what's causing the issue makes everything more challenging, I searched repos like babel macros, webpack, webpacker and didn't find much. On the console this is the error I get:

TypeError: twin_macro__WEBPACK_IMPORTED_MODULE_9___default.a.input is not a function`. 

This is the component I attempted displaying:

const Inp = tw.input`border hover:border-black`;

It's worth mentioning that emotion styled components do work with the macro, e.g. styled.input. 🤔

[cabello]

I suspect it's something with my typescript configuration, I extracted a .jsx file and put the following content:

import React from 'react';
import tw from 'twin.macro';

const Input = tw.input`border hover:border-black`;
export default () => <Input />;

Then I imported that component in my .tsx file and used it. Et voilà:

(black border on hover)

I've been trying random changes into my tsconfig.json cause I am clueless:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "paths": {
      "*": ["node_modules/*", "app/javascript/*"]
    },
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./app/javascript"
  },
  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
  "include": ["app/javascript/**/*"],
  "compileOnSave": false
}

I did not touch my webpack configuration yet:

const PnpWebpackPlugin = require('pnp-webpack-plugin')

module.exports = {
  test: /\.tsx?(\.erb)?$/,
  use: [
    {
      loader: 'ts-loader',
      options: PnpWebpackPlugin.tsLoaderOptions()
    }
  ]
}

Thoughts?

[cabello]

I was able to get the macro working by switching from ts-loader to babel-loader:

I added yarn add --dev @babel/preset-typescript babel-loader.

My loader configuration:

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  test: /\.tsx?(\.erb)?$/,
  use: [
    {
      loader: 'babel-loader',
      options: PnpWebpackPlugin.tsLoaderOptions(),
    },
  ],
};

Add the following to babel.config.js, plugins section:

['@babel/preset-typescript', { allExtensions: true, isTSX: true }],

I still see no colors, styling, but I think I am very close to get it working.

[cabello]

With twin I got better error output:

✕ bg-purple was not found

I was able to create a button without colors but white:

const Button = tw.button`
  text-xs
  font-semibold
  rounded-full
  px-4 py-1
  leading-normal
  bg-white
  border
  hover:text-white
`;

[ben-rogerson]

great to hear you're making progress there.
Just to confirm, colours like red 500 aren't working?

const Button = tw.button`
  text-red-500
`;

Perhaps post the contents of your tailwind.config.js, if you have one?