Skip to content

Commit 8e9a366

Browse files
committed
Drop compat plugin
1 parent 9717107 commit 8e9a366

File tree

13 files changed

+63
-361
lines changed

13 files changed

+63
-361
lines changed

packages/cache/src/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import memoize from '@emotion/memoize'
1414
import isDevelopment from '#is-development'
1515
import isBrowser from '#is-browser'
1616
import {
17-
compat,
1817
removeLabel,
1918
createUnsafeSelectorsAlarm,
2019
incorrectImportAlarm
@@ -121,7 +120,7 @@ let createCache = (options: Options): EmotionCache => {
121120
sheet: StyleSheet,
122121
shouldCache: boolean
123122
) => string | void
124-
const omnipresentPlugins = [compat, removeLabel]
123+
const omnipresentPlugins = [removeLabel]
125124

126125
if (isDevelopment) {
127126
omnipresentPlugins.push(

packages/cache/src/stylis-plugins.ts

Lines changed: 1 addition & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,5 @@
11
import { EmotionCache } from '@emotion/utils'
2-
import {
3-
alloc,
4-
dealloc,
5-
delimit,
6-
Element,
7-
from,
8-
Middleware,
9-
next,
10-
peek,
11-
position,
12-
slice,
13-
token
14-
} from 'stylis'
15-
16-
// based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
17-
const identifierWithPointTracking = (
18-
begin: number,
19-
points: number[],
20-
index: number
21-
) => {
22-
let previous = 0
23-
let character = 0
24-
25-
while (true) {
26-
previous = character
27-
character = peek()
28-
29-
// &\f
30-
if (previous === 38 && character === 12) {
31-
points[index] = 1
32-
}
33-
34-
if (token(character)) {
35-
break
36-
}
37-
38-
next()
39-
}
40-
41-
return slice(begin, position)
42-
}
43-
44-
const toRules = (parsed: string[], points: number[]) => {
45-
// pretend we've started with a comma
46-
let index = -1
47-
let character = 44
48-
49-
do {
50-
switch (token(character)) {
51-
case 0:
52-
// &\f
53-
if (character === 38 && peek() === 12) {
54-
// this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
55-
// stylis inserts \f after & to know when & where it should replace this sequence with the context selector
56-
// and when it should just concatenate the outer and inner selectors
57-
// it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
58-
points[index] = 1
59-
}
60-
parsed[index] += identifierWithPointTracking(
61-
position - 1,
62-
points,
63-
index
64-
)
65-
break
66-
case 2:
67-
parsed[index] += delimit(character)
68-
break
69-
case 4:
70-
// comma
71-
if (character === 44) {
72-
// colon
73-
parsed[++index] = peek() === 58 ? '&\f' : ''
74-
points[index] = parsed[index].length
75-
break
76-
}
77-
// fallthrough
78-
default:
79-
parsed[index] += from(character)
80-
}
81-
} while ((character = next()))
82-
83-
return parsed
84-
}
85-
86-
const getRules = (value: string, points: number[]) =>
87-
dealloc(toRules(alloc(value) as string[], points))
88-
89-
// WeakSet would be more appropriate, but only WeakMap is supported in IE11
90-
const fixedElements = /* #__PURE__ */ new WeakMap()
91-
92-
export let compat: Middleware = element => {
93-
if (
94-
element.type !== 'rule' ||
95-
!element.parent ||
96-
// positive .length indicates that this rule contains pseudo
97-
// negative .length indicates that this rule has been already prefixed
98-
element.length < 1
99-
) {
100-
return
101-
}
102-
103-
let value = element.value
104-
let parent: Element | null = element.parent
105-
let isImplicitRule =
106-
element.column === parent.column && element.line === parent.line
107-
108-
while (parent.type !== 'rule') {
109-
parent = parent.parent
110-
if (!parent) return
111-
}
112-
113-
// short-circuit for the simplest case
114-
if (
115-
element.props.length === 1 &&
116-
value.charCodeAt(0) !== 58 /* colon */ &&
117-
!fixedElements.get(parent)
118-
) {
119-
return
120-
}
121-
122-
// if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
123-
// then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
124-
if (isImplicitRule) {
125-
return
126-
}
127-
128-
fixedElements.set(element, true)
129-
130-
const points: number[] = []
131-
const rules = getRules(value, points)
132-
const parentRules = parent.props
133-
134-
for (let i = 0, k = 0; i < rules.length; i++) {
135-
for (let j = 0; j < parentRules.length; j++, k++) {
136-
;(element.props as string[])[k] = points[i]
137-
? rules[i].replace(/&\f/g, parentRules[j])
138-
: `${parentRules[j]} ${rules[i]}`
139-
}
140-
}
141-
}
2+
import { Element, Middleware } from 'stylis'
1423

1434
export let removeLabel: Middleware = element => {
1445
if (element.type === 'decl') {

packages/css/test/css.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('css', () => {
3333
})
3434

3535
test('falsy value in nested selector on object', () => {
36-
const cls1 = css({ ':hover': { display: null, color: 'hotpink' } })
36+
const cls1 = css({ '&:hover': { display: null, color: 'hotpink' } })
3737
const { container } = render(<div className={cls1} />)
3838
expect(container.firstChild).toMatchSnapshot()
3939
})
@@ -120,7 +120,7 @@ describe('css', () => {
120120
width: 30,
121121
height: 'calc(40vw - 50px)',
122122
'&:hover': { color: 'blue' },
123-
':after': {
123+
'&:after': {
124124
content: '" "',
125125
color: 'red'
126126
},
@@ -247,7 +247,7 @@ describe('css', () => {
247247
})
248248
test('registered styles as nested selector value in object', () => {
249249
const cls = css({ display: 'flex', backgroundColor: 'hotpink' })
250-
const cls1 = css({ ':hover': cls })
250+
const cls1 = css({ '&:hover': cls })
251251
const { container } = render(<div className={cls1} />)
252252
expect(container.firstChild).toMatchSnapshot()
253253
})

packages/css/test/instance/css.test.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ describe('css', () => {
3434
})
3535

3636
test('falsy value in nested selector on object', () => {
37-
const cls1 = differentCss({ ':hover': { display: null, color: 'hotpink' } })
37+
const cls1 = differentCss({
38+
'&:hover': { display: null, color: 'hotpink' }
39+
})
3840
const { container } = render(<div className={cls1} />)
3941
expect(container.firstChild).toMatchSnapshot()
4042
})
@@ -125,7 +127,7 @@ describe('css', () => {
125127
width: 30,
126128
height: 'calc(40vw - 50px)',
127129
'&:hover': { color: 'blue' },
128-
':after': {
130+
'&:after': {
129131
content: '" "',
130132
color: 'red'
131133
},
@@ -254,7 +256,7 @@ describe('css', () => {
254256
})
255257
test('registered styles as nested selector value in object', () => {
256258
const cls = differentCss({ display: 'flex', backgroundColor: 'hotpink' })
257-
const cls1 = differentCss({ ':hover': cls })
259+
const cls1 = differentCss({ '&:hover': cls })
258260
const { container } = render(<div className={cls1} />)
259261
expect(container.firstChild).toMatchSnapshot()
260262
})

packages/css/test/no-babel/index.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ describe('css', () => {
6363
width: 30,
6464
height: 'calc(40vw - 50px)',
6565
'&:hover': { color: 'blue' },
66-
':after': {
66+
'&:after': {
6767
content: '" "',
6868
color: 'red'
6969
},

packages/css/test/selectivity.test.js

Lines changed: 0 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -148,163 +148,3 @@ describe('css', () => {
148148
expect(sheet).toMatchSnapshot()
149149
})
150150
})
151-
152-
describe('orphaned pseudos', () => {
153-
afterEach(() => flush())
154-
155-
test('single', () => {
156-
css`
157-
:focus {
158-
color: hotpink;
159-
}
160-
`
161-
162-
expect(sheet).toMatchSnapshot()
163-
})
164-
165-
test('multiple in a group', () => {
166-
css`
167-
:hover div,
168-
:focus {
169-
color: hotpink;
170-
}
171-
`
172-
173-
expect(sheet).toMatchSnapshot()
174-
})
175-
176-
test('multiple in a group in multiple in a group', () => {
177-
css`
178-
.foo,
179-
.bar div,
180-
.qwe {
181-
:first-child,
182-
div,
183-
span,
184-
:last-child {
185-
color: hotpink;
186-
}
187-
}
188-
`
189-
190-
expect(sheet).toMatchSnapshot()
191-
})
192-
193-
test('regexp special character', () => {
194-
css`
195-
:nth-child(3) {
196-
color: hotpink;
197-
}
198-
`
199-
200-
expect(sheet).toMatchSnapshot()
201-
})
202-
203-
test('overlapping', () => {
204-
css`
205-
& :first-child {
206-
:first-child {
207-
color: hotpink;
208-
}
209-
}
210-
`
211-
212-
expect(sheet).toMatchSnapshot()
213-
})
214-
215-
test('overlapping - reversed', () => {
216-
css`
217-
& :first-child {
218-
:first-child & {
219-
color: hotpink;
220-
}
221-
}
222-
`
223-
224-
expect(sheet).toMatchSnapshot()
225-
})
226-
227-
test('in nested atrules', () => {
228-
css`
229-
@media (max-width: 400px) {
230-
@supports (display: grid) {
231-
div,
232-
:first-child {
233-
color: hotpink;
234-
}
235-
}
236-
}
237-
`
238-
239-
expect(sheet).toMatchSnapshot()
240-
})
241-
242-
test('with nested atrule', () => {
243-
css({
244-
'::before': {
245-
content: '"*"',
246-
background: 'pink',
247-
'@media screen and (max-width: 800px)': {
248-
background: 'cyan'
249-
}
250-
}
251-
})
252-
253-
expect(sheet).toMatchSnapshot()
254-
})
255-
256-
test('selector list with nested atrule', () => {
257-
css({
258-
'::backdrop, & + .backdrop': {
259-
backgroundColor: 'grey',
260-
'@media print': {
261-
display: 'none'
262-
}
263-
}
264-
})
265-
266-
expect(sheet).toMatchSnapshot()
267-
})
268-
269-
test('regular rule nested in orphaned pseudo', () => {
270-
css({
271-
':hover': {
272-
color: 'hotpink',
273-
'.foo': {
274-
color: 'grey'
275-
}
276-
}
277-
})
278-
279-
expect(sheet).toMatchSnapshot()
280-
})
281-
282-
test('regular rule with nested rule nested in orphaned pseudo', () => {
283-
css({
284-
':hover': {
285-
color: 'hotpink',
286-
'.foo': {
287-
color: 'grey',
288-
'@media print': {
289-
display: 'none'
290-
}
291-
}
292-
}
293-
})
294-
295-
expect(sheet).toMatchSnapshot()
296-
})
297-
298-
test('orphaned pseudo nested in orphaned pseudo', () => {
299-
css({
300-
':hover': {
301-
color: 'hotpink',
302-
':focus': {
303-
outlineColor: 'blue'
304-
}
305-
}
306-
})
307-
308-
expect(sheet).toMatchSnapshot()
309-
})
310-
})

0 commit comments

Comments
 (0)