posts/lib-vite-tailwindcss/

[utterances-bot]

Frontend library development with vite and tailwindcss | miyauci.me

Shows how to develop a library using vite and tailwindcss. We'll show you how to generate typedefs, set path aliases, and configure tailwindcss as a library.

https://miyauchi.dev/posts/lib-vite-tailwindcss/?utterances=846b24fb81ec67033fa32d60hrZsDMO%2FOR0LPRnXy79fiwQJPMUclLFHngmcwshtPid0JhkFB9Qdat3l0QyMVQVTOd2tx1e91vjyrTxxo4lkd86JHehAFBPmtzP6856l8XsaJ88xbQRRKJ%2Fycsw%3D

[oleksandr-danylchenko]

How can we support multiple exports expressions in the package.json? Because now we have only one bundle generated and we want to extract smth nested it becomes a bit annoing to use:

import { styles } from 'run-and-drive-lib';
const { flexbox, pxToRem } = styles;

[TomokiMiyauci]

@oleksandr-danylchenko As far as I know, import does not have that syntax. I have had a quick look around tc39 and unfortunately have yet to see such a proposal.

[oleksandr-danylchenko]

Actually... I found my own workaround for it!

Firstly we need to say the Rollup to not bundle everything in one file, but preserve the structure of the modules:

const externalPackages = [
  ...Object.keys(dependencies || {}),
  ...Object.keys(peerDependencies || {}),
];

// Creating regexes of the packages to make sure subpaths of the
// packages are also treated as external
const regexesOfPackages = externalPackages.map(
  (packageName) => new RegExp(`^${packageName}(/.*)?`),
);

...

build: {
    lib: {
      entry: resolve(__dirname, 'src', 'index.ts'),
      formats: [], // Will be ignored by the `rollupOptions.output`
    },
    rollupOptions: {
      output: [
        {
          dir: 'dist',
          format: 'es',
          preserveModules: true,
          entryFileNames: '[name].js',
        },
        {
          dir: 'dist',
          format: 'cjs',
          preserveModules: true,
          entryFileNames: '[name].cjs',
        },
      ],
      external: regexesOfPackages,
    },
  },

The result will look smth like this:

Secondly, we can use the npm's feature called the exports + typesVersions and specify the aliases for the nested dist folder elements:

  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "module": "./dist/index.js"
    },
    "./components": {
      "require": "./dist/components/index.cjs",
      "module": "./dist/components/index.js"
    },
    ...
  },
  "typesVersions": {
    "*": {
      "components": [
        "dist/components/index.d.ts"
      ],
      ...
    }

Finally, on the receiving side, we can reference the components not from the root of the library, but from the /components sub-path:

import { HideOnScroll  } from 'library-name/components'

[ritsuke]

Excellent guide. Thank you!

For anyone coming across 'React is not defined' when using the classic JSX runtime, check this ticket: https://github.com/vitejs/vite/issues/7586

I'm building a shared UI component library as part of a Yarn workspace, so the Tailwind extension in VS Code is picking up a different package's config. Will report back with any findings.

Also, if you are doing something similar (monorepo) and new builds give you a TS error ('Could not find a declaration file for module') in VS Code, open the command palette and restart the TS server. Perhaps there is a better way?

[ritsuke]

Simple fix on the Tailwind front re: monorepo.

https://github.com/tailwindlabs/tailwindcss-intellisense

By default the extension will automatically use the first tailwind.config.js or tailwind.config.cjs file that it can find to provide Tailwind CSS IntelliSense. Use this setting to manually specify the config file(s) yourself instead.

Customize flag tailwindCSS.experimental.configFile in your workspace settings.json.

For projects with multiple config files use an object where each key is a config file path and each value is a glob pattern (or array of glob patterns) representing the set of files that the config file applies to...

[pandeysabin]

tailwindcss is not working

[jtmuller5]

One of the best articles on the internet right here ☝️