CSS applying differently after Cmd production build

[pherris]

I am getting two different looks from my HTML/CSS when running from my raw source vs after building for production (sencha app build production). I am using Cmd v3.0.0.250, Sencha Touch 2.1 with sencha-SlideNavigation and mitchellsimoens/Ext.ux.touch.grid. I've carefully examined the HTML and CSS - they seem to be close, but not the same - note how the .touchgridpanel is after other CSS after the build (from Chrome, selected the div with the number 457 in it and copied the style info here)... I am testing on Chrome from my Windows 7 machine which is also serving the content via apache.

In Developer Mode

After building (prod mode)

element.style { font-size: 0.7em; padding-left: 0.8em; width: 15%; } Matched CSS Rules .touchgridpanel .x-grid-cell:first-child { border-left: none; } .touchgridpanel .x-grid-cell { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; line-height: 2em; font-size: 1em; font-weight: bold; border-left: 1px solid #ccc; } body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre,code, form, fieldset, legend, input,textarea, p, blockquote, th, td { margin: 0; padding: 0; } *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } user agent stylesheet div { display: block; } Pseudo ::before element *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } Pseudo ::after element *, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } Inherited from div#ext-component-59.x-unsized.x-list-item-body .touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body { font-size: 100%; } Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap .x-list .x-list-item { color: #000; } Inherited from body#ext-element-3.x-desktop.x-windows.x-chrome.x-landscape body.x-desktop { font-size: 114%; } body { font-size: 104%; } html, body { font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif; font-weight: normal; } body { color: red; } Inherited from html html, body { font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif; font-weight: normal; }

element.style { font-size: 0.7em; padding-left: 0.8em; width: 15%; } Matched CSS Rules body, div, dl, dt,dd, ul, ol, li, h1, h2, h3, h4, h5,h6, pre, code, form, fieldset,legend, input, textarea, p,blockquote, th, td { margin: 0; padding: 0; } *, ::after,::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } user agent stylesheet div { display: block; } Pseudo ::before element *, ::after,::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } Pseudo ::after element *, ::after,::before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } Inherited from div#ext-component-59.x-unsized.x-list-item-body .touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body { font-size: 100%; } Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap .x-list .x-list-item { color: #000; } Inherited from body#ext-element-3.x-desktop.x-windows.x-chrome.x-landscape body.x-desktop { font-size: 114%; } body { font-size: 104%; } html, body { font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif; font-weight: normal; } body { color: red; } Inherited from html html, body { font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif; font-weight: normal; }

The CSS portion of my app.json:

    "css": [        {
            "path": "resources/css/Ext.ux.grid.View.css",
            "update": "delta"
        },
        {
            "path": "resources/css/mobilePFM.css",
            "update": "delta"
        },
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],

The kicker is that it was working for a time but no longer. I've tried:

changing the app.json update for custom css files (not app.css) to full.
adding

AddType text/cache-manifest .appcache

to my httpd.conf (apache 2.2 on windows)
moving app.css to the bottom of the list of css files in app.json (was at the top)
scratching my head

The difference looks like this:css discrepancy.png

[pherris]

Output of sencha app build production:

C:\Users\me\workspace\mobilePFM>sencha app build productionSencha Cmd v3.0.0.250
[INF]           init-properties:
[INF]           init-sencha-command:
[INF]           init:
[INF]           -before-app-build:
[INF]           app-build-impl:
[INF]           production:
[INF]           -before-init-local:
[INF]           -init-local:
[INF]           -after-init-local:
[INF]           init-local:
[INF]           find-cmd:
[INF]           -before-init:
[INF]           -init:
[INF]           -after-init:
[INF]           init:
[INF]           -before-build:
[INF]           sass:
[INF]           -before-sass:
[INF]           -sass:
[INF]           [shellscript]
[INF]           [shellscript] c:\Users\me\workspace\mobilePFM\resources\sass>compass compile --boring --force
[INF]           [shellscript] identical ../css/app.css
[INF]           -after-sass:
[INF]           page:
[INF]           -before-page:
[INF]           -page:
[INF]           building application
[INF]           Deploying your application to C:\Users\me\workspace\mobilePFM\build\mobilePFM\production
[INF]           Copied app.js
[INF]           Copied resources/css/Ext.ux.grid.View.css
[INF]           Copied resources/css/mobilePFM.css
[INF]           Copied resources/css/app.css
[INF]           Copied C:\Users\me\workspace\mobilePFM\resources\images
[INF]           Copied C:\Users\me\workspace\mobilePFM\resources\icons
[INF]           Copied C:\Users\me\workspace\mobilePFM\resources\startup
[INF]           Resolving your application dependencies (file:///C:/Users/me/workspace/mobilePFM/index.html)
[INF]           Compiling app.js and dependencies
[INF]           Processing classPath entry : C:\Users\me\workspace\mobilePFM\sencha-compile-temp-dir
[INF]           Processing classPath entry : C:\Users\me\workspace\mobilePFM\touch\src
[INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\app.js
[INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\app
[INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\jslib\ux\
[INF]           Processing class inheritance graph
[INF]           Processing instantiation refereces to classes and aliases
[INF]           Processing source dependencies
[INF]           Concatenating output to file C:\Users\me\workspace\mobilePFM\build\mobilePFM\production\app.js
[INF]           Completed compilation.
[INF]           Processed remote file touch/sencha-touch.js
[INF]           Processed local file app.js
[INF]           Minified app.js
[INF]           Generated delta for: app.js from hash: '09a8b914e6e08a92c1bb65146d95b681eaf10381' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '1f5b9950e59db09795e38756002ae3967cc72f61' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '63d682e59fd109ddb08a8052e8e79f28ff56f199' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '64d35f8a69ea7a98a3b0bfba08928d921fe1dcd5' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '6a7c5ed28f5c3c35542daa45ef510f79ad7aa8c6' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '72778b47c19811d750bf6ddb11fdb2dc6dcdbd90' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '9a87d8e707b1fa6b3e7ba903afdf76c8c82ebd52' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: '9ad9fcecfed927b88107a19c17272b0211c8550d' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: 'b05e86309abd0e1b384500d4c29b58a3868cd494' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: 'b9d00f2913b0484b7c160c1a48cbcb84fcc0cadb' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: 'f7a385cdb23b35e2eee596f436c92359b76c8deb' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Generated delta for: app.js from hash: 'f9bd6475f4f1873fceeca9ee572e157039021be4' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
[INF]           Minified resources/css/Ext.ux.grid.View.css
[INF]           Generated delta for: resources/css/Ext.ux.grid.View.css from hash: 'd85553b3ab14482985837b47c5d514cf4682e3d7' to hash: 'e4b4ce3516398406f2fd20b36e1ac80a1acff399'
[INF]           Minified resources/css/mobilePFM.css
[INF]           Minified resources/css/app.css
[INF]           Generated app.json
[INF]           Embedded microloader into index.html
[INF]           Generating appcache
[INF]           Generating checksum for appCache item: index.html
[INF]           Successfully deployed your application to C:\Users\me\workspace\mobilePFM\build\mobilePFM\production
[INF]           -after-page:
[INF]           run:
[INF]           -build:
[INF]           -after-build:
[INF]           build:
[INF]           -after-app-build:
[INF]           app-build:




C:\Users\me\workspace\mobilePFM>

[pherris]

Bumping this thread as I am still dealing with this problem. Could it have to do with the theming? This is my scss file:

@import 'sencha-touch/default/all';


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
//@include sencha-sheet;
@include sencha-picker;
//@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
//@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;


// Your custom code goes here...

[kkrohe]

It's possible this is a caching issue. You might try clearing the cache, along with running a 'localStorage.clear()' statement in the debugger console.

Production builds use a version of the micro loader that will cache delta patches in local storage for the app, so clearing all that out should cause it to download fresh copies of app files.

Also, you could try temporarily moving the archive folder our of the way so that no previous version delta patches are generated. This would help isolate the delta patch mechanism from the mix.