At rules brain dump. - Githubissues

This isn't a priority at all, I'm just putting it here to get it off my mind for the moment.

General remarks:

Current support of at rules is rather ad hoc. It is possible to express arbitrary at-rules (except @page) using arrays to impose order. Currently, when processing an object, j2c inserts @rules after the other statements.

@font-face is the only one to support Arrays as values. It would make sense for @page, @import and @namespace to do the same. For the last two, this would require a modification of declarations.

Let's recapitulate, quoting MDN (almost verbatim):

@charset — Defines the character set used by the style sheet.

@import — Tells the CSS engine to include an external style sheet.

@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

If present the former rules must happen at the beginning of the sheet, in that order.

Current status: when traversing an object, j2c inserts at-rules after the other statements. If you want to use these correctly, an Array is necessary to impose order. They can only take strings as parameters.

BUG: Arrays are not supported as values, but they should, especially for @namespace See #9.

I think I can safely ignore the first two in the context of j2c. I may at some point add a special case for them.

Nestable at-rules — which can be used as a statement of a style sheet as well as inside of conditional group rules:

@media — A conditional group rule which will apply its content if the device meets the criteria of the condition defined using a media query.

@supports — A conditional group rule which will apply its content if the browser meets the criteria of the given condition.

@document — A conditional group rule which will apply its content if the document in which the style sheet is applied to meets the criteria of the given condition. (deferred to Level 4 of CSS Spec)

@font-face — Describes the aspect of an external font to be downloaded.

@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.

@page — Describes the aspect of layout changes which will be applied when printing the document.

@viewport — Describes the aspects of the viewport for small screen devices. (currently at the Working Draft stage)

The conditional group rules are @media, @supports and @document. They take one or more condition then a block that contains nested statements. Sample syntax: @media condition(s) { statements }.

Current status: These rules are properly supported.

@page, @viewport and @font-face behave as rulesets. @page takes an initial pseudo-selector, @viewport and @font-face don't. Then all three take a block of declarations. @page :left { foo:bar; ...} @viewport {foo:bar;...}, and @font-face {foo:bar;...}.

Current status: @page ~~isn't supported ATM~~ has been added, as well as @viewport. @font-face works fine and supports arrays as values.

@keyframes takes a name and a block of rulesets. The selectors of these rulesets are temporal in nature corresponding to the point in time for a given keyframe.

Current status: @keyframes is properly supported and animation names are "localized" by default. This can be overridden using the :global() pseudo-selector. @-webkit-keyframes blocks are automatically generated with properties auto-prefixed in bulk.

j2css / j2c

At rules brain dump. #4