Skip to content

Commit 3095bf8

Browse files
jantimonromain-blatrixYunFeng0817
authored
add support for @container (#2)
* add support for container queries * changeset * add test --------- Co-authored-by: Romain Blatrix <romain.blatrix@mirakl.com> Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
1 parent d90a5d3 commit 3095bf8

File tree

8 files changed

+115
-3
lines changed

8 files changed

+115
-3
lines changed

‎.changeset/two-bears-kick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb-cssom": minor
3+
---
4+
5+
add support for @container

‎lib/CSSContainerRule.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
//.CommonJS
2+
var CSSOM = {
3+
CSSRule: require("./CSSRule").CSSRule,
4+
CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
5+
CSSConditionRule: require("./CSSConditionRule").CSSConditionRule,
6+
};
7+
///CommonJS
8+
9+
10+
/**
11+
* @constructor
12+
* @see https://drafts.csswg.org/css-contain-3/
13+
* @see https://www.w3.org/TR/css-contain-3/
14+
*/
15+
CSSOM.CSSContainerRule = function CSSContainerRule() {
16+
CSSOM.CSSConditionRule.call(this);
17+
};
18+
19+
CSSOM.CSSContainerRule.prototype = new CSSOM.CSSConditionRule();
20+
CSSOM.CSSContainerRule.prototype.constructor = CSSOM.CSSContainerRule;
21+
CSSOM.CSSContainerRule.prototype.type = 17;
22+
23+
Object.defineProperties(CSSOM.CSSContainerRule.prototype, {
24+
"conditionText": {
25+
get: function() {
26+
return this.containerText;
27+
},
28+
set: function(value) {
29+
this.containerText = value;
30+
},
31+
configurable: true,
32+
enumerable: true
33+
},
34+
"cssText": {
35+
get: function() {
36+
var cssTexts = [];
37+
for (var i=0, length=this.cssRules.length; i < length; i++) {
38+
cssTexts.push(this.cssRules[i].cssText);
39+
}
40+
return "@container " + this.containerText + " {" + cssTexts.join("") + "}";
41+
},
42+
configurable: true,
43+
enumerable: true
44+
}
45+
});
46+
47+
48+
//.CommonJS
49+
exports.CSSContainerRule = CSSOM.CSSContainerRule;
50+
///CommonJS

‎lib/CSSRule.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ CSSOM.CSSRule.DOCUMENT_RULE = 13;
3030
CSSOM.CSSRule.FONT_FEATURE_VALUES_RULE = 14;
3131
CSSOM.CSSRule.VIEWPORT_RULE = 15;
3232
CSSOM.CSSRule.REGION_STYLE_RULE = 16;
33+
CSSOM.CSSRule.CONTAINER_RULE = 17;
3334
CSSOM.CSSRule.STARTING_STYLE_RULE = 1002;
3435

3536

‎lib/clone.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var CSSOM = {
66
CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
77
CSSConditionRule: require("./CSSConditionRule").CSSConditionRule,
88
CSSMediaRule: require("./CSSMediaRule").CSSMediaRule,
9+
CSSContainerRule: require("./CSSContainerRule").CSSContainerRule,
910
CSSSupportsRule: require("./CSSSupportsRule").CSSSupportsRule,
1011
CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,
1112
CSSKeyframeRule: require('./CSSKeyframeRule').CSSKeyframeRule,

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports.CSSConditionRule = require('./CSSConditionRule').CSSConditionRule;
77
exports.CSSStyleRule = require('./CSSStyleRule').CSSStyleRule;
88
exports.MediaList = require('./MediaList').MediaList;
99
exports.CSSMediaRule = require('./CSSMediaRule').CSSMediaRule;
10+
exports.CSSContainerRule = require('./CSSContainerRule').CSSContainerRule;
1011
exports.CSSSupportsRule = require('./CSSSupportsRule').CSSSupportsRule;
1112
exports.CSSImportRule = require('./CSSImportRule').CSSImportRule;
1213
exports.CSSFontFaceRule = require('./CSSFontFaceRule').CSSFontFaceRule;

‎lib/parse.js

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,24 @@ CSSOM.parse = function parse(token) {
3535
"importRule-begin": true,
3636
"importRule": true,
3737
"atBlock": true,
38+
"containerBlock": true,
3839
"conditionBlock": true,
3940
'documentRule-begin': true
4041
};
4142

4243
var styleSheet = new CSSOM.CSSStyleSheet();
4344

44-
// @type CSSStyleSheet|CSSMediaRule|CSSSupportsRule|CSSFontFaceRule|CSSKeyframesRule|CSSDocumentRule
45+
// @type CSSStyleSheet|CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSFontFaceRule|CSSKeyframesRule|CSSDocumentRule
4546
var currentScope = styleSheet;
4647

47-
// @type CSSMediaRule|CSSSupportsRule|CSSKeyframesRule|CSSDocumentRule
48+
// @type CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSKeyframesRule|CSSDocumentRule
4849
var parentRule;
4950

5051
var ancestorRules = [];
5152
var hasAncestors = false;
5253
var prevScope;
5354

54-
var name, priority="", styleRule, mediaRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule;
55+
var name, priority="", styleRule, mediaRule, containerRule, supportsRule, importRule, fontFaceRule, keyframesRule, documentRule, hostRule, startingStyleRule;
5556

5657
var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g;
5758

@@ -157,6 +158,13 @@ CSSOM.parse = function parse(token) {
157158
i += "media".length;
158159
buffer = "";
159160
break;
161+
} else if (token.indexOf("@container", i) === i) {
162+
state = "containerBlock";
163+
containerRule = new CSSOM.CSSContainerRule();
164+
containerRule.__starts = i;
165+
i += "container".length;
166+
buffer = "";
167+
break;
160168
} else if (token.indexOf("@supports", i) === i) {
161169
state = "conditionBlock";
162170
supportsRule = new CSSOM.CSSSupportsRule();
@@ -225,6 +233,16 @@ CSSOM.parse = function parse(token) {
225233
mediaRule.parentStyleSheet = styleSheet;
226234
buffer = "";
227235
state = "before-selector";
236+
} else if (state === "containerBlock") {
237+
containerRule.containerText = buffer.trim();
238+
239+
if (parentRule) {
240+
ancestorRules.push(parentRule);
241+
}
242+
currentScope = parentRule = containerRule;
243+
containerRule.parentStyleSheet = styleSheet;
244+
buffer = "";
245+
state = "before-selector";
228246
} else if (state === "conditionBlock") {
229247
supportsRule.conditionText = buffer.trim();
230248

@@ -411,6 +429,7 @@ CSSOM.parse = function parse(token) {
411429
if (
412430
parentRule.constructor.name === "CSSMediaRule"
413431
|| parentRule.constructor.name === "CSSSupportsRule"
432+
|| parentRule.constructor.name === "CSSContainerRule"
414433
) {
415434
prevScope = currentScope;
416435
currentScope = parentRule;
@@ -470,6 +489,7 @@ CSSOM.CSSStyleRule = require("./CSSStyleRule").CSSStyleRule;
470489
CSSOM.CSSImportRule = require("./CSSImportRule").CSSImportRule;
471490
CSSOM.CSSGroupingRule = require("./CSSGroupingRule").CSSGroupingRule;
472491
CSSOM.CSSMediaRule = require("./CSSMediaRule").CSSMediaRule;
492+
CSSOM.CSSContainerRule = require("./CSSContainerRule").CSSContainerRule;
473493
CSSOM.CSSConditionRule = require("./CSSConditionRule").CSSConditionRule;
474494
CSSOM.CSSSupportsRule = require("./CSSSupportsRule").CSSSupportsRule;
475495
CSSOM.CSSFontFaceRule = require("./CSSFontFaceRule").CSSFontFaceRule;

‎spec/parse.spec.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1246,6 +1246,39 @@ var TESTS = [
12461246
return result;
12471247
})()
12481248
},
1249+
{
1250+
input: "@container sidebar (min-width: 400px) { body{max-width:480px} }",
1251+
result: (function() {
1252+
var result = {
1253+
cssRules: [
1254+
{
1255+
containerText: "sidebar (min-width: 400px)",
1256+
cssRules: [
1257+
{
1258+
selectorText: "body",
1259+
style: {
1260+
0: "max-width",
1261+
"max-width": "480px",
1262+
__starts: 64,
1263+
length: 1
1264+
},
1265+
__starts: 60,
1266+
__ends: 81
1267+
}
1268+
],
1269+
parentRule: null,
1270+
__starts: 0,
1271+
__ends: 82
1272+
}
1273+
],
1274+
parentStyleSheet: null
1275+
};
1276+
result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result;
1277+
result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
1278+
result.cssRules[0].cssRules[0].parentRule = result.cssRules[0];
1279+
return result;
1280+
})()
1281+
},
12491282
{
12501283
input: "a{}@-moz-document/**/url-prefix(http://www.w3.org/Style/){body { color: purple; background: yellow; }}",
12511284
result: (function(){

‎src/files.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports.files = [
66
"CSSConditionRule",
77
"MediaList",
88
"CSSMediaRule",
9+
"CSSContainerRule",
910
"CSSSupportsRule",
1011
"CSSImportRule",
1112
"CSSFontFaceRule",

0 commit comments

Comments
 (0)