How to resolve .less files ?

[Abhikumar98]

I'm using tsup in a component package in my monorepo. This component package requires less support and I'm unable to use less files in this

[ERROR] No loader is configured for ".less" files: src/atoms/ZSelect/index.module.less

error TS6054: File '/packages/ui/src/atoms/ZSelect/index.module.less' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts', '.cts', '.d.cts', '.mts', '.d.mts'.
  The file is in the program because:
    Root file specified for compilation

How can I add less loader in config?

[egoist]

I have no plan to add support for LESS or CSS modules in the short term.

[aafnnp]

pls support ".less,scss" etc files

[caffeinum]

I have no plan to add support for LESS or CSS modules in the short term.

what would be the best workaround?

Edit:

1. I found that postcss works almost without additional configuration.
2. I managed to configure it to split out jsons that export processes
3. Only thing left to do is to make tsup import these jsons instead of empty object in place of css import

LONG CODE EXAMPLES

My code (pretty generic React example): ```jsx import styles from "./IconButton.module.css" export const IconButton = (props: IconButtonProps) => { const className = useMemo(() => { const classNames = [styles.iconButton]; switch (orientation) { case "top-left": classNames.push(styles.topLeft); break; case "top-right": classNames.push(styles.topRight); break; default: break; } return classNames.join(" "); }, [orientation]); return ( ... ) } ``` Postcss-generated `.json`: ```json {"iconButton":"_iconButton_1pp7n_1","topLeft":"_topLeft_1pp7n_8","topRight":"_topRight_1pp7n_14"} ``` Output (if only this one line was just `require('./IconButton.module.css.json`!): ```javascript // src/package/components/IconButton/IconButton.module.css var _default = {}; // src/package/components/IconButton/IconButton.tsx var IconButton = (props) => { const { icon, onClick, orientation, children } = props; const image = icon.src; const className = useMemo(() => { const classNames = [_default.iconButton]; switch (orientation) { case "top-left": classNames.push(_default.topLeft); break; case "top-right": classNames.push(_default.topRight); break; default: break; } return classNames.join(" "); }, [orientation]); return /* @__PURE__ */ React.createElement(Button, __spreadValues({ variant: "text", onClick, className }, props => ... ) ``` Output css (`index.css`): ```css /* src/package/components/IconButton/IconButton.module.css */ ._iconButton_1pp7n_1 { padding: 10px !important; margin: 0 !important; min-width: unset !important; border-radius: 5px !important; } ._topLeft_1pp7n_8 { position: absolute !important; top: 10px !important; left: 10px !important; } ._topRight_1pp7n_14 { position: absolute !important; top: 10px !important; right: 10px !important; } // ... other files ``` Postcss config: ``` // postcss.config.cjs <= don't even ask why cjs module.exports = { plugins: [ require('autoprefixer'), require('postcss-modules')({ getJSON: (cssFileName, json, outputFileName) => { // print beatiful block with these values console.log('\n\ngetJSON', { cssFileName, json, outputFileName }) const path = require('path'); const fs = require('fs'); const cssName = path.basename(cssFileName, '.css'); const jsonName = path.resolve('./build/' + cssName + '.json'); fs.writeFileSync(jsonName, JSON.stringify(json)); return json; } }), ], } ```

[caffeinum]

Found much easier option. Used esbuild-css-modules-plugin found in https://github.com/esbuild/community-plugins

Here's the link to the plugin: https://github.com/indooorsman/esbuild-css-modules-plugin#readme

Essentially, just install with

npm i -D esbuild-css-modules-plugin

And then use according to https://tsup.egoist.sh/#custom-esbuild-plugin-and-options:

import { defineConfig } from 'tsup'

export default defineConfig({
  // ...
  esbuildPlugins: [
    cssModulesPlugin()
  ],
})

Here's produced output:

``` // esbuild-css-modules-plugin-namespace:/var/folders/d5/92ppqf7s7ygclw88zwhr28_m0000gp/T/tmp-81097-owpW5yeV8Yrb/web3-login/src/package/components/Modal/Modal.module.css.js var digest2 = "02adbe73b8ae46708c50e7e9684a19a3c5cb589a46d85493825c274102d6035f"; var css2 = `._content_bejpi_1 { width: 350px; text-align: center; display: flex; justify-content: center; flex-direction: column; } // ... rest of the css }`; (function() { if (typeof document === "undefined") { return; } if (!document.getElementById(digest2)) { var el = document.createElement("style"); el.id = digest2; el.textContent = css2; document.head.appendChild(el); } })(); var Modal_module_css_default = { "content": "_content_bejpi_1", "dialog": "_dialog_bejpi_9", "connectButton": "_connectButton_bejpi_13", "title": "_title_bejpi_18" }; // ... later React2.createElement(Typography, null, " Back")), /* @__PURE__ */ React2.createElement(DialogTitle, { className: Modal_module_css_default.title }, title), /* @__PURE__ */ React2.createElement(DialogContent, null, children)); }; // ... ```

[aafnnp]

got it.thx

[caffeinum]

@Manonicu btw they have less plugin on that page too, maybe that helps you!

[jeffreys-cat]

you can use https://www.npmjs.com/package/esbuild-plugin-less

import { defineConfig } from 'tsup';
import { lessLoader } from 'esbuild-plugin-less';

export default defineConfig({
    esbuildPlugins: [lessLoader()],
});