Extending classes from other files

[timk...@gmail.com]

In my source/modules.xcss I have:
.block {
display: block;
margin-bottom: $base_margin;
}

Then in my main.xcss I have:
.myclass extends .block {
background-color: #ff0000;
}

The resulting css master file does not apply the background-color
property. As I've tested this I found I could get it to work in the
same file but not across files. Is this what's expected?

** note - it also works if I have compress_output_to_master set to
false, but thats not really what I want, I'd like them all in one file.

[timk...@gmail.com]

I noticed this note on the docs:

"You can extend selectors across files, but make sure the parent
selector is already parsed by xCSS specified"

But how do I make sure the parent selector is already parsed?

[Anton Pawlik]

Hey, that means you modules.xcss needs to be above the main.xcss in
the config file. so if main.xcss will be parsed xcss already knows
what .block is.

that should work for you:

$config['xCSS_files'] = array
(
'source/modules.xcss' => 'generated/modules.css',
'source/main.xcss' => 'generated/main.css',
);

if not check the css with firebug. maybe some other (stronger)
selector overwrites the bg property. And if that still doesn't help
provide your config.php and the .xcss files in a zip :)

[timk...@gmail.com]

Ok, I'm sorry. What I described is working. My problem is with
overwriting properties.

My config:

$config['xCSS_files'] = array
(
'source/modules.xcss' => 'generated/modules.css',
'source/main.xcss' => 'generated/main.css',
);

modules.xcss:

.block {
display: block;
margin-bottom: $base_margin;
}

main.xcss:

.myclass extends .block {
background-color: #ff0000;

display: inline;
}

but, the resulting screen.css master file defines .myclass BEFORE, so
it doesn't override the style (the display property):
.myclass {
background-color: #ff0000;
display: inline;
}
.myclass,
.block {
display: block;
margin-bottom: 18px;
}

Thanks for the help, I'm loving it so far!

[Tim Kelty]

It works as expected when they're in the same file:

.block {
display: block;
margin-bottom: $base_margin;
}

.myclass extends .block{
background-color: #ff0000;
display: inline;
}

but when they're split the order gets screwed up, even though in my
config the order is right (modules, main)

[Anton Pawlik]

hmmm tell me what settings are you using here:
$config['use_master_file'] = true;
$config['compress_output_to_master'] = false;

the only reason for this behavior i can imagine is that you're linking
the output css files by yourself like this:

<link rel="stylesheet" type="text/css" href="/generated/main.css" />
<link rel="stylesheet" type="text/css" href="/generated/modules.css" /
>

and this order is wrong.

[Tim Kelty]

true/true for the config settings

Nope, I'm just linking to my single master file (screen.css) in the
head. And that file looks like:

.myclass {
background-color: #ff0000;
display: inline;
}

.... (other classes from modules.xcss....)

.myclass,
.block {
display: block;
margin-bottom: 18px;
}

[Tim Kelty]

I emailed you a zip of my project if you want to check it out.

[Tim Kelty]

Ok, I founds something else strange.
It seems my column classes are actually whats goofing things up, if I
take them out it works.

Error log says:
[11-Jan-2010 11:46:42] PHP Notice: Undefined offset: 1 in /Users/
timkelty/Sites/phptest/assets/styles/xCSS/xcss-class.php on line 678
[11-Jan-2010 15:58:27] PHP Warning: asort() expects parameter 1 to be
array, null given in /Users/timkelty/Sites/phptest/assets/styles/xCSS/
xcss-class.php on line 750
[11-Jan-2010 15:58:27] PHP Warning: Invalid argument supplied for
foreach() in /Users/timkelty/Sites/phptest/assets/styles/xCSS/xcss-
class.php on line 751
[11-Jan-2010 15:58:27] PHP Notice: Undefined variable: sorted in /
Users/timkelty/Sites/phptest/assets/styles/xCSS/xcss-class.php on line
757
[11-Jan-2010 15:58:27] PHP Warning: Invalid argument supplied for
foreach() in /Users/timkelty/Sites/phptest/assets/styles/xCSS/xcss-
class.php on line 470
[11-Jan-2010 15:58:27] PHP Warning: Invalid argument supplied for
foreach() in /Users/timkelty/Sites/phptest/assets/styles/xCSS/xcss-
class.php on line 762
[11-Jan-2010 17:06:15] PHP Notice: Undefined offset: 1 in /Users/
timkelty/Sites/phptest/assets/styles/xCSS/xcss-class.php on line 399

