Skip to content

Commit a417e9e

Browse files
ZeeCoderZeeCoder
committed
Removed unit restrictions
Resolves #20
1 parent c4eb684 commit a417e9e

File tree

2 files changed

+167
-52
lines changed

2 files changed

+167
-52
lines changed

‎packages/postcss-container-query/src/getStylesObjectFromNode.js

+33-20
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
import camelCase from "lodash.camelcase";
22
import isValueUsingContainerUnits from "./isValueUsingContainerUnits";
3-
4-
const bannedPropsInContainers = [
5-
"width",
6-
"height",
7-
"padding",
8-
"padding-left",
9-
"padding-right",
10-
"padding-top",
11-
"padding-bottom"
12-
];
3+
import {
4+
HEIGHT_UNIT,
5+
WIDTH_UNIT,
6+
MIN_UNIT,
7+
MAX_UNIT
8+
} from "../../common/src/constants";
139

1410
/**
1511
* Creates a styles object from the css declarations found in the given rule
@@ -60,16 +56,33 @@ export default function getStylesObjectFromNode(
6056
continue;
6157
}
6258

63-
if (
64-
isContainer &&
65-
containerUnitsUsed &&
66-
bannedPropsInContainers.indexOf(node.prop) !== -1
67-
) {
68-
throw node.error(
69-
'A container cannot use container units for the following properties: "' +
70-
bannedPropsInContainers.join('", "') +
71-
'".'
72-
);
59+
if (isContainer && containerUnitsUsed) {
60+
if (
61+
node.value.indexOf(MIN_UNIT) !== -1 ||
62+
node.value.indexOf(MAX_UNIT) !== -1
63+
) {
64+
throw node.error(
65+
`Width and height properties on containers cannot use ${MIN_UNIT} or ${MAX_UNIT} units.`
66+
);
67+
}
68+
69+
if (
70+
node.prop === "width" &&
71+
node.value.indexOf(WIDTH_UNIT) !== -1
72+
) {
73+
throw node.error(
74+
`Containers cannot use ${WIDTH_UNIT} for the width property.`
75+
);
76+
}
77+
78+
if (
79+
node.prop === "height" &&
80+
node.value.indexOf(HEIGHT_UNIT) !== -1
81+
) {
82+
throw node.error(
83+
`Containers cannot use ${HEIGHT_UNIT} for the height property.`
84+
);
85+
}
7386
}
7487

7588
styles[camelCase(node.prop)] = node.value;

‎packages/postcss-container-query/src/getStylesObjectFromNode.spec.js

+134-32
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Node from "../../common/__mocks__/Node";
33
import {
44
HEIGHT_UNIT,
55
WIDTH_UNIT,
6+
MIN_UNIT,
7+
MAX_UNIT,
68
DEFINE_CONTAINER_NAME
79
} from "../../common/src/constants";
810

@@ -71,10 +73,18 @@ test("should extract all styles", () => {
7173
});
7274
});
7375

74-
test("should throw if container units are used on a container with width or height properties", () => {
75-
const errorMessageRegex = /^A container cannot use container units for the following properties/;
76+
test("should extract all container unit styles", () => {
77+
expect(
78+
getStylesObjectFromNode(
79+
new Node({
80+
type: "rule",
81+
selector: ".container"
82+
}),
83+
true
84+
)
85+
).toEqual({});
7686

77-
expect(() => {
87+
expect(
7888
getStylesObjectFromNode(
7989
new Node({
8090
type: "rule",
@@ -86,18 +96,76 @@ test("should throw if container units are used on a container with width or heig
8696
name: DEFINE_CONTAINER_NAME
8797
})
8898
)
99+
.addNode(
100+
new Node({
101+
type: "decl",
102+
prop: "height",
103+
value: "42px"
104+
})
105+
)
89106
.addNode(
90107
new Node({
91108
type: "decl",
92109
prop: "width",
110+
value: "42px"
111+
})
112+
)
113+
.addNode(
114+
new Node({
115+
type: "decl",
116+
prop: "font-size",
117+
value: `5${HEIGHT_UNIT}px`
118+
})
119+
)
120+
.addNode(
121+
new Node({
122+
type: "decl",
123+
prop: "line-height",
93124
value: `42${WIDTH_UNIT}px`
94125
})
126+
)
127+
.addNode(
128+
new Node({
129+
type: "decl",
130+
prop: "border",
131+
value: "none"
132+
})
95133
),
96134
true,
135+
true
136+
)
137+
).toEqual({
138+
fontSize: `5${HEIGHT_UNIT}px`,
139+
lineHeight: `42${WIDTH_UNIT}px`
140+
});
141+
});
142+
143+
test("should throw if with / height are using the wrong container units", () => {
144+
expect(() => {
145+
getStylesObjectFromNode(
146+
new Node({
147+
type: "rule",
148+
selector: ".container"
149+
})
150+
.addNode(
151+
new Node({
152+
type: "atrule",
153+
name: DEFINE_CONTAINER_NAME
154+
})
155+
)
156+
.addNode(
157+
new Node({
158+
type: "decl",
159+
prop: "width",
160+
value: `42${MIN_UNIT}px`
161+
})
162+
),
97163
true,
98164
true
99165
);
100-
}).toThrowError(errorMessageRegex);
166+
}).toThrow(
167+
`Width and height properties on containers cannot use ${MIN_UNIT} or ${MAX_UNIT} units.`
168+
);
101169

102170
expect(() => {
103171
getStylesObjectFromNode(
@@ -115,28 +183,43 @@ test("should throw if container units are used on a container with width or heig
115183
new Node({
116184
type: "decl",
117185
prop: "height",
118-
value: `42${WIDTH_UNIT}px`
186+
value: `42${MIN_UNIT}px`
119187
})
120188
),
121189
true,
122-
true,
123190
true
124191
);
125-
}).toThrowError(errorMessageRegex);
126-
});
192+
}).toThrow(
193+
`Width and height properties on containers cannot use ${MIN_UNIT} or ${MAX_UNIT} units.`
194+
);
127195

128-
test("should extract all container unit styles", () => {
129-
expect(
196+
expect(() => {
130197
getStylesObjectFromNode(
131198
new Node({
132199
type: "rule",
133200
selector: ".container"
134-
}),
201+
})
202+
.addNode(
203+
new Node({
204+
type: "atrule",
205+
name: DEFINE_CONTAINER_NAME
206+
})
207+
)
208+
.addNode(
209+
new Node({
210+
type: "decl",
211+
prop: "width",
212+
value: `42${MAX_UNIT}px`
213+
})
214+
),
215+
true,
135216
true
136-
)
137-
).toEqual({});
217+
);
218+
}).toThrow(
219+
`Width and height properties on containers cannot use ${MIN_UNIT} or ${MAX_UNIT} units.`
220+
);
138221

139-
expect(
222+
expect(() => {
140223
getStylesObjectFromNode(
141224
new Node({
142225
type: "rule",
@@ -152,42 +235,61 @@ test("should extract all container unit styles", () => {
152235
new Node({
153236
type: "decl",
154237
prop: "height",
155-
value: "42px"
238+
value: `42${MAX_UNIT}px`
156239
})
157-
)
240+
),
241+
true,
242+
true
243+
);
244+
}).toThrow(
245+
`Width and height properties on containers cannot use ${MIN_UNIT} or ${MAX_UNIT} units.`
246+
);
247+
248+
expect(() => {
249+
getStylesObjectFromNode(
250+
new Node({
251+
type: "rule",
252+
selector: ".container"
253+
})
158254
.addNode(
159255
new Node({
160-
type: "decl",
161-
prop: "width",
162-
value: "42px"
256+
type: "atrule",
257+
name: DEFINE_CONTAINER_NAME
163258
})
164259
)
165260
.addNode(
166261
new Node({
167262
type: "decl",
168-
prop: "font-size",
169-
value: `5${HEIGHT_UNIT}px`
263+
prop: "height",
264+
value: `42${HEIGHT_UNIT}px`
170265
})
171-
)
266+
),
267+
true,
268+
true
269+
);
270+
}).toThrow(`Containers cannot use ${HEIGHT_UNIT} for the height property.`);
271+
272+
expect(() => {
273+
getStylesObjectFromNode(
274+
new Node({
275+
type: "rule",
276+
selector: ".container"
277+
})
172278
.addNode(
173279
new Node({
174-
type: "decl",
175-
prop: "line-height",
176-
value: `42${WIDTH_UNIT}px`
280+
type: "atrule",
281+
name: DEFINE_CONTAINER_NAME
177282
})
178283
)
179284
.addNode(
180285
new Node({
181286
type: "decl",
182-
prop: "border",
183-
value: "none"
287+
prop: "width",
288+
value: `42${WIDTH_UNIT}px`
184289
})
185290
),
186291
true,
187292
true
188-
)
189-
).toEqual({
190-
fontSize: `5${HEIGHT_UNIT}px`,
191-
lineHeight: `42${WIDTH_UNIT}px`
192-
});
293+
);
294+
}).toThrow(`Containers cannot use ${WIDTH_UNIT} for the width property.`);
193295
});

0 commit comments

Comments
 (0)