CSS Files in bundle with included sub css files

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

CSS Files in bundle with included sub css files

RizziCR
Hi,

is it possible to use the CssUrlRewriter to solve following problem?

my bundle:
{
        "bundle": "template-flat",
        "dependencies": ["jquery"],
        "assets": [
                {
                        "name": "nicescroll-js",
                        "version": "2.8.3",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/plugins/nicescroll/jquery.nicescroll.min.js"
                        }
                },
                {
                        "name": "style-css",
                        "version": "2.2",
                        "type": "css",
                        "locations": {
                                "webapp": "/assets/css/style.css"
                        }
                },
                {
                        "name": "themes-css",
                        "version": "2.2",
                        "type": "css",
                        "locations": {
                                "webapp": "/assets/css/themes.css"
                        }
                },
                {
                        "name": "bootstrap-css",
                        "version": "3.2.0",
                        "type": "css",
                        "locations": {
                                "webapp": "/assets/css/bootstrap.min.css"
                        }
                },
                {
                        "name": "icheck-all-css",
                        "version": "1.0.2",
                        "type": "css",
                        "locations": {
                                "webapp": "/assets/css/plugins/icheck/all.css"
                        }
                },
                {
                        "name": "validate-js",
                        "version": "1.13.1",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/plugins/validation/jquery.validate.min.js"
                        }
                },
                {
                        "name": "validate-additional-js",
                        "version": "1.13.1",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/plugins/validation/additional-methods.min.js"
                        }
                },
                {
                        "name": "icheck-js",
                        "version": "1.0.2",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/plugins/icheck/jquery.icheck.min.js"
                        }
                },
                {
                        "name": "bootstrap-js",
                        "version": "3.2.0",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/bootstrap.min.js"
                        }
                },
                {
                        "name": "eakroko-js",
                        "version": "2.2",
                        "type": "js",
                        "locations": {
                                "webapp": "/assets/js/eakroko.min.js"
                        }
                }
        ]
}

in the /assets/css/plugins/icheck/all.css are included some other css files:
@import url("minimal/_all.css");
@import url("square/_all.css");
@import url("flat/_all.css");
...

if i load the website included my bundle, the defined all.css file loads as expected, but the linked imported css files not, because of wrong path.

this is correct
http://localhost:9090/dandelion-assets/5a65266a1d61b258ca6be3bc15ad087d/css/icheck-all-css-1.0.2.css

http://localhost:9090/dandelion-assets/5a65266a1d61b258ca6be3bc15ad087d/css/minimal/_all.css
theoretical this is right, but not loadable from the dandelion servlet, because the imported css files not linked in the bundle.
must i define all the css files, from the template i used for this project, in the bundle or can i automatically fixed this with the CssUrlRewriter?

http://localhost:9090/assets/css/plugins/icheck/minimal/_all.css <-- with this path the import linked css files are accessible.

i hope an automatically solution is available, because the template has so many css and js files :/ i don't want include the all the bundles.. ;)

regards
Rizzi
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Files in bundle with included sub css files

RizziCR
This post was updated on .
Additional information.. i use 0.11.0

if i enable the cssurlrewriter (asset.minification=true)
the imports get blank!

@import url("");@import url("");@import url("");@import url("");@import url("");@import url("");

in log i get:
00:08:55.689 [http-bio-9090-exec-1] DEBUG c.g.d.c.a.p.i.CssUrlRewritingProcessor - Processing "icheck-all-css" (type: css, version: 1.0.2)
00:08:55.689 [http-bio-9090-exec-1] DEBUG c.g.d.c.a.p.i.CssUrlRewritingProcessor -   Old location: "null"
00:08:55.689 [http-bio-9090-exec-1] DEBUG c.g.d.c.a.p.i.CssUrlRewritingProcessor -   New location: "null"
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Files in bundle with included sub css files

Thibault Duchateau
Administrator
Hi Rizzi,

Short answer: currently you have no other option but to declare all CSS in bundles.

Longer answser: the cssUrlRewriter processor does not support @import directives. Moreover, from what I've seen some time ago, it's not considered as a good practice (e.g. http://www.stevesouders.com/blog/2009/04/09/dont-use-import/), that's why I have not focused on this feature yet. Nevertheless I'll have a look again when I have more time.

Some other notes about your bundle.
1) Instead of having one huge bundle that declares all your existing asset, you should consider to split them in multiple, smaller ones. Mainly for easier reuse and in order to avoid loading asset in all pages whereas they're not used.

2) It will be explained in the upcoming documentation but you should also consider to separate vendor (= 3rd party) assets from internal ones (those you develop and maintain). How? By declaring your bundles in different places: src/main/resources/dandelion/vendor for vendor ones (with versions specified) and in src/main/resources/dandelion for the others (with no version specified). This way, all vendor assets will be served directly from their location, with their versioning left untouched and no servlet processing. Whereas user assets will be served by the Dandelion servlet and automatically versioned (based on their contents = fingerprinting)

3) Starting from this version, the declaration of bundles has been simplified.
* the bundle name is deducted from the file name. E.g.: template-flat.json => bundle name = template-flat
* both asset type and name (internally used) are deducted from the declared location. E.g.: "webapp": "/assets/js/plugins/nicescroll/jquery.nicescroll.min.js" => type = js, name = jquery.nicescroll.min
* the version can be set manually. In this case, "manual versioning" is activated and the version will be left untouched, whether served directly or by the Dandelion servlet. Or you leave it blank. In this case, "automatic versioning" is activated and based on the asset contents.

Regards,
Thibault.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Files in bundle with included sub css files

RizziCR
Hi,

thanks for your explaining.

i split the staff already ;) the template i bought has a much more plugins and stylesheet. this bundle includes only the "required" one.

but i separate the vender assets now, to have a more clear use.

Rizzi
Loading...