WICG / construct-stylesheets

API for constructing CSS stylesheet objects
Other
138 stars 25 forks source link

[Question] StyleSheetSets #130

Open Randy-Buchholz opened 4 years ago

Randy-Buchholz commented 4 years ago

I'm seeing some behavior I can't figure out. I don't know if this is expected or not. I'm not getting much info from the CSSOM spec.

I'm creating new sheets and setting the title new CSSStyleSheet( {title: "SheetName"} ). It constructs and sets the title. I can work with it in code and have it adopted, but it doesn't apply its behavior (it is enabled). The CSSOM spec says title can have something to do with StyleSheetSets. I'm not able to find any info on these, other than they seem to define groups of sheets by the title and are used to work with disabled. Am I missing something or is this a browser issue? TY

nordzilla commented 4 years ago

Hi Randy-Buchholz

It was determined through https://github.com/WICG/construct-stylesheets/issues/105#issuecomment-577704271 that CSSStyleSheet should no longer be able to be constructed with a title or alternate flag.

Unfortunately, it looks like the spec was never updated to reflect this decision. I'm sorry that it's caused confusion.

I would avoid writing any code that relies on a specific title, because the functionality is likely to be removed if implementations are still supporting it.

The desired behavior is to set the sheet's disabled state directly.

Randy-Buchholz commented 4 years ago

Thanks nordzilla. Yeah, it confused me, but trying to unravel that helped me learn a few things .

Maybe you can give me a little insight on a couple things I'm encountering. I started playing with a wrapper to compose stylesheets using Typed CSSOM. I wanted to use title internally to my project as a way to locate a "named/unique Id" sheet in a collection and as a correlation key when round-tripping between available and adopted sheets. Since the spec says title is to be set at construction (and is read-only) it seems that (without extending the object or mapping) there is no way to uniquely identify a sheet. I was using styleSheets.item("title") for getting sheets. Something similar applies to some of the other objects. It seems that many of the core constructs aren't designed to be constructed directly or named new CSSRule() with parameters I've tried gives Illegal constructor. It seems being able to give "backend" identifiers to these objects would be useful for manipulating them in code.

I can see scenarios like mine where you want to JIT small, targeted sheets from a library of identified rules. Is the general approach to avoid "loose" objects, or is there a different vision for things like this?

Has something like the following been considered (not the syntax, it's arbitrary, but reusable/named items)? Named parts could be reused from existing sheets, collections or domain libraries.

// Use directly or as template
new CSSStyleSheet( { title:"S1" } )
   .addRule( new CSSRule( {title: "R1 ", ...def } ) )
      .addProperty( "display", new CSSKeywordValue("flex"));

// Named blocks
new CSSStyleSheet( { title:"S1" } )
   .addRule( new CSSRule( {title: "R1 ", ...def } ) )
      .addPropertyGroup( "G1", [
         new CSSProperty( "display", new CSSKeywordValue("flex")),
         new CSSProperty( "color", "red")
      ]);

// Use as template
new CSSStyleSheet( {title: "JIT" } ).addRule( styleSheets.item("S1").rule("R1") );

new CSSStyleSheet( {title: "JIT2" } )
    .addPropertyGroup( styleSheets.item("S1").propertyGroup("G1") );