have can i build with this plugin?

[takegine]

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import typescript from '@rollup/plugin-typescript';
import scss from 'rollup-plugin-scss';

const SRC = 'src';
const DIST = 'dist/content/panorama';
const TsConfig = 'src/tsconfig.json';
const BUILD_ENV = process.env.BUILD_ENV;

export default {
    input: `${SRC}/${'hud'}/script.tsx`,
    output: {
        format: 'esm',
        file: `${DIST}/scripts/custom_game/hud.js`,

    },
    plugins: [
        typescript({ tsconfig: TsConfig }),
        scss({ output: `${DIST}/styles/custom_game/hud.css` }),
        replace({
            'process.env.BUILD_ENV': JSON.stringify(BUILD_ENV),
            'process.env.NODE_ENV': JSON.stringify('development'),
            "require('util').inspect": '{}',
            preventAssignment: true,
        }),

        commonjs(),
        nodeResolve(),

        BUILD_ENV === 'production' && terser()
    ],
}

// esbuild.config.js
import { build } from 'esbuild'
import {lessLoader} from 'esbuild-plugin-less'
import stylePlugin from 'esbuild-style-plugin'

build({
    entryPoints: ['src/hud/script.tsx'],
    entryNames: '[name]/custom_game/[dir]',
    outbase: 'src',
    outdir: 'dist/content/panorama',
    bundle: true,
    inject: ['toolCode/react.ts'],
    plugins:[
        stylePlugin(),
        lessLoader(),
    ],
    watch: true
    
})
    .then(() => {
        console.log('watch...')
    })
    .catch(e => {
        console.log(e)
    })

how can i use your plugin to combine both？

[aelbore]

@takegine i think this plugin uses esbuild transform so you cannot use esbuild plugin, i notice that esbuild-style-plugin uses postcss under the hood why not use rollup plugin for postcss? does this big different?

[takegine]

@takegine i think this plugin uses esbuild transform so you cannot use esbuild plugin, i notice that esbuild-style-plugin uses postcss under the hood why not use rollup plugin for postcss? does this big different?

The above config.js are independent of each other. esbuild can be fast and multiple files, but can't differentiate the output directory of js and css. Rollup can be well customized to separate js and css, but the disadvantage is that the compilation speed is relatively slow and can only be executed one file after another. I hope to combine the best of both worlds with your plugin.

[takegine]

i don't know how to make them work together

[aelbore]

for this plugin esbuild-style-plugin, as i understand postcss compile/transpile/process the styles not the esbuild basically esbuild build and transform is different.

and besides you can directly use esbuild and not to use rollup if speed matters to you. and another thing the plugins that you are using in rollup can be achieve by using esbuild only, i think you dont need rollup.

[takegine]

I still use rollup in the production environment, but each save takes more than 9 seconds. Im learnning esbuild and want to use it to speed up build. But esbuild can't handle import 'style.scss' very well, it automatically handles url and @keyframes, and I don't know where to specify the css directory. So I want to combine.

[takegine]

{
            // typescript({ 
            //     tsconfig: `${context}/tsconfig.json`,
            // }),
            // terser(),
            esbuild({
                tsconfig: `${context}/tsconfig.json`,
                minify :true,
                // inject:['./abc.js']
            } as any),
}

is working ,thanks