[Tim Kelty]

Specifically, this rule:
.col,
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8,
.col-9, .col-10, .col-11, .col-12,
.col-13, .col-14, .col-15, .col-16,
.col-17, .col-18, .col-19, .col-20,
.col-21, .col-22, .col-23, .col-24 {
float: left;
margin-right: $gutter;
}

If I have more that one selector in there, it breaks.

[Tim Kelty]

I think there's actually 2 issues going on here.

#1, the extend freaks out if it starts with the same characters (col
in this case)

I changed it to this:
.col {
float: left;
margin-right: $gutter;
}
.col-1 extends .col { width: $col1; }
.col-2 extends .col { width: $col2; }
.col-3 extends .col { width: $col3; }
.col-4 extends .col { width: $col4; }
.col-5 extends .col { width: $col5; }
.col-6 extends .col { width: $col6; }
.col-7 extends .col { width: $col7; }
.col-8 extends .col { width: $col8; }
.col-9 extends .col { width: $col9; }
.col-10 extends .col { width: $col10; }
.col-11 extends .col { width: $col11; }
.col-12 extends .col { width: $col12; }
.col-13 extends .col { width: $col13; }
.col-14 extends .col { width: $col14; }
.col-15 extends .col { width: $col15; }
.col-16 extends .col { width: $col16; }
.col-17 extends .col { width: $col17; }
.col-18 extends .col { width: $col18; }
.col-19 extends .col { width: $col19; }
.col-20 extends .col { width: $col20; }
.col-21 extends .col { width: $col21; }
.col-22 extends .col { width: $col22; }
.col-23 extends .col { width: $col23; }
.col-24 extends .col { width: $col24; margin-right: 0; }

this resulted in some very wacky code:
.col-24-23-22-21-20-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-23-22-21-20-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-22-21-20-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-21-20-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-20-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-19-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-18-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-17-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-16-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-15-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-14-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-13-12-11-10-9-8-7-6-5-4-3-2-1,
.col-12-11-10-9-8-7-6-5-4-3-2-1,
.col-11-10-9-8-7-6-5-4-3-2-1,
.col-10-9-8-7-6-5-4-3-2-1,
.col-9-8-7-6-5-4-3-2-1,
.col-8-7-6-5-4-3-2-1,
.col-7-6-5-4-3-2-1,
.col-6-5-4-3-2-1,
.col-5-4-3-2-1,
.col-4-3-2-1,
.col-3-2-1,
.col-2-1,
.col-1 {
width: 60px;
}

If I changed it from 'col' to something different so they both didn't
start the same, the output was fixed, but I'm still seeing the issue I
originally described with myclass being out of order.

[Tim Kelty]

same deal with that, if I try do more than one col-x extends line, the
myclass issues comes up.

[Anton Pawlik]

:D ok i found the bug that couses the override of the styling change
the line 192 in the xcss-class.php to this

$this->final_file = array_reverse($this->final_file);

i will look into the other bugs, i also have removed the 1.0.1 again.
because you couldn't do multiple math operations in one property
value, after the nesting fix :D (but i think this is a really rarlay
case anyway).

[Tim Kelty]

Yeah, I'm fine with just doing
$col1 = [($column_width + $gutter) * 1 - $gutter];

instead of nesting math.

[Anton Pawlik]

xcss: margin: [20 - 10] [30% - 10];

css: margin: 10px 20%;

