Skip to content
This repository was archived by the owner on Sep 29, 2024. It is now read-only.

Commit bb9d41d

Browse files
jonathantnealjonathantneal
authored
0.3.0
1 parent d9ee746 commit bb9d41d

11 files changed

+361
-44
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changes to CSS Typed Object Model
22

3+
### 0.3.0 (April 17, 2018)
4+
5+
- Only polyfill constructors on the window object passed into `polyfill()`
6+
- Support CSS calc, like `add()`, `sub()`, `mul()`, and `div()`
7+
- Support CSS min and max, like `min()` and `max()`
8+
39
### 0.2.0 (April 4, 2018)
410

511
- Safely checks for existing methods before polyfilling

‎README.md

Lines changed: 87 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,82 @@ Use [CSS Typed Object Model] features:
2626
```js
2727
// Element styles
2828
document.body.attributeStyleMap.set('padding-top', CSS.px(42));
29-
document.body.attributeStyleMap.get('padding-top') // CSSUnitValue { value: 42, unit: 'px' }
29+
document.body.attributeStyleMap.get('padding-top') /* CSSUnitValue {
30+
value: 42,
31+
unit: 'px'
32+
}.toString() => 42px */
3033

3134
document.body.attributeStyleMap.set('opacity', 0.3);
3235
typeof document.body.attributeStyleMap.get('opacity').value // number
3336
document.body.attributeStyleMap.get('opacity').unit // "number"
3437

3538
// Stylesheet rules
3639
document.styleSheets[0].cssRules[0].styleMap.set('padding-top', '100px');
37-
document.styleSheets[0].cssRules[0].styleMap.get('padding-top'); // CSSUnitValue { value: 100, unit: 'px' }
40+
document.styleSheets[0].cssRules[0].styleMap.get('padding-top'); /* CSSUnitValue {
41+
value: 100,
42+
unit: 'px'
43+
}.toString() => 100px */
44+
45+
// Math products
46+
CSS.px(15).add(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
47+
operator: "sum",
48+
values: [
49+
CSSUnitValue { value: 15, unit: 'px' },
50+
CSSUnitValue { value: 10, unit: 'rem' },
51+
CSSUnitValu { value: 5, unit: 'em' }
52+
]
53+
}.toString() => calc(15px + 10rem + 5em) */
54+
55+
CSS.px(15).mul(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
56+
operator: "product",
57+
values: [
58+
CSSUnitValue { value: 15, unit: 'px' },
59+
CSSUnitValue { value: 10, unit: 'rem' },
60+
CSSUnitValu { value: 5, unit: 'em' }
61+
]
62+
}.toString() => calc(15px * 10rem * 5em) */
63+
64+
CSS.px(15).sub(CSS.rem(10), CSS.em(5)) /* CSSMathSum {
65+
operator: "sum",
66+
values: [
67+
CSSUnitValue { value: 15, unit: 'px' },
68+
CSSUnitValue { value: -10, unit: 'rem' },
69+
CSSUnitValu { value: -5, unit: 'em' }
70+
]
71+
}.toString() => calc(15px + -10rem + -5em) */
72+
73+
CSS.px(15).div(CSS.rem(10), CSS.em(5)) /* CSSMathProduct {
74+
operator: "product",
75+
values: [
76+
CSSUnitValue { value: 15, unit: 'px' },
77+
CSSMathInvert {
78+
operator: 'invert',
79+
value: CSSUnitValue { value: 10, unit: 'rem' }
80+
},
81+
CSSMathInvert {
82+
operator: 'invert',
83+
value: CSSUnitValue { value: 5, unit: 'em' }
84+
}
85+
]
86+
}.toString() => calc(15px / 10rem / 5em) */
87+
88+
CSS.px(15).max(CSS.rem(10), CSS.em(5)) /* CSSMathMax {
89+
operator: 'max',
90+
values: [
91+
CSSUnitValue { value: 15, unit: 'px' },
92+
CSSUnitValue { value: 10, unit: 'rem' },
93+
CSSUnitValu { value: 5, unit: 'em' }
94+
],
95+
}.toString() => max(15px, 10rem, 5em) */
96+
97+
CSS.px(15).min(CSS.rem(10), CSS.em(5)) /* CSSMathMin {
98+
operator: 'min',
99+
values: [
100+
CSSUnitValue { value: 15, unit: 'px' },
101+
CSSUnitValue { value: 10, unit: 'rem' },
102+
CSSUnitValu { value: 5, unit: 'em' }
103+
],
104+
}.toString() => min(15px, 10rem, 5em) */
38105
```
39106

40107
## Features
@@ -45,13 +112,17 @@ The `polyfill` function adds the following functions to `window` if they do not
45112
already exist:
46113

