xiaofuzi / rollup-plugin-less Goto Github PK

If you use this plugin with rollup-watch (I don't know if it's related to this plugin or rollup-watch) the files you import are not to be watched. For example if you have:

// main.less
@import './mixins';

body {
  .hidden();
}

// mixins.less
.hidden {
  display: none;
}

and if you change mixins.less the watch process does not reflect. Can you please look into that and tell if I should report the issue there (rollup-watch) or it's related to rollup-plugin-less?

npm reports security audit failures relating to the out of date version of hoek required by the outdated version of hawk and its requirements.

Even on an empty or trivial "grid.less" with no byte order mark, I'm getting this output from rollup using rollup-plugin-less (and rollup-plugin-less-modules in case that's the source, but I doubt it?)

[!] (plugin less) Error: Unrecognised input
src\content\styles\base\grid.less

even with this content:

html { }

What else can I check for?

As soon as I provide some include strings, I get:

Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

What is going on? If I remove the include it appropriately compiles every less file in my codebase, but if I specify one file it freaks out at the @import. Is it something to do with the order?

this is my rollup.config.js

export default {
    input: 'src/index.ts',
    output: [
        { file: 'dist/index.js', format: 'cjs' },
    ],
    plugins: [
        ...
        less({
            output: 'dist/index.css',
            include: 'src/index.less',
        })
    ]
}

no index.css is generated.

If I set output as a path to directory which exists plugin works fine, however if I set this path to directory which doesn't plugin fails. This case is happen in cases when you clean your bundle directory. For example I have public folder and it has two more folders inside – js and css, for my bundles. When I run npm run dev, public directory gets cleaned and js and css folders removed with all its content. So when I use:

`less({
output: 'public/css/bundle.css'
}),

I got:

(less plugin) ENOENT: no such file or directory, open 'public/css/bundle.css'
app/css/app.less

hoewer, this will work:

`less({
output: 'public/bundle.css'
}),

This is because plugin does not create parent directories for output path provided, it only can create a file itself.

The plugin calls writeFile, but doesn't wait until the operation is complete. It is passing in a callback that is undefined.

This means that multiple file operations could be overlapping

It seems that import statement blocks the process.

I want to declare a less file as external. Is there a way to do this?

@import "ui-variables";

When I use external of rollup it does not help:

        // loaded externally
        external: [
            "ui-variables"
        ],
        plugins: [
            less({
                output: "dist/styles.css",
                exclude: ["ui-variables.less"]
            }),
        ],

If you set the output option to write a file the css is being appended to the existing file without clearing it first. node 6.8.1 and rollup 0.36.3

My guess would be an issue here:

                if (options.output&&isString(options.output)) {
                    if(fileCount == 1){
                        //clean the output file
                        fs.removeSync(options.output);
                    }
                    fs.appendFileSync(options.output, css);
                }

fs.removeSync isn't executing (and I think it would also throw and error if it did?).

Thanks again for this great library,

I would like to know if there is a reason to force the injected stylesheets to have a media screen?
https://github.com/xiaofuzi/rollup-plugin-less/blob/master/src/style.js#L11

I would like to use the rollup-plugin-less to generate my PDF reports, and this disables the css in chrome headless. I know I can force the PDFs to use the media screen, but it's not a clean solution.

If there is a reason to use the media screen, can we make the media configurable?

Thanks,
JP

And also can't install babel-runtime/regenerator,Permission denied (publickey).

import progress from 'rollup-plugin-progress'
import buble from 'rollup-plugin-buble'
import html from 'rollup-plugin-html'
import uglify from 'rollup-plugin-uglify'
import less from 'rollup-plugin-less'

export default {
    entry: 'src/index.js',
    dest: 'dist/index.js',
    format: 'iife',
    sourceMap: true,
    plugins: [
        progress({
            clearLine: false
        }),
        less({
            insert: true,
            include: ['**/*.less']
        }),
        html({
            include: '**/*.html',
            htmlMinifierOptions: {
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                conservativeCollapse: true
            }
        }),
        buble({
            include: '**/*.js'
        }),
        uglify()
    ]
}

Rollup version 0.40.2.

MDS tell us:
The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, and tr objects.

so:

The insertStyle function will get error in Ie8. By the way, document.head in Ie8 will get undefined.

solve:

function insertStyle (css) {
    if (!css) return;
  
    if (typeof (window) == 'undefined') return;

    var style = document.createElement('style');

    if ('styleSheet' in style) {  // to compatible IE8
        style = document.createElement('div');
        style.innerHTML = 'x<style>'+css+'</style>';
        style = style.lastChild;
    } else {
        style.innerHTML = css;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
    return css;
}

In this PR #21 , we've moved from appendFile to writeFile and are now async but not waiting for the write to complete.

This means we get overlapping writes to files and only ever the last write will be in the output file.
Fixed by #26

By default less supports plugins http://lesscss.org/usage/#plugins-using-a-plugin-in-code

This can easily be supported here too.

Seems that files imported in less (via @import "style.less") should be added via addWatchFile reload on changes. List of import available in less output.

Is it possible to use media="print" or media="all" for files or add such option?

I haven't found a LICENCE file for this repo. Have you considered adding some license?

https://choosealicense.com/no-permission/

import { rollup } from 'rollup';
import less from 'rollup-plugin-less';

rollup({
entry: 'main.js',
plugins: [
less({output: 'rollup.build.css'})
]
});

It was giving me a hard time to find out it was a dict. Maybe others have the issue too ;)

Version: 1.1.2

I can inline the sourcemap in the generated CSS if I use the following configuration:

        less({
            output: './dist/bundle.css',
            option: {
                sourceMap: {
                    sourceMapFileInline: true,
                    outputSourceFiles: true
                }
            }
        }),

If I swap sourceMapFileInline: true with outputFilename: 'bundle.css.map', the file is not output anywhere. Am I doing this right?

if insert is false, do not insert insertStyle

I thought maybe this was a Less issue, but I did some debugging, and in my Rollup config, I have a TypeScript compiler and a Less compiler.

In Rollup watch mode, I can trace and see that @rollup/plugin-typescript fires its plugin methods and re-compiles TypeScript. However, for this plugin, the rollup-plugin-less transform method never fires again, and Rollup will always provide the same (initial) compiled CSS bundle.