PDA

View Full Version : Random CSS Value As Result of EXTJS 5 build breaking Application



dalste34
6 Oct 2014, 5:23 AM
in my nameofapplication-all.css which is automatically generated as a result of and extjs build I am getting a random css element generated: the full css generated follows:


.e308efefc796036fec7aa464956b834ead679f03{display:block;}@import 'nameofapplication-all_01.css';@import 'nameofapplication-all_02.css';


the random .e308efefc796036fec7aa464956b834ead679f03{display:block;} element appears to be breaking the following inclusions of :

@nameofapplication-all_01.css
@import 'nameofapplication-all_02.css


Can someone please shed some light on why this erroneous css element is being generated.

Regards,

Dalste

dalste34
6 Oct 2014, 7:34 AM
UPDATE:I edited the nameofapplication-all.css it appears that if any css is added before the two @import statements the @imported files are not loaded by the browser. I wonder why the class with random css name is being generated by extjs build and why it is being added above the @import statements.

slemmon
13 Oct 2014, 11:13 PM
Hi,

What is the version of ExtJS you're working with?
What is the version of Sencha Cmd? * You can run "sencha which" to get the full version.

You might also post back here your index.html file and app.json file from your application.

quophyie
24 Oct 2014, 6:20 AM
@dalste34 (http://www.sencha.com/forum/member.php?668788-dalste34)is right. I was struggling with this same issue for a couple of days until I came across this thread. In my case the thing that seems to trigger this problem is that when I use the extjs-tab-panel-ui mixin (i.e. the navigation ui from Kitchen sink see below ). if I comment out .SOME_GUID{display:block;},e.g..e308efefc796036fec7aa464956b834ead679f03{display:block;}, The microloader will load the CSS but if not, then no stye is applied

I am using Ext JS 5 v5.0.1.255 and Sencha Cmd v5.0.1.231.

/**
* Generates a set of style rules for the "navigation" tab UI.
*/
@include extjs-tab-panel-ui(
$ui: 'navi',
$ui-tab-background-color: transparent,
$ui-tab-background-color-over: #505050,
$ui-tab-background-color-active: #303030,
$ui-tab-background-gradient: 'none',
$ui-tab-background-gradient-over: 'none',
$ui-tab-background-gradient-active: 'none',
$ui-tab-color: #acacac,
$ui-tab-color-over: #c4c4c4,
$ui-tab-color-active: #fff,
$ui-tab-glyph-color: #acacac,
$ui-tab-glyph-color-over: #c4c4c4,
$ui-tab-glyph-color-active: #fff,
$ui-tab-glyph-opacity: 1,
$ui-tab-border-radius: 0,
$ui-tab-border-width: 0,
$ui-tab-inner-border-width: 0,
$ui-tab-padding: 24px,
$ui-tab-margin: 0,
$ui-tab-font-size: 15px,
$ui-tab-font-size-over: 15px,
$ui-tab-font-size-active: 15px,
$ui-tab-line-height: 19px,
$ui-tab-font-weight: bold,
$ui-tab-font-weight-over: bold,
$ui-tab-font-weight-active: bold,
$ui-tab-icon-width: 24px,
$ui-tab-icon-height: 24px,
$ui-bar-background-color: #404040,
$ui-bar-background-gradient: 'none',
$ui-bar-padding: 0,
$ui-strip-height: 0
);

slemmon
24 Oct 2014, 11:10 AM
After defining the ui mixin do you run "sencha app build", "sencha ant sass", other?

quophyie
26 Oct 2014, 2:28 PM
@slemmon Yes, I run "sencha package build" and "sencha app build" after defining the ui mixin but I still get this error

slemmon
29 Oct 2014, 3:31 PM
Hi,

Cmd 5.0.3 was recently released.
Can you run "sencha upgrade" to download the latest, close all command line / terminal windows, and re-launch a command line window and run "sencha which" to make sure you're running with Cmd 5.0.3.324.

Then try running the build once more to see if the issue persists.
*You might run "sencha app upgrade" within your app and "sencha package upgrade" within the theme as well.

quophyie
30 Oct 2014, 2:38 AM
Hi @slemmon (http://www.sencha.com/forum/member.php?67514-slemmon),This issue is now fixed in Sencha CMD 5.0.3. I tested and this is OK now. Thanks

Didasko
5 Nov 2014, 8:24 AM
Hi @slemmon (http://www.sencha.com/forum/member.php?67514-slemmon),

I had the same problem as @dalste34 (http://www.sencha.com/forum/member.php?668788-dalste34) and I tried your solution with "sencha app upgrade" and "sencha package upgrade" but now the "x-sencha-command" task seems broken...

I have the same error described in this post (http://www.sencha.com/forum/showthread.php?293887-CMD-x-sencha-command-broken-in-5.0.3.324).

The rollout is imminent and its a very bad surprise...

Please do you have an idea?

Thanks!

Didasko
6 Nov 2014, 5:26 AM
Hello,

As a workaround, I run the following ANT task into my Maven pom.xml during the packaging of my webapp:



<execution>
<!--
Fix the bug from Sencha CMD 5.0.1.231 that add the following string before the first "@import" into the main CSS file ([AppName-all.css]):
.ed7fe9983be4da80ae69ac14630437def28bb23f{display:block;}
This bug appeared since we used the "CSS Mixins" to customize ExtJS components like the Toast.
(For example see "/ext-app/ext/packages/[AppThemeName]/sass/src/window/Window.scss")
The use of the "CSS Mixins" generates three CSS files with "@import" instead of once.
-->
<id>fix-sencha-cmd-bug</id>
<phase>process-sources</phase>
<configuration>
<tasks>
<ac:if xmlns:ac="antlib:net.sf.antcontrib">
<not><equals arg1="${envType}" arg2="local" /></not>
<then>
<replaceregexp file="${basedir}/src/main/webapp/resources/[AppName-all.css]"
match=".+?([email protected])"
replace=""
byline="true" />
</then>
</ac:if>
</tasks>
</configuration>
<goals>
<goal>run</goal>
</goals>
</execution>