#How do I import another modules into twind.config.ts?

30 messages · Page 1 of 1 (latest)

past roost
#

For example, I want to import ./foo/index.ts into ./twind.config.ts like this.

// ./foo/index.ts

export default {
  theme: {
    extend: {
      colors: {
        dark: "#282a36",
      },
    },
  },
};

// ./twind.config.ts
import { Options } from "$fresh/plugins/twind.ts";
import foo from "./foo/index.ts";

export default {
  selfURL: import.meta.url,
 
  // theme: {                 ←
  //   extend: {              ←
  //     colors: {            ←
  //       dark: "#282a36",   ←
  //     },                   ←
  //   },                     ←
  // },                       ←
  
} as Options;
hoary scaffold
#

use require

hoary scaffold
#

@ivory raptor

Be a male karen or contribute

#

Idk wtf some reactions are going to do

ivory raptor
#

deno ain't node

#

I mean, right now it might be

#

deno shouldn't be node*

hoary scaffold
#

Oh i see what you mean yh i was in node mode my bad

ivory raptor
#

yeah, I'm just pissed that deno becomes node

#

and people start recommending literally using require and npm packages even when there are deno equivalents

#

that's not how you expand on your product

#

that's how you deprecate it

cosmic goblet
#

@ivory raptor i use some npm libraries in my project but i always use jsdelivr/esm.sh for them as they're fully compatible with deno and npm: imports suck

ivory raptor
#

that's the right way to do it if you have to use npm package

#

I approve

cosmic goblet
#

npm: imports don't detect types for me most of the time and there are workflows out there for updating modules imported via urls but none for npm: imports 😂

#

and it's still literally impossible to use libraries like vite with deno without running into issues every few seconds, like vite doesn't even understand url imports and that undermines just all of it's simplicity

#

for these libraries it's just more convenient to go with node instead and give a literal fuck on all of deno's features

past roost
#

for now...

// ./foo/index.ts

export default {
  extend: {
    colors: {
      dark: "#282a36",
    },
  },
};

// ./twind.config.ts

import { Options } from "$fresh/plugins/twind.ts";
import foo from "./foo/index.ts";

export default {
  selfURL: import.meta.url,
  theme: { ...foo } 
} as Options;
hoary scaffold
ivory raptor
#

and can't you just do theme: foo?

past roost
#

I was just going to write like:

export default {
  foo,
} as Options;

or

export default {
  plugins: foo(),
} as Options;

The above code does not work.

past roost
ivory raptor
# 
...
import theme from "./foo/index.ts"

export default {
  ...,
  theme,
} as Options;
past roost
#

Then, how's described inside of theme?
Is something missing in the following code?

// ./foo/index.ts
export default {
  theme: {
    extend: {
      colors: {
        dark: "#282a36",
      },
    },
  },
};
ivory raptor
#

it should be ts export default { extend: { colors: { dark: "#282a36", }, }, };
then

#

because you are applying this value to the theme property

#

by using theme, shorthand

past roost
#

i understood
thank you