jtangelder / grunt-stripmq Goto Github PK

I noticed that stripmq is not including the _@_import statements in the generated files. Is there any way to include _@_imports?

Hi,
it seems there is an issue to get stripmq working for multiple folders.
This works:

        files: {
            expand: true,
            cwd: '.tmp/resources/css/',
            src: '{,*/}*.css',
            dest: '.tmp/resources/css/',
            ext: '.mqless.css'
        }

This one not:

        files: {
            expand: true,
            cwd: '.tmp/',
            src: ['resources/css/{,*/}*.css' , 'resources/css2/{,*/}*.css'],
            dest: '.tmp/resources/css/',
            ext: '.mqless.css'
        }

is there a solution for multiple folders setup?

Hi,

I have installed this plugin in my project, It does not replace "opacity" css.

Thank you

hello some logic in the script merges css rules!
for example if i have that:
.test1 {
margin: 0;
}
.test2 {
margin: 0;
}

it is this after stripmq is done:
.test1,
.test2 {
margin: 0;
}

and i dont want that merging it breaks my website :(
is there an option to stop stripmq doing this? or do you have a fix for it?

edit:
i have seen thats an clean-css option.

Maybe move the tasks/lib/stripmq file to a separate npm package so it can be used for grunt/gulp/broccoli etc.

As far as I can see, the output of stripmq is always compressed. Shouldn't there be an option to have it expanded, e.g. for checking the generated output in development?

I, for example, usually use Sass's nested style for development and compressed for deployment. (Yes, I am aware that most editors can re-format CSS to that, but that's manually. I am lazy. ;-))

you need to include the license text for MIT somewhere

If the task encounters a @media print in the stylesheet it will fail.

Error is:
Warning: Cannot call method 'forEach' of null

From this line as far as I could tell - https://github.com/jtangelder/grunt-stripmq/blob/master/tasks/lib/stripmq.js#L29

Trying to run:

stripmq: {
        all: {
            files: {
                'css/all/404.css': ['css/all/test/404.css']
            }
        }
    }

However I keep on getting

Warning: path must be a string Use --force to continue.

I think it's a path issue, but I am not able to resolve it. Any help would be greatly appreciated.

From the Media Query Spec:

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

So basically, if a media query contains only, it should be ignored in old IE. I added a related issue in css-mediaquery to reveal only in the AST. Once that happens, I can send a PR that checks for only, and clears up this issue.

Can you publish a new version to npm so that the new README is available on npmjs.org?

is there a way to render things in @media print for IE files too? at the moment all things in @media print are striped out and thats not correct in my oppinion.

I had no idea what these did until I started playing with the task. If set to 1024 (the default) it will ignore any media queries wider than that, is that correct?

If so I would recommend updating the README.md to make this clearer. Happy to submit a PR if necessary.

Cheers

Trying to use an IE9/10 specific @media screen and (min-width:0\0) hack (see "Moving IE specific hacks into media blocks") but StripMQ (what we use for IE8 support) is exiting with an error:

{ [Error: Stripping media queries failed.] origError: [TypeError: Cannot read property '1' of null] }

Would it be possible to support this weird hack? As a result, we'll have to degrade IE9/10 so that StripMQ can still work, but ideally StripMQ would maybe just ignore media queries it doesn't understand?

I think I lifted this hack from http://wtfforms.com: https://github.com/mdo/wtf-forms/blob/master/wtf-forms.css#L186-L212

Thanks!

StripMQ is more or less a blackbox. Some other grunt Plugins like autoprefixer are able to generate diff files or a log to see and control what has been done during the process. would be very nice if stripmq can do something similar

Is it possible to give even a line number for where it's choking?

Running "stripmq:target" (stripmq) task
Warning: Stripping media queries failed. Use --force to continue.

A setup like this works fine with the "contrib-cssmin" task:

{
    "portal":
    {
        "files":
        {
            "../../../httpdocs/module/portal/css/ie_old.css":
                [
                    "../../../httpdocs/module/portal/css/*.css"
                ]
        }
    }
}

But your task fails to concat multiple files into one, it just takes the first one and finally aborts the process.

Note: the css file containts mixed CSS, like:

.box {
    border: 1px solid;
}

@media screen and (min-width: 59.999em) {
    .box{
        display: inline-block;
    }
}

Best regards

can i use something like /styles/*.css in files?

Some the optimisations in CleanCss can break stylesheets for IE8, for example the merging of background-size properties into the main background declaration. This sucks, as generating IE8 stylesheets is what I assume this component is mainly used for!

CleanCss also has a "compatibility" mode, which would disable optimisations that would break old IEs, so it might be helpful to use that by default, rather than having to disable CleanCss completely, as it is otherwise quite useful.

I usually include print styles at the end of my CSS files using @media print {}. If I use

options: {
    width: 1024,
    type: 'screen'
},

the generated output file does not include said print styles. That's logical, because they're obviously not screen styles. But it's not very convenient.

Is there a way to include multiple types? If so, I did not get how to do that from the README. (Which might be possible, I'm not a Grunt expert.) If not, maybe there should be. :)

Not sure if this is maintained anymore but there's a missing comma after the closing brace for options in the grunt task example. It should be:

    stripmq: {
        options: {
            width: 640,     // viewport width, default is 1024
            height: 480,    // viewport height, default is 768
            'device-pixel-ratio': 2          // default is 1
        },
        all: {
            files: {
                'desktop.css': ['mobile-first.css']
            }
        }
    }

Hi,

is it possible to set multiple values in the width options? I need this, because the desktop styles are in different media query sizes.

Cheers Philip