Vite examples

[ilhamwahabi]

Hello, I would like to know how to integrate twin.macro with Vite

Just tried it before but I got an issue here vitejs/vite#1942

Thanks before

[ben-rogerson]

I had a crack at it too but hit the same roadblock - some googling came up with the replace plugin to remove process.platform but it doesn't seem to work. It may not be supported with Vite?

// vite.config.ts
import reactRefresh from '@vitejs/plugin-react-refresh'
import { babel } from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [reactRefresh(),],
  build: {
    rollupOptions: {
      plugins: [
        replace({
            'process.platform': JSON.stringify('win32')
        }), 
        babel({ babelHelpers: 'bundled' })
      ]
    }
  }
})

[ilhamwahabi]

Ah, I see. Thanks for looking into it. I also will look further into this.

[Crisis2010]

Can't get it works, any ideas?

[ben-rogerson]

If you can find a plugin that replaces process.platform in the code then we've got a chance :)

[matthewpi]

If you can find a plugin that replaces process.platform in the code then we've got a chance :)

Vite has a config option named define which according to their docs will "define global variable replacements". So now my vite.config.ts file is

import path from 'path';
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
	base: '/',
	build: {
		outDir: 'dist',
		assetsDir: 'assets',
		sourcemap: true,
	},
	plugins: [
		reactRefresh(),
	],
	resolve: {
		alias: {
			'~': path.resolve(__dirname, 'src'),
		},
	},
	define: {
		'process.platform': JSON.stringify('win32'),
	},
});

However now I get an error from the colorette package https://i.imgur.com/PmJLH9p.png
The line in question is https://i.imgur.com/ubCdbNr.png
So I then added 'process.env': {}, below the process.platform definition, which caused you guessed it, another error. https://i.imgur.com/YzC0HeZ.png

Is that last error (https://i.imgur.com/YzC0HeZ.png) expected in this situation?

[ben-rogerson]

Interesting! Looks like you got a little further along. I'll take a look into this and report back.

[ben-rogerson]

Ok we've got [email protected] + [email protected] working together!

// vite.config.ts
import reactRefresh from '@vitejs/plugin-react-refresh'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [reactRefresh()],
  define: {
      'process.platform': JSON.stringify('win32'),
      'process.env': {}, 
   },
})

// .babelrc.js
module.exports = {
  plugins: ["babel-plugin-macros"],
};

The next step would be a little more testing and then put together a twin.example 👍

[JeffBeltran]

thought i would look into this again this weekend but wanted to see if there was progress, this is great news! i'll give this a run and see where i can get with it. Thanks!

[matthewpi]

Adding the .babelrc.js file fixed that error I posted earlier, however when adding a style to a component, the generated HTML has css="[object Object]" rather than either the tailwind class names or generated css class names. My project setup can be found at https://github.com/matthewpi/cosmos-ui as a way to test this.

(The errors in the browser console are because I stopped the dev server, there are not any errors from React there)

[ben-rogerson]

Twin thinks it's running with emotion - chuck this in your package.json:

"babelMacros": {
  "twin": {
    "preset": "styled-components"
  }
},

[matthewpi]

That fixed it for me, thanks for your help.

[ben-rogerson]

Couple more changes to get it working smoothly:

• yarn add vite-plugin-babel-macros -D
• Delete .babelrc.js
• Update vite.config.js:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import macrosPlugin from "vite-plugin-babel-macros"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), macrosPlugin()],
  define: {
      'process.platform': JSON.stringify('win32'),
      'process.env': {}, 
   },
})

[ben-rogerson]

The vite + styled-components example is now live 🎉

[pix2D]

Thanks for all your hard work! FYI for me the example breaks on production compilation with TypeScript 4.2.

[ben-rogerson]

Darn, what error are you seeing there?

I just tested and had no issues building and serving the above example with:

• [email protected] + 4.2.3
• [email protected]

Build output:

 tsc && vite build
vite v2.0.5 building for production...
✓ 33 modules transformed.
dist/index.html                  0.46kb
dist/assets/index.24293ae3.js    9.52kb / brotli: 3.05kb
dist/assets/vendor.d40301a0.js   158.80kb / brotli: 46.48kb
✨  Done in 6.27s.

[pix2D]

Here is what I get on the example, just cloned it down and updated all deps to the latest version (using NPM 7.5.4 + node 15.8):

> tsc && vite build

src/styles/GlobalStyles.tsx:15:6 - error TS2322: Type '{}' is not assignable to type 'never'.

15     <CustomStyles />
        ~~~~~~~~~~~~

I fixed this as follows:

const CustomStyles = createGlobalStyle<{}>`
  ...
`

And here is what I get on the project I ported over from Snowpack:

> tsc && vite build

node_modules/@types/react/index.d.ts:2982:19 - error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.

2982         interface IntrinsicAttributes extends React.Attributes { }
                       ~~~~~~~~~~~~~~~~~~~

node_modules/twin.macro/types/index.d.ts:51:15 - error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.

51     interface IntrinsicAttributes {
                 ~~~~~~~~~~~~~~~~~~~

types/twin.d.ts:16:13 - error TS2310: Type 'SVGProps<T>' recursively references itself as a base type.

16   interface SVGProps<T> extends SVGProps<SVGSVGElement> {
               ~~~~~~~~

types/twin.d.ts:24:15 - error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.

24     interface IntrinsicAttributes<T> extends DOMAttributes<T> {
                 ~~~~~~~~~~~~~~~~~~~

types/twin.d.ts:24:46 - error TS2304: Cannot find name 'DOMAttributes'.

24     interface IntrinsicAttributes<T> extends DOMAttributes<T> {
                                                ~~~~~~~~~~~~~

I fixed that by commenting out SVGProps (don't use it) and changing the InstrinsicAttributes to:

    interface IntrinsicAttributes {

There may be a better fix but I am still learning TypeScript so... :)

[ben-rogerson]

Thanks for the reply here, I'll take another look at this and get back to you 👍