but in 1.0.1 it was broken :( but nesting is fine.

[Tim Kelty]

Oh ok.

Most crucial for me is the order of extends getting jumbled.

[Anton Pawlik]

ok I've re uploaded v1.0.1 no its well tested now and it fixes the
issues that you where experiencing.

the problem with this code is that the child an the parent have to
similar names

if you use this, it will work fine

.vyefaw {
float: left;
margin-right: $gutter;
}
.col-1 extends .vyefaw { width: $col1; }
.col-2 extends .vyefaw { width: $col2; }
.col-3 extends .vyefaw { width: $col3; }
.col-4 extends .vyefaw { width: $col4; }
.col-5 extends .vyefaw { width: $col5; }
.col-6 extends .vyefaw { width: $col6; }
.col-7 extends .vyefaw { width: $col7; }
.col-8 extends .vyefaw { width: $col8; }
.col-9 extends .vyefaw { width: $col9; }a
.col-10 extends .vyefaw { width: $col10; }
.col-11 extends .vyefaw { width: $col11; }
.col-12 extends .vyefaw { width: $col12; }
.col-13 extends .vyefaw { width: $col13; }
.col-14 extends .vyefaw { width: $col14; }
.col-15 extends .vyefaw { width: $col15; }
.col-16 extends .vyefaw { width: $col16; }
.col-17 extends .vyefaw { width: $col17; }
.col-18 extends .vyefaw { width: $col18; }
.col-19 extends .vyefaw { width: $col19; }
.col-20 extends .vyefaw { width: $col20; }
.col-21 extends .vyefaw { width: $col21; }
.col-22 extends .vyefaw { width: $col22; }
.col-23 extends .vyefaw { width: $col23; }
.col-24 extends .vyefaw { width: $col24; margin-right: 0; }

[Tim Kelty]

Ok, renaming the .col class seems to fix that issue. Do you plan on
fixing that? Its a pretty big deal for me as I often use similarly
prefixed classes.

.myclass is now showing up after the other stuff in the generated css,
but things still appear to get jumbled up in weird order when using
extends.

For example, the last xcss processed for me is main.xss which
contains:

.myclass extends .block {
background-color: #ff0000;
display: inline;
}

.taco extends .col-3 {
float:left;
}

but the rendered css (at the end of my master file) is backward:
.taco {
float: left;

}
.myclass {
background-color: #ff0000;
display: inline;
}

Also, all my column classes (which use extends) get jumbled seemingly
randomly:
.taco,
.col-3 {
width: 220px;
}
.col-18 {
width: 1420px;
}
.col-19 {
width: 1500px;
}
.col-16 {
width: 1260px;
}
.col-15 {
width: 1180px;
}
.col-20 {
width: 1580px;
}
.col-17 {
width: 1340px;
}
.col-22 {
width: 1740px;
}
.group {
zoom: 1;
}
.group:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.col-24 {
width: 1900px;
margin-right: 0;
}
.col-23 {
width: 1820px;
}
.col-14 {
width: 1100px;
}
.col-21 {
width: 1660px;
}
.col-11 {
width: 860px;
}
.col-2 {
width: 140px;
}
.col-4 {
width: 300px;
}
.col-1 {
width: 60px;
}
.last {
margin-right: 0;
margin-bottom: 0;
}
.container {
width: 1900px;
margin: 0 auto;
}
.col-5 {
width: 380px;
}
.col-6 {
width: 460px;
}
.col-10 {
width: 780px;
}
.col-12 {
width: 940px;
}
.col-9 {
width: 700px;
}
.col-8 {
width: 620px;
}
.col-7 {
width: 540px;
}
.col-13 {
width: 1020px;

[Anton Pawlik]

to fix the similar name issue i would need to parse the extends with a regular expression which will make things slow. I'm not even sure if i could write one that does this job right. it also don't have a impact on your outcome css, sure the compiled css looks wired but it will still behave in the right way. the unnecessary added classes doesn't do any harm to your layout because you dont use them.

the , is very important to xcss it always makes sure that the selectors are sorted by the comma quantity descending. If you are using the "compress to master" option its a bit different because the output css will be first sorted by the source .xcss files (by the same order as they are defined inside the config (bugfree since v1.0.1)). If its still not the case i will jump out of the window :D