PDA

View Full Version : [FIXED] Upgrading theme package from 4.2.0.663 to 4.2.2.1144 fails



varsos
1 Nov 2013, 4:58 PM
I have a theme package build successfully with EXTJS 4.2.0.663 and CMD 3.1.0.256
I am rebuilding it with no changes using EXTJS 4.2.2.1144 and CMD 3.1.2.342 and it fails, see below.
What is interesting, when I remove lines from Component.scss that assign null to variables like this one:

$button-toolbar-border-color-disabled: null;
it works like a charm.
Any ideas?


E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme>sencha package build
Sencha Cmd v3.1.2.342
[INF]
[INF] init-plugin:
[INF]
[INF] init-package-plugin:
[INF]
[INF] package-build:
[INF]
[INF] init-local:
[INF]
[INF] -before-init-local:
[INF]
[INF] -after-init-local:
[INF]
[INF] find-cmd:
[INF]
[INF] init:
[INF]
[INF] -before-init:
[INF] Initializing Sencha Cmd ant environment
[INF] Adding antlib taskdef for com/sencha/command/compass/ant/antlib.xml
[INF] [x-load-properties] Optional properties file not present (skipping) - E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\.sencha\package\production.properties
[INF] [x-load-properties] Loading required properties file E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\.sencha\package\build.properties
[INF]
[INF] -after-init:
[INF]
[INF] -before-build:
[INF]
[INF] js:
[INF]
[INF] -before-js:
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\src
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-base\overrides
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-base\src
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-neutral\overrides
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-neutral\src
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-classic\overrides
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-classic\src
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\overrides
[INF] Loading classpath entry E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\src
[INF] generating sass for js compile context
[INF] writing sass content to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/slate-theme-all-rtl-debug.scss
[INF] generating sass for js compile context
[INF] writing sass content to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/config.rb
[INF] generating sass for js compile context
[INF] writing sass content to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/slate-theme-all-debug.scss
[INF] generating sass for js compile context
[INF] writing sass content to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/config.rb
[INF] Concatenating output to file E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/slate-theme-dev.js
[INF] Concatenating output to file E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/slate-theme-debug.js
[INF] Compressing data with YuiJavascriptCompressor
[INF] Concatenating output to file E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme/build/slate-theme.js
[INF]
[INF] -after-js:
[INF]
[INF] inherit-resources:
[INF]
[INF] -before-inherit-resources:
[INF] [echo] Merging resources from base package E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-base
[INF] [copy] Copying 1 file to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\build\resources
[INF] [echo] Merging resources from base package E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-neutral
[INF] [copy] Copying 1 file to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\build\resources
[INF] [echo] Merging resources from base package E:\_tools\Sencha\workspace\SlateTheme422\ext\packages\ext-theme-classic
[INF] [copy] Copying 224 files to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\build\resources
[INF]
[INF] -after-inherit-resources:
[INF]
[INF] copy-resources:
[INF]
[INF] -before-copy-resources:
[INF] [copy] Copying 387 files to E:\_tools\Sencha\workspace\SlateTheme422\packages\slate-theme\build\resources
[INF]
[INF] -after-copy-resources:
[INF]
[INF] sass:
[INF]
[INF] -before-sass:
[INF]
[INF] -before-js:
[INF] executing compass using system installed ruby runtime
remove .sass-cache/
remove resources/slate-theme-all-debug.css
remove resources/slate-theme-all-rtl-debug.css
error slate-theme-all-debug.scss (Line 14 of ../../../ext/packages/ext-theme-neutral/sass/etc/functions/button-colors.scss: "transparent" is not a color for `lighten')
create resources/slate-theme-all-debug.css
error slate-theme-all-rtl-debug.scss (Line 14 of ../../../ext/packages/ext-theme-neutral/sass/etc/functions/button-colors.scss: "transparent" is not a color for `lighten')
create resources/slate-theme-all-rtl-debug.css
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExProcess: compass process exited with non-zero code : 1
[ERR]
[ERR] Total time: 11 seconds
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: com.sencha.exceptions.ExProcess: compass process exited with non-zero code : 1
[ERR]
[ERR] Total time: 12 seconds
[ERR] com.sencha.exceptions.BasicException: com.sencha.exceptions.ExProcess: compass process exited with non-zero code : 1

slemmon
4 Nov 2013, 6:55 PM
I would try upgrading Sencha Cmd to the current GA release of 4.0.0.203 (you can upgrade with "sencha upgrade").

It would be advisable to then do "sencha package upgrade" on any packages you have as well as "sencha app upgrade" for any apps you are building with Cmd.

varsos
5 Nov 2013, 9:50 AM
I was hoping to find something as a work around., currently I have removed the lines with "null" values.
Is there an alternate way to override a variable and remove the styling besides null?

As for upgrading, it is not easy to do in our environment.
The process to upgrade a Sencha framework or tool is long.
Whether the upgrade is a major revision or even minor revision, many times in the past breakages of existing features occurred in the frameworks, so extensive regression testing has to take place before any upgrades are approved.

slemmon
5 Nov 2013, 11:23 AM
I've seen variables set to other values before, but not null.
Out of curiosity, why set them to null -vs- another value?

varsos
5 Nov 2013, 5:16 PM
The nulls are all over the EXTJS theme packages, for example Button.scss in the neutral theme package has several variable set to null.


If the ancestor theme has a value assigned to a variable, setting null in the descendant theme prevents that value from being set in the css.
For example if I do not want disabled buttons to have a border in a toolbar this should do it:


$button-toolbar-border-color-disabled: null;


It actually works in EXTJS 4.2.1 and CMD 3.1.0
At this point I am not sure if the issue is in EXTJS 4.2.2 or it is CMD 3.1.2 that has the problem.
I will try to compile with CMD 3.1.0 to see what happens.

Phil Guerrant
13 Nov 2013, 3:46 PM
In the past setting variables to null was the recommended way of preventing a value from being set for a given property. However, SASS 3.2 came along and broke that with its introduction of the new "Null" data type http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released/

As a result, in SASS 3.2 setting a default variable to null like so, no longer works:


$some-var: null !default;

This is because null is now considered to mean the same thing as "unassigned", and so sass will allow the $some-var variable to be reassigned later in the code. This is a departure from the historical behavior where null was treated as a literal and therefore the variable was considered to have been assigned a value.

While we have not updated Sencha Cmd to use the latest SASS as of yet, we did make a few changes in Ext 4.2.2 that will allow us to upgrade to SASS 3.2 in the future. Internally you will notice that we have removed all our usages of null where used as a default value. In it's place you will find this instead:


$some-var: 'none' !default;

In places where we used to do this to check if a variable was null before emitting some CSS:


@if $some-var == null

You will find this instead:


@if is-null($some-var)

is-null() is a custom SASS function we provide in Ext JS 4.2.2 in order to ease the pain of transition from SASS 3.1 to 3.2. it returns true if the value is null, "null" or "none". When Sencha Cmd is upgraded to use SASS 3.2 at some future date, it will be necessary to replace all your variables that default to null with 'none', but this should help accomodate old code in some cases.

Now that you know the whole history of null, let me address your specific problem with buttons. In Ext 4.2.1 and earlier it was quite painful to create a button UI, since the mixin did not provide sensible defaults for the parameters since it had to work for all 3 button scales (small, medium, large) and they all have different defaults. As a result it was necessary to specify every single parameter of the button mixin when creating a custom UI. To make it easier to create button UIs in 4.2.2 we have added scale specific mixins. In addition we've added color derivation functions for the various button states so that you don't have to specify colors for all of them (e.g. hover, pressed, focused, disabled). Creating a custom button ui is now as easy as:



@include extjs-button-small-ui(
$ui: 'foo',
$background-color: red
);


The cause of your problem are the color derivation functions. You can find these functions in "sass/etc/functions/button-colors.scss" in both ext-theme-neutral and ext-theme-neptune. Unfortunately these functions do not account for the fact that their input could be a null value, and so an error is thrown.

I will open a ticket to get this fixed in the next release. In the mean time you can work around the error by overriding the problematic color functions in your theme like so:



@function button-toolbar-border-color-disabled($border-color) {
// probably really only need the transparent check here. is-null() is just for the sake of paranoia
@if $border-color == transparent or is-null($border-color) {
@return transparent;
} @else {
@return button-default-border-color-disabled($border-color);
}
}

dongryphon
13 Nov 2013, 3:51 PM
Thanks for the report! I have opened a bug in our bug tracker. Moved to Bugs forum.

varsos
23 Nov 2013, 8:10 AM
Using 'none' worked.
Thank you,