47114
- `CSS`
48-
- `CSSStyleValue`
49115
- `CSSKeywordValue`
116+
- `CSSMathInvert`
117+
- `CSSMathMax`
118+
- `CSSMathMin`
119+
- `CSSMathProduct`
120+
- `CSSMathSum`
121+
- `CSSStyleValue`
50122
- `CSSUnitValue`
51123
- `StylePropertyMap`
52124

53-
It also adds the following functions to `window.CSS` if they do not already
54-
exist:
125+
It then adds the following functions to `CSS` if they do not already exist:
55126

56127
- `number`
57128
- `percent`
@@ -83,39 +154,20 @@ exist:
83154
- `dppx`
84155
- `fr`
85156

86-
### StylePropertyMap
87-
88-
A constructor for `StylePropertyMap`, used by the polyfill for `CSS`,
89-
`CSSRule`, and `Element`.
90-
91-
```js
92-
import { StylePropertyMap } from 'css-typed-om';
93-
```
94-
95-
### CSSKeywordValue
96-
97-
A constructor for `CSSKeywordValue`, used by `StylePropertyMap`.
98-
99-
```js
100-
import { CSSKeywordValue } from 'css-typed-om';
101-
```
102-
103-
### CSSUnitValue
157+
The new `CSSUnitValue` instances returned by these methods extend
158+
`CSSNumericValue`, which allow them to use the following methods:
104159

105-
A constructor for `CSSUnitValue`, used by `StylePropertyMap`.
160+
- `add`
161+
- `div`
162+
- `max`
163+
- `min`
164+
- `mul`
165+
- `sub`
106166

107-
```js
108-
import { CSSUnitValue } from 'css-typed-om';
109-
```
167+
The result of these transforms may be a new `CSSUnitValue` instance or a new
168+
`CSSMathProduct`, `CSSMathMax`, `CSSMathMin`, or `CSSMathSum` instance.
110169

111-
### CSSStyleValue
112-
113-
A constructor for `CSSStyleValue`, the super constructor of `CSSKeywordValue`
114-
and `CSSStyleValue`.
115-
116-
```js
117-
import { StylePropertyMap } from 'css-typed-om';
118-
```
170+
They all stringify back into compliant CSS.
119171

120172
[npm-url]: https://www.npmjs.com/package/css-typed-om
121173
[npm-img]: https://img.shields.io/npm/v/css-typed-om.svg

‎lib/CSSMathInvert.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const _value = new WeakMap();
2+
3+
export default class CSSMathInvert {
4+
get operator() {
5+
return 'invert';
6+
}
7+
8+
get value() {
9+
return _value.get(this);
10+
}
11+
12+
toString() {
13+
return `calc(1 / ${_value.get(this)})`
14+
}
15+
16+
constructor(value) {
17+
_value.set(this, value)
18+
}
19+
}

‎lib/CSSMathMax.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const _values = new WeakMap();
2+
3+
export default class CSSMathMax {
4+
get operator() {
5+
return 'max';
6+
}
7+
8+
get values() {
9+
return _values.get(this);
10+
}
11+
12+
toString() {
13+
return `max(${_values.get(this).join(', ')})`
14+
}
15+
16+
constructor(...values) {
17+
_values.set(this, values);
18+
}
19+
}

‎lib/CSSMathMin.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const _values = new WeakMap();
2+
3+
export default class CSSMathMin {
4+
get operator() {
5+
return 'min';
6+
}
7+
8+
get values() {
9+
return _values.get(this);
10+
}
11+
12+
toString() {
13+
return `min(${_values.get(this).join(', ')})`
14+
}
15+
16+
constructor(...values) {
17+
_values.set(this, values);
18+
}
19+
}

‎lib/CSSMathProduct.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import CSSMathInvert from './CSSMathInvert'
2+
3+
const _values = new WeakMap();
4+
5+
export default class CSSMathProduct {
6+
get operator() {
7+
return 'product';
8+
}
9+
10+
get values() {
11+
return _values.get(this);
12+
}
13+
14+
toString() {
15+
return `calc(${_values.get(this).reduce(
16+
(contents, value) => `${value instanceof CSSMathInvert
17+
? `${contents
18+
? `${contents} / `
19+
: '1 / '
20+
}${value.value}`
21+
: `${contents
22+
? `${contents} * `
23+
: ''}${value}`
24+
}`,
25+
''
26+
)})`
27+
}
28+
29+
constructor(...values) {
30+
_values.set(this, values);
31+
}
32+
}

‎lib/CSSMathSum.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const _values = new WeakMap();
2+
3+
export default class CSSMathSum {
4+
get operator() {
5+
return 'product';
6+
}
7+
8+
get values() {
9+
return _values.get(this);
10+
}
11+
12+
toString() {
13+
return `calc(${_values.get(this).reduce(
14+
(contents, value) => `${contents ? `${contents} + ` : ''}${value}`,
15+
''
16+
)})`
17+
}
18+
19+
constructor(...values) {
20+
_values.set(this, values);
21+
}
22+
}

0 commit comments

Comments
 (0)