Skip to content

Commit 60cfc47

Browse files
cdoublevcdoublev
committed
Upgrade dependencies
1 parent ee5bba6 commit 60cfc47

File tree

10 files changed

+1493
-2375
lines changed

10 files changed

+1493
-2375
lines changed

‎__tests__/style.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -368,8 +368,8 @@ describe('CSSFontFaceDescriptors', () => {
368368
style.sizeAdjust = 'first-valid(1%)'
369369
expect(style.fontWeight).toBe('first-valid(1)')
370370
expect(style.sizeAdjust).toBe('first-valid(1%)')
371-
style.fontWeight = 'calc(progress(1 from 0 to 1))'
372-
style.sizeAdjust = 'calc(1% * progress(1 from 0 to 1))'
371+
style.fontWeight = 'calc(progress(1, 0, 1))'
372+
style.sizeAdjust = 'calc(1% * progress(1, 0, 1))'
373373
expect(style.fontWeight).toBe('calc(1)')
374374
expect(style.sizeAdjust).toBe('calc(1%)')
375375

@@ -425,7 +425,7 @@ describe('CSSKeyframeProperties', () => {
425425
expect(style.fontWeight).toBe('env(name)')
426426
style.fontWeight = 'first-valid(1)'
427427
expect(style.fontWeight).toBe('first-valid(1)')
428-
style.fontWeight = 'calc(progress(1 from 0 to 1))'
428+
style.fontWeight = 'calc(progress(1, 0, 1))'
429429
expect(style.fontWeight).toBe('calc(1)')
430430

431431
// Element-dependent substitution
@@ -491,7 +491,7 @@ describe('CSSMarginDescriptors', () => {
491491
expect(style.fontWeight).toBe('env(name)')
492492
style.fontWeight = 'first-valid(1)'
493493
expect(style.fontWeight).toBe('first-valid(1)')
494-
style.fontWeight = 'calc(progress(1 from 0 to 1))'
494+
style.fontWeight = 'calc(progress(1, 0, 1))'
495495
expect(style.fontWeight).toBe('calc(1)')
496496

497497
// Cascade-dependent substitution
@@ -550,8 +550,8 @@ describe('CSSPageDescriptors', () => {
550550
style.size = 'first-valid(1px)'
551551
expect(style.fontWeight).toBe('first-valid(1)')
552552
expect(style.size).toBe('first-valid(1px)')
553-
style.fontWeight = 'calc(progress(1 from 0 to 1))'
554-
style.size = 'calc(1px * progress(1 from 0 to 1))'
553+
style.fontWeight = 'calc(progress(1, 0, 1))'
554+
style.size = 'calc(1px * progress(1, 0, 1))'
555555
expect(style.fontWeight).toBe('calc(1)')
556556
expect(style.size).toBe('calc(1px)')
557557

@@ -597,7 +597,7 @@ describe('CSSPositionTryDescriptors', () => {
597597
expect(style.top).toBe('env(name)')
598598
style.top = 'first-valid(1px)'
599599
expect(style.top).toBe('first-valid(1px)')
600-
style.top = 'calc(1px * progress(1 from 0 to 1))'
600+
style.top = 'calc(1px * progress(1, 0, 1))'
601601
expect(style.top).toBe('calc(1px)')
602602

603603
// Element-dependent substitution
@@ -664,6 +664,9 @@ describe('arbitrary substitution', () => {
664664
// Non-strict comma-containing production
665665
['var(--custom,,)'],
666666
['var(--custom, 1 {})'],
667+
// Omitted component value
668+
['attr(name <string>)'],
669+
['attr(name <string>, "")', 'attr(name)'],
667670
]
668671
valid.forEach(([input, expected = input]) => {
669672
style.opacity = input

‎__tests__/value.js‎

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2521,7 +2521,7 @@ describe('<calc-mix()>', () => {
25212521
['<number> | <length>', 'calc-mix(1px, 1, 1)'],
25222522
['<length-percentage>', 'calc-mix(calc(1% / 1px), 1px, 1px)'],
25232523
['<length-percentage>', 'calc-mix(calc((1% + 1px) / 1px), 1px, 1px)'],
2524-
['<length-percentage>', 'calc-mix(progress(1% from 1px to 1px), 1px, 1px)'],
2524+
['<length-percentage>', 'calc-mix(progress(1%, 1px, 1px), 1px, 1px)'],
25252525
// Inconsistent calculation types
25262526
['<number> | <length>', 'calc-mix(0, 1, 1px)'],
25272527
['<number> | <percentage>', 'calc-mix(0, 1, 1%)'],
@@ -2536,10 +2536,10 @@ describe('<calc-mix()>', () => {
25362536
['<length>', 'calc-mix(--timeline, 1px * 1, 1px)', 'calc-mix(--timeline, 1px, 1px)'],
25372537
['<length>', 'calc-mix(0 * 1, 1px, 1px)', 'calc-mix(0, 1px, 1px)'],
25382538
['<length>', 'calc-mix(0%, 1px, 1px)'],
2539-
['<length>', 'calc-mix(progress(1% from 1% + 1% to 1%), 1px, 1px)', 'calc-mix(1, 1px, 1px)'],
2539+
['<length>', 'calc-mix(progress(1%, 1% + 1%, 1%), 1px, 1px)', 'calc-mix(1, 1px, 1px)'],
25402540
['<length-percentage>', 'calc-mix(0, 1px, 1%)'],
25412541
['<length-percentage>', 'calc-mix(0%, 1px, 1%)'],
2542-
['<length-percentage>', 'calc-mix(progress(1% from 1% to 1%), 1px, 1%)'],
2542+
['<length-percentage>', 'calc-mix(progress(1%, 1%, 1%), 1px, 1%)'],
25432543
['<length-percentage>', 'calc(1px * calc-mix(0%, 1% / 1px, (1% + 1px) / 1px))'],
25442544
]
25452545
valid.forEach(([definition, input, expected = input]) => expect(parse(definition, input)).toBe(expected))
@@ -2571,30 +2571,30 @@ describe('<progress()>', () => {
25712571
test('invalid', () => {
25722572
const invalid = [
25732573
// Inconsistent calculation types
2574-
['<number> | <length>', 'progress(1 from 1px to 1)'],
2575-
['<number> | <percentage>', 'progress(1 from 1% to 1)'],
2574+
['<number> | <length>', 'progress(1, 1px, 1)'],
2575+
['<number> | <percentage>', 'progress(1, 1%, 1)'],
25762576
// Result type mismatch
2577-
['<number> | <percentage>', 'progress(1 from (1% + 1px) / 1px to 1)'],
2578-
['<length>', 'calc(1px * progress(1% from 1px to 1px))'],
2577+
['<number> | <percentage>', 'progress(1, (1% + 1px) / 1px, 1)'],
2578+
['<length>', 'calc(1px * progress(1%, 1px, 1px))'],
25792579
]
25802580
invalid.forEach(([definition, input]) => expect(parse(definition, input, false)).toBeNull())
25812581
})
25822582
test('valid', () => {
25832583
const valid = [
25842584
// Identical units
2585-
['<number>', 'progress(1 from 0 to 2)', 'calc(0.5)'],
2586-
['<number>', 'progress(1 from 2 to 0)', 'calc(0.5)'],
2587-
['<number>', 'progress(-1 from 0 to 2)', 'calc(-0.5)'],
2588-
['<number>', 'progress(1em from 0em to 2em)'],
2589-
['<length-percentage>', 'calc(1px * progress(1% from 0% to 2%))'],
2585+
['<number>', 'progress(1, 0, 2)', 'calc(0.5)'],
2586+
['<number>', 'progress(1, 2, 0)', 'calc(0.5)'],
2587+
['<number>', 'progress(-1, 0, 2)', 'calc(-0.5)'],
2588+
['<number>', 'progress(1em, 0em, 2em)'],
2589+
['<length-percentage>', 'calc(1px * progress(1%, 0%, 2%))'],
25902590
// Different units
2591-
['<number>', 'progress(48px from 0px to 1in)', 'calc(0.5)'],
2592-
['<length-percentage>', 'calc(1px * progress(1px from 0% to 2px))'],
2591+
['<number>', 'progress(48px, 0px, 1in)', 'calc(0.5)'],
2592+
['<length-percentage>', 'calc(1px * progress(1px, 0%, 2px))'],
25932593
// Consistent type
2594-
['<number>', 'progress(1 * 1 from 360deg / 1turn to 1em / 1px)', 'progress(1 from 1 to 1em / 1px)'],
2595-
['<length-percentage>', 'calc(1px * progress(1 * 1 from 1% / 1% to 1em / 1px))', 'calc(1px * progress(1 from 1% / 1% to 1em / 1px))'],
2594+
['<number>', 'progress(1 * 1, 360deg / 1turn, 1em / 1px)', 'progress(1, 1, 1em / 1px)'],
2595+
['<length-percentage>', 'calc(1px * progress(1 * 1, 1% / 1%, 1em / 1px))', 'calc(1px * progress(1, 1% / 1%, 1em / 1px))'],
25962596
// Equal argument values
2597-
['<number>', 'progress(1 from 1 to 1)', 'calc(0)'],
2597+
['<number>', 'progress(1, 1, 1)', 'calc(0)'],
25982598
]
25992599
valid.forEach(([definition, input, expected = input]) => expect(parse(definition, input)).toBe(expected))
26002600
})
@@ -2603,46 +2603,44 @@ describe('<container-progress()>', () => {
26032603
test('invalid', () => {
26042604
const invalid = [
26052605
// Invalid feature
2606-
['<number>', 'container-progress(resolution from 1dpi to 1dpi)'],
2607-
['<number>', 'container-progress(orientation from 1 to 1)'],
2608-
['<number>', 'container-progress(width: 1px from 1px to 1px)'],
2609-
['<number>', 'container-progress(width < 1px from 1px to 1px)'],
2606+
['<number>', 'container-progress(resolution, 1dpi, 1dpi)'],
2607+
['<number>', 'container-progress(orientation, 1, 1)'],
2608+
['<number>', 'container-progress(width: 1px, 1px, 1px)'],
2609+
['<number>', 'container-progress(width < 1px, 1px, 1px)'],
26102610
// Invalid value
2611-
['<number>', 'container-progress(width from 1 to 1)'],
2612-
['<number>', 'container-progress(width from 1% to 1%)'],
2613-
['<length-percentage>', 'calc(1px * container-progress(width from 1% to 1px))'],
2614-
['<length>', 'calc(1px * container-progress(width from 1% + 1px to 1px))'],
2611+
['<number>', 'container-progress(width, 1, 1)'],
2612+
['<number>', 'container-progress(width, 1%, 1%)'],
2613+
['<length-percentage>', 'calc(1px * container-progress(width, 1%, 1px))'],
2614+
['<length>', 'calc(1px * container-progress(width, 1% + 1px, 1px))'],
26152615
]
26162616
invalid.forEach(([definition, input]) => expect(parse(definition, input, false)).toBeNull())
26172617
})
26182618
test('valid', () => {
2619-
expect(parse('<number>', 'container-progress(width from 0px + 1px to 1px * 1)'))
2620-
.toBe('container-progress(width from 1px to 1px)')
2621-
expect(parse('<number>', 'container-progress(aspect-ratio from -1 to 1)'))
2622-
.toBe('container-progress(aspect-ratio from -1 to 1)')
2619+
expect(parse('<number>', 'container-progress(width, 0px + 1px, 1px * 1)'))
2620+
.toBe('container-progress(width, 1px, 1px)')
2621+
expect(parse('<number>', 'container-progress(aspect-ratio, -1, 1)'))
2622+
.toBe('container-progress(aspect-ratio, -1, 1)')
26232623
})
26242624
})
26252625
describe('<media-progress()>', () => {
26262626
test('invalid', () => {
26272627
const invalid = [
26282628
// Invalid feature
2629-
['<number>', 'media-progress(inline-size from 1px to 1px)'],
2630-
['<number>', 'media-progress(orientation from 1 to 1)'],
2631-
['<number>', 'media-progress(width: 1px from 1px to 1px)'],
2632-
['<number>', 'media-progress(width < 1px from 1px to 1px)'],
2629+
['<number>', 'media-progress(inline-size, 1px, 1px)'],
2630+
['<number>', 'media-progress(grid, 1, 1)'],
2631+
['<number>', 'media-progress(width: 1px, 1px, 1px)'],
2632+
['<number>', 'media-progress(width < 1px, 1px, 1px)'],
26332633
// Invalid value
2634-
['<number>', 'media-progress(width from 1 to 1)'],
2635-
['<number>', 'media-progress(width from 1% to 1%)'],
2636-
['<length-percentage>', 'calc(1px * media-progress(width from 1% to 1px))'],
2637-
['<length>', 'calc(1px * media-progress(width from 1% + 1px to 1px))'],
2634+
['<number>', 'media-progress(width, 1, 1)'],
2635+
['<number>', 'media-progress(width, 1%, 1%)'],
2636+
['<length-percentage>', 'calc(1px * media-progress(width, 1%, 1px))'],
2637+
['<length>', 'calc(1px * media-progress(width, 1% + 1px, 1px))'],
26382638
]
26392639
invalid.forEach(([definition, input]) => expect(parse(definition, input, false)).toBeNull())
26402640
})
26412641
test('valid', () => {
2642-
expect(parse('<number>', 'media-progress(width from 0px + 1px to 1px * 1)'))
2643-
.toBe('media-progress(width from 1px to 1px)')
2644-
expect(parse('<number>', 'media-progress(aspect-ratio from -1 to 1)'))
2645-
.toBe('media-progress(aspect-ratio from -1 to 1)')
2642+
expect(parse('<number>', 'media-progress(width, 0px + 1px, 1px * 1)')).toBe('media-progress(width, 1px, 1px)')
2643+
expect(parse('<number>', 'media-progress(aspect-ratio, -1, 1)')).toBe('media-progress(aspect-ratio, -1, 1)')
26462644
})
26472645
})
26482646
describe('<sibling-count()>, <sibling-index()>', () => {
@@ -2966,7 +2964,7 @@ describe('<color>', () => {
29662964
['rgb(calc(-1%) 0% 0% / calc(-1%))', 'rgba(0, 0, 0, 0)'],
29672965
['rgb(calc(101%) 0% 0% / calc(101%))', 'rgb(255, 0, 0)'],
29682966
['rgba(-1 calc(1em / 1px) 101% / 1)', 'rgb(0 calc(1em / 1px) 255)'],
2969-
['rgb(calc(1) sibling-index() progress(1 from 0 to 2))', 'rgb(1 sibling-index() 0.5)'],
2967+
['rgb(calc(1) sibling-index() progress(1, 0, 2))', 'rgb(1 sibling-index() 0.5)'],
29702968
// Relative color syntax
29712969
['rgb(from green alpha calc(r) calc(g * 1%) / calc(b + 1 + 1))', 'rgb(from green alpha calc(r) calc(1% * g) / calc(2 + b))'],
29722970
['rgba(from rgba(-1 256 0 / -1) -100% 200% 0% / 101%)', 'rgb(from rgb(-1 256 0 / 0) -255 510 0)'],
@@ -3016,7 +3014,7 @@ describe('<color>', () => {
30163014
['hsl(calc(-540deg) 100% 50% / calc(-1%))', 'rgba(0, 255, 255, 0)'],
30173015
['hsl(calc(540deg) 100% 50% / 101%)', 'rgb(0, 255, 255)'],
30183016
['hsla(-540 calc(1em / 1px) 101% / 1)', 'hsl(180 calc(1em / 1px) 100)'],
3019-
['hsl(calc(1) sibling-index() progress(1 from 0 to 2))', 'hsl(1 sibling-index() 0.5)'],
3017+
['hsl(calc(1) sibling-index() progress(1, 0, 2))', 'hsl(1 sibling-index() 0.5)'],
30203018
// Relative color syntax
30213019
['hsl(from green alpha calc(h) calc(s * 1%) / calc(l + 1 + 1))', 'hsl(from green alpha calc(h) calc(1% * s) / calc(2 + l))'],
30223020
['hsla(from hsla(540 -1 0 / -1) 540deg 101% 0% / 101%)', 'hsl(from hsl(180 -1 0 / 0) 180 101 0)'],
@@ -3062,7 +3060,7 @@ describe('<color>', () => {
30623060
['hwb(calc(-540deg) 0% 0% / calc(-1%))', 'rgba(0, 255, 255, 0)'],
30633061
['hwb(calc(540deg) 0% 0% / calc(101%))', 'rgb(0, 255, 255)'],
30643062
['hwb(-540 calc(1em / 1px) 101% / 1)', 'hwb(180 calc(1em / 1px) 100)'],
3065-
['hwb(calc(1) sibling-index() progress(1 from 0 to 2))', 'hwb(1 sibling-index() 0.5)'],
3063+
['hwb(calc(1) sibling-index() progress(1, 0, 2))', 'hwb(1 sibling-index() 0.5)'],
30663064
// Relative color syntax
30673065
['hwb(from green alpha calc(h) calc(w * 1%) / calc(b + 1 + 1))', 'hwb(from green alpha calc(h) calc(1% * w) / calc(2 + b))'],
30683066
['hwb(from hwb(540 -1 0 / -1) 540deg -1% 0% / 101%)', 'hwb(from hwb(180 -1 0 / 0) 180 -1 0)'],
@@ -3831,7 +3829,7 @@ describe('<progress>', () => {
38313829
const invalid = [
38323830
// Invalid <calc-sum>
38333831
'(1% + 1px) / 1px',
3834-
'progress(1% from 1px to 1px)',
3832+
'progress(1%, 1px, 1px)',
38353833
// Invalid <'animation-timeline'>
38363834
'auto',
38373835
'none',
@@ -4080,8 +4078,8 @@ describe('<syntax-component>', () => {
40804078
expect(parse('<syntax-component>', '<transform-list >', false)).toBeNull()
40814079
})
40824080
test('representation', () => {
4083-
const componentName = customIdent('a', ['<syntax-component-name>'])
4084-
const component = list([componentName, omitted], '', ['<syntax-component>'])
4081+
const componentUnit = ident('a', ['<syntax-single-component>'])
4082+
const component = list([componentUnit, omitted], '', ['<syntax-component>'])
40854083
expect(parse('<syntax-component>', 'a', false)).toMatchObject(component)
40864084
})
40874085
})

‎lib/parse/configure.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
* @param {object} node
44
* @returns {object}
55
* @see {@link https://drafts.csswg.org/css-cascade-5/#typedef-layer-name}
6-
* @see {@link https://drafts.csswg.org/css-mixins-1/#typedef-syntax-component}
76
* @see {@link https://drafts.csswg.org/css-page-3/#syntax-page-selector}
87
* @see {@link https://drafts.csswg.org/css-syntax-3/#urange-syntax}
98
* @see {@link https://drafts.csswg.org/css-values-5/#typedef-attr-name}
9+
* @see {@link https://drafts.csswg.org/css-values-5/#typedef-syntax}
1010
* @see {@link https://drafts.csswg.org/css-view-transitions-2/#typedef-pt-name-and-class-selector}
1111
* @see {@link https://drafts.csswg.org/mediaqueries-5/#mq-syntax}
1212
* @see {@link https://drafts.csswg.org/selectors-4/#white-space}

‎lib/parse/postprocess.js‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -833,32 +833,14 @@ function postParseLineNames(names, node) {
833833
*/
834834
function getMediaFeatureContextName(context) {
835835
if (context.function) {
836-
return `@${context.function.definition.name.split('-progress')[0]}`
836+
return context.function.definition.name
837837
}
838838
if (context.rule.definition.name === '@style') {
839839
return '@media'
840840
}
841841
return context.rule.definition.name
842842
}
843843

844-
/**
845-
* @param {object} feature
846-
* @param {object} node
847-
* @returns {SyntaxError|object}
848-
* @see {@link https://drafts.csswg.org/css-values-5/#funcdef-container-progress}
849-
* @see {@link https://drafts.csswg.org/css-values-5/#funcdef-media-progress}
850-
*
851-
* It aborts parsing when the feature is received in container-progress() or
852-
* media-progress() and its type is not `range`.
853-
*/
854-
function postParseMediaFeature(feature, node) {
855-
context = node.context.function?.definition.name.split('-progress')[0]
856-
if (context && descriptors[`@${context}`][feature.value].type !== 'range') {
857-
return error(node)
858-
}
859-
return feature
860-
}
861-
862844
/**
863845
* @param {object} name
864846
* @param {object} node
@@ -871,23 +853,34 @@ function postParseMediaFeature(feature, node) {
871853
* It represents the name in lowercase, with an aliased name replaced with its
872854
* target name.
873855
*/
874-
function postParseMediaFeatureName(name, { context, parent }) {
856+
function postParseMediaFeatureName(name, node) {
857+
858+
const { context, parent } = node
875859
const lowercase = name.value.toLowerCase()
876860
const unprefixed = lowercase.replace(/(min|max)-/, '')
877-
context = getMediaFeatureContextName(context)
878-
const target = compatibility.descriptors[context]?.aliases.get(unprefixed)
861+
862+
let contextName = getMediaFeatureContextName(context)
863+
if (contextName.endsWith('-progress')) {
864+
contextName = `@${contextName.split('-progress')[0]}`
865+
if (descriptors[contextName][lowercase]?.type !== 'range') {
866+
return error(node)
867+
}
868+
}
869+
870+
const target = compatibility.descriptors[contextName]?.aliases.get(unprefixed)
871+
879872
if (lowercase === unprefixed) {
880873
if (target) {
881874
return { ...name, value: target }
882875
}
883-
if (descriptors[context][lowercase]) {
876+
if (descriptors[contextName][lowercase]) {
884877
return { ...name, value: lowercase }
885878
}
886879
} else if (parent?.parent?.definition.name === '<mf-plain>'/* only for <mf-name> tests: */ || !parent) {
887880
if (target) {
888881
return { ...name, value: `${lowercase.includes('min-') ? 'min' : 'max'}-${target}` }
889882
}
890-
if (descriptors[context][unprefixed]?.type === 'range') {
883+
if (descriptors[contextName][unprefixed]?.type === 'range') {
891884
return { ...name, value: lowercase }
892885
}
893886
}
@@ -1761,7 +1754,6 @@ module.exports = {
17611754
'<layer-name>': postParseLayerName,
17621755
'<length>': postParseDimension,
17631756
'<line-names>': postParseLineNames,
1764-
'<media-feature>': postParseMediaFeature,
17651757
'<media-query-list>': postParseMediaQueryList,
17661758
'<media-type>': postParseMediaType,
17671759
'<mf-name>': postParseMediaFeatureName,

‎lib/serialize.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,15 @@ function serializeAnB({ value: { a, b } }) {
9292
* @see {@link https://drafts.csswg.org/css-values-5/#funcdef-attr}
9393
*/
9494
function serializeAttribute({ value }) {
95-
const [name, type,, fallback] = value.map(serializeCSSComponentValue)
95+
const [name, syntax,, fallback] = value.map(serializeCSSComponentValue)
96+
if (syntax === '<string>' && fallback === '""') {
97+
return `attr(${name})`
98+
}
9699
let string = `attr(${name}`
97-
if (type && type !== 'string') {
98-
string += ` ${type}`
100+
if (syntax) {
101+
string += ` ${syntax}`
99102
}
100-
if (fallback && (fallback !== '""' || type !== 'string')) {
103+
if (fallback) {
101104
string += `, ${fallback}`
102105
}
103106
string += ')'

0 commit comments

Comments
 (0)