Is there an example to use 'include-option? How to use this plugin without injecting css in js?

[mogoh]

Hello,

I am trying to use this plugin without "injecting" CSS in JS.

I tried this, but it did not work:

styles({
  include: ['./src/css/style.css'],
  mode: ['extract', 'style.css'],
  minimize: true,
}),

I could not find any documentation about this very problem.

[mogoh]

I have tryed this configuration now but it always creates two css files.

import styles from 'rollup-plugin-styles';

const isProduction = process.env.BUILD === 'production';


export default [{
    input: './src/css/style.css',
    output: {
        file: 'public/css/stylex.css',
        format: 'esm',
        assetFileNames: '[name][extname]',
    },
    watch: !isProduction,
    plugins: [
        styles({
            include: ['./src/css/style.css'],
            mode: ['extract', 'style.css'],
            minimize: isProduction,
        })
    ]
}];

[mogoh]

My not so beautiful workaround:

import { unlinkSync } from 'fs';

import styles from 'rollup-plugin-styles';


const isProduction = process.env.BUILD === 'production';


export default [{
    input: './src/css/style.css',
    output: {
        file: 'public/css/style-delete-me.css',
        format: 'esm',
        assetFileNames: '[name][extname]',
    },
    watch: !isProduction,
    plugins: [
        styles({
            include: ['./src/css/style.css'],
            mode: ['extract', 'style.css'],
            minimize: isProduction,
        }),
        {
            writeBundle(options) {
                unlinkSync(options.file);
            },
        },
    ],
}];

[ohmree]

I'd also like to know this, the current behavior of extract requires me to enable unsafe-inline for loading of styles in my single-page app and the current behavior of inject requires me to enable it for scripts, none of which are ideal for an app that's served online.

A good solution might exist and I just might not know about it since I'm new to web dev, so any help will be appreciated, including a different plugin that can do styles both inline (either embedded in js or directly in the document) and side-by-side with link injection (like how the html plugin works for scripts).

EDIT: turns out the extract mode doesn't even work the way I thought it did, so the only option that works for me ATM is to use inject and enable loading of inline styles.