blesscss / grunt-bless Goto Github PK

On the site I'm working on we're loading respond.js for IE8. However, respond.js doesn't work with a blessed CSS file (i.e. a CSS file with an @import rule at the start).

It would be great to have an option whereby you can disable the @import in the CSS file. Then we could just load both files separately as normal.

Other than that it's a fantastic grunt task, it saved my bacon today (no end of IE issues until I remembered the max selector limit)!

I have configured bless as follows

bless: {
css: {
options: {
compress: true,
force: false,
cacheBuster: true
},
files: {
'../consumer/theme/app.css': '../consumer/theme/out.css'
}
}
},

Have added a watch on the css file to trigger bless. But the split does not happen the source file turns empty after tasks run from watch.

Blessc of the file actually works. Any idea what could be wrong?

The options.suffix doesn't work for me. It modifies my original file and then creates another one with a suffix.

Running "bless:css" (bless) task
File static/default/bc/css/style.oldie1.css created.
File static/default/bc/css/style.css modified.

grunt.config('bless', {
    css: {
        options: {
            suffix: 'oldie',
            compress: true
        },
        files: [{
            expand: true,
            src: '<removed>',
            dest: '<removed>'
        }]
    }
});

Is it me doing something wrong here?

Comments of specific kind in source CSS become broken after applying bless, ruining surrounding styles.

this code:

.previous-block {
    [...]
}

/* My block {{ */
.my-block {
    [...]
}
/* }} My block */

becomes:

.previous-block {
    [...]
} */
.my-block {
    [...]
}
/* }} My block */

Discovered the following after running npm install grunt-bless in tasks/bless.js.orig:

Line 125

<<<<<<< HEAD
                        grunt.log.writeln('File ' + chalk.cyan(file.filename) + ' ' + lastSentence + '.');
                    }
                });
=======
                            grunt.log.writeln('File ' + chalk.cyan(file.filename) + ' ' + lastSentence + '.');
                        }
                    });
>>>>>>> Fix merge issues, clean up white space.

Not seeing this file in the repo here, though.

Banner option is pointless

This is the bless chunk of my Gruntfile:

        bless: {
            css: {
                options: {
                    banner: '/* Banner Test */'
                },
                files: {
                    'style.css': 'style.css'
                }
            }
        },

Bless seems to be working (I get perfectly "blessed" files), however neither file has received the banner.

Any @media sections that contain rules that themselves contain comments have the beginning @media rule dropped (but not the closing brace!). You can imagine how problematic this is for designing responsive stylesheets.

Of course, if the input stylesheets are clean then bless works just fine. So this isn't a blocker, by any means.

Please consider publishing your latest code to NPM. There have been a number of commits since the last release, including the very useful ability to fail the grunt task when over the selector limit. Thanks!

Bless.css builds the files with /n as linefeed, this may mess up other grunt tasks (such as grunt-line-remover) that rely on grunt.util.linefeed.

Setting the imports option to false still makes bless generate the imports line at the top.

    bless: {
        css: {
            options: {
                cacheBuster: false,
                compress: false,
                cleanup: false,
                force: false,
                imports: false
            },
            files: {
                dest: "tmp/app.css",
                src: ".dist/app.css"
            }
        }
    }

The generated file has the following line at the top:

@import url('app-blessed1.css');

Expected behavior: Should not generate the imports line when options.imports is set to false.

I have imports: false in Gruntfile.js but there is still @import in the resulting file.

    bless: {
      css: {
        options: {
          compress: true,
          force: true,
          cleanup: true
        },
        files: {
          'css/stylesheets/dev/app.css': 'css/stylesheets/app.css'
        }
      }

The result is no different that when I don't compress it.

Fresh install of grunt-bless. Current version is now v1.0.1

I can no longer run bless. I get this error: Warning: Maximum call stack size exceeded Use --force to continue.

This used to work just fine, but I'm not sure what previous version I had working. package.json has:

"grunt-bless": "*",

Will now start to downgrade to find a working version.

Most grunt plugins I'm familiar with will report the files they are generating:

Running "less:compileCore" (less) task
File webroot/sites/all/themes/theme/css/theme.css created.

grunt-bless doesn't report any info on the files it is generating. This makes it a bit confusing and tricky to debug what the bless task is doing (or not doing):

Running "bless:css" (bless) task
options: cacheBuster=false, cleanup=false, compress=false, force=false, imports=false

It would be nice to add this reporting.

My config:

bless: {
    prod: {
        options: {
            logCount: 'warn',
            failOnLimit: 'true'
        },
        src: ['dist/prod/www/css/**/*.css']
    }
}

The output of grunt bless:prod --verbose:

Running "bless:prod" (bless) task
[D] Task source: (MY PATH)/node_modules/grunt-bless/tasks/bless.js
Verifying property bless.prod exists in config...OK
Files: (BIG LIST OF FILES SUPPRESSED, BUT IT WAS A CORRECT LIST OF PATHS SEPARATED BY COMMAS)
Options: compress=false, logCount="warn", force=false, warnLimit=4013, imports, failOnLimit="true", suffix="", sourceMaps=false, root=""
it is not an array.
Reading dist/prod/www/css/bookmarklet/bookmarklet-all.82bc5f57.css...OK
Warning: Cannot read property '0' of undefined Use --force to continue.

Aborted due to warnings.

I would think that should work, but it's not reaching the concat function as an array. Could be a grunt issue? Could be me doing something wrong? But this seems like it should work.

Could there be an option to output the filenames with a user configurable pattern other than myfilename-blessed1.css?

node: v0.10.18
grunt: 0.4.5
grunt-bless: 1.0.0

I'm working a bit late tonight and I noticed all our builds were failing... dug down and figured out that grunt was dying because of the following error.

[INFO] [email protected] node_modules/grunt-bless
[INFO] ├── [email protected]
[INFO] ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
[INFO] └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

[INFO] 
[INFO] --- frontend-maven-plugin:0.0.9:grunt (grunt build) @ <project> ---

[INFO] Running 'grunt build --no-color' in <env>

[INFO] Loading "bless.js" tasks...ERROR

[INFO] >> Error: Cannot find module 'babel-runtime/core-js/get-iterator'

Looks like you updated to the latest version of bless and it wasn't really ready to go. Popped over to that repo and noticed that all the builds were failing. I'll post a cross issue on that repo, but I wanted to add one here so that you knew the latest wasn't working.

Some CSS selectors are missing from both CSS files after blessing

Would be really nice to have logging on selectors count of each file, and maybe some information about how many files were blessed.

thanks for that script. there is another bug related to the max selectors one. its that IE can only handle 31 css files includes via . is this script handling that problem too? it should scan an html file for to many includes and replace them with <style>@import</style> each style tag can contain up to 31 css files.

I'm running grunt-bless on my CSS after it has been run through grunt-contrib-compass.

When grunt-contrib-compass is run with the latest version of Compass (1.0.0.alpha.19), with:

"options": {
    "sourcemap": true
}

.. a sourcemap is generated for each CSS file that is generated:

print.css
print.css.map
screen.css
screen.css.map

The .map file can be read by browsers like Google Chrome, to trace styles back to the original Sass file.

This works fine - up until the point when grunt-bless is run on the Compass output. Now we have:

print.css
print.css.map
screen.css
screen.css.map
screen.blessed.css

There are three problems here:

1. screen.blessed.css.map should be generated
2. screen.blessed.css.map should contain the pointer "file": "screen.blessed.css" (rather that "file": "screen.css")
3. screen.blessed.css should contain the pointer /*# sourceMappingURL=screen.blessed.css.map */

Thanks!

Any help would be appreciated. I am trying to split up my main css stylesheet (specifically for ie9) it exceeds the number of lines that IE9 can handle and I want to add a grunt task which splits the main css sheet into however many it needs to.

I thought bless would solve this but I can't get it to work.

The task below simply just copies the main stylesheet 'foundation.css' into 'tmp/ie.css' - what am I doing wrong?

Here is how I have my task

bless: {
        css: {       
            options: {
                logCount: true, 
                compress: true,
                suffix: 'oldie'
            },
            files: [{ 
              src: 'css/foundation.css', // this is the main stylesheet
              dest: 'tmp/ie.css' // i was hoping bless would split the main stylesheet above into this sheet? how is it suppose to work?
          }] 
        }
    },

Please add option pathType to

options: {
      pathType: "absolute" ------> by default
}

in main.css

@import "D:/www/styles/style1.css"                   -> absolute path
@import "style1.css"                                 -> relative path
@import "http://example.com/css/styles.css"          -> remote path

h1, h2 ....{
    font-size: 32px;
}
some css code .....

Thank you!

Is there a way to not have files output as "file-whatever-blessed1.css"... etc?
I'd like to specify the suffix. I know could seem trivial but anyone on larger projects might need this feature or see it fit to follow an existing naming convention that this outright breaks.
Also, yes, enterprise clients support a broad employee base and using the word "blessed" in file names could be seen as politically incorrect. That's a serious concern.
Love the plugin, though!!

It throws Warning: Cannot read property 'reduce' of undefined Use --force to continue. error if the source CSS has charset rule ,

@charset "UTF-8"; body { margin: 0; }
Can you advise? thanks.

Your docs have the grunt config as:

files: {
'tmp/below-limit.css': 'test/input/below-limit.css',
}

this does not work in Grunt 0.4.x

the proper config should be:

        process_name: {
            src: 'styles/app.css',
            dest: 'styles/bless.css'
        }

It seems to be common practice to allow template strings when reading file names. As far as I can tell, this plugin does not allow this:

// Doesn't work:
files: {
  '<%= dirs.cssDest %>/<%= pkg.name %>.fix.css': '<%= dirs.cssDest %>/<%= pkg.name %>.css'
}
// Works:
files: {
  'webroot/sites/all/themes/mytheme/css/mytheme.min.fix.css': 'webroot/sites/all/themes/mytheme/css/mytheme.min.css'
}

I have several other tasks defined using template strings for file names and they all work.

We just pushed v4.0.0-alpha.0 to npm today! Please let us know how it works for you so we can be confident about getting the actual release out. Also, the Bless project has a new home at https://github.com/BlessCSS/bless. Since it is now in a github organization we'd also like to extend the invitation to transfer this repo there and add you as a member of the organization. The goal being to consolidate and document bless and it's usage with different build tools. Our main focus will be towards Gulp, Grunt, Webpack, and possibly Browserify. If you have any questions feel free to reach out in our issue log or hit us up on gitter at https://gitter.im/BlessCSS/bless

Force option does not work and no warning is displayed when the source is the same as the destination.

Would it be possible to add an option in which I can choose which part of the original CSS goes into which bless file?
For Wordpress I need the commented header in the CSS specifically in the style.css file, otherwise the theme is not recognized. But now it goes into style-blessed1.css automatically, so I keep changing it manually.
Or is this a core bless problem/feature?

Many thanks!