Skip to content

fix(css): revert animation scoping #1113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2022
Merged

fix(css): revert animation scoping #1113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 6 additions & 26 deletions packages/qwik/src/core/style/scoped-stylesheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export function scopeStylesheet(css: string, scopeId: string): string {
let lastIdx = idx;
let mode: MODE = MODE.rule as any;
let lastCh = 0;
let lastMarkIdx = 0;
DEBUG && console.log('--------------------------');
while (idx < end) {
DEBUG && console.log(css);
Expand Down Expand Up @@ -53,12 +52,9 @@ export function scopeStylesheet(css: string, scopeId: string): string {
modeToString(newMode)
);
// We found a match!
if (newMode === MODE.MARK_INSERT_LOCATION) {
lastMarkIdx = idx - 1;
continue; // pretend no match.
} else if (newMode === MODE.EXIT || newMode == MODE.EXIT_INSERT_SCOPE) {
if (newMode === MODE.EXIT || newMode == MODE.EXIT_INSERT_SCOPE) {
if (newMode === MODE.EXIT_INSERT_SCOPE) {
if (mode === MODE.starSelector && !isInGlobal()) {
if (mode === MODE.starSelector && !shouldNotInsertScoping()) {
// Replace `*` with the scoping elementClassIdSelector.
if (isChainedSelector(ch)) {
// *foo
Expand All @@ -68,8 +64,6 @@ export function scopeStylesheet(css: string, scopeId: string): string {
insertScopingSelector(idx - 2);
}
lastIdx++;
} else if (mode === MODE.animation) {
insertScopingSelector(lastMarkIdx);
} else {
if (!isChainedSelector(ch)) {
// We are exiting one of the Selector so we may need to
Expand Down Expand Up @@ -122,12 +116,10 @@ export function scopeStylesheet(css: string, scopeId: string): string {
lastIdx = idx;
}
function insertScopingSelector(idx: number) {
if (mode === MODE.pseudoGlobal || isInGlobal()) return;
if (mode === MODE.pseudoGlobal || shouldNotInsertScoping()) return;

flush(idx);
const parentMode = stack.length && stack[stack.length - 1];
const separator = parentMode === MODE.atRuleSelector || mode === MODE.animation ? '-' : '.';
out.push(separator, ComponentStylesPrefixContent, scopeId);
out.push('.', ComponentStylesPrefixContent, scopeId);
DEBUG && console.log('INSERT', out.join(''));
}
function lookAhead(arc: StateArc): boolean {
Expand Down Expand Up @@ -155,8 +147,8 @@ export function scopeStylesheet(css: string, scopeId: string): string {
return false;
}

function isInGlobal(): boolean {
return stack.indexOf(MODE.pseudoGlobal) !== -1;
function shouldNotInsertScoping(): boolean {
return stack.indexOf(MODE.pseudoGlobal) !== -1 || stack.indexOf(MODE.atRuleSelector) !== -1;
}
}

Expand Down Expand Up @@ -212,10 +204,8 @@ function modeToString(mode: MODE): string {
'stringSingle',
'stringDouble',
'commentMultiline',
'animation',
'EXIT',
'EXIT_INSERT_SCOPE',
'MARK_INSERT_LOCATION',
][mode];
}

Expand All @@ -241,11 +231,9 @@ const enum MODE {
stringSingle, // 'text'
stringDouble, // 'text'
commentMultiline, // /* ... */
animation,
// NOT REAL MODES
EXIT, // Exit the mode
EXIT_INSERT_SCOPE, // Exit the mode INSERT SCOPE
MARK_INSERT_LOCATION, // Possible place to insert scope selector
}

const enum CHAR {
Expand Down Expand Up @@ -410,7 +398,6 @@ const STATE_MACHINE: StateArc[][] = [
[CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT],
[CHAR.ANY, CHAR.OPEN_BRACE, MODE.body],
[CHAR.ANY, CHAR.OPEN_PARENTHESIS, MODE.inertParenthesis],
[CHAR.ANY, CHAR.a, MODE.animation, 'nimation-name:', 'nimation:'],
...STRINGS_COMMENTS,
],
[
Expand All @@ -425,11 +412,4 @@ const STATE_MACHINE: StateArc[][] = [
/// commentMultiline
[CHAR.STAR, CHAR.FORWARD_SLASH, MODE.EXIT],
],
[
/// animation
[CHAR.IDENT, CHAR.NOT_IDENT, MODE.MARK_INSERT_LOCATION],
[CHAR.ANY, CHAR.SEMICOLON, MODE.EXIT_INSERT_SCOPE],
[CHAR.ANY, CHAR.CLOSE_BRACE, MODE.EXIT_INSERT_SCOPE],
...STRINGS_COMMENTS,
],
];
8 changes: 4 additions & 4 deletions packages/qwik/src/core/style/scoped-stylesheet.unit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,20 +111,20 @@ scopedStyles('complex properties', () => {
scopedStyles('@keyframe', () => {
equal(
scopeStylesheet('@keyframes slidein {from{b:c(0%);}to{b:c(0%);}}', '_'),
'@keyframes slidein-⭐️_ {from{b:c(0%);}to{b:c(0%);}}'
'@keyframes slidein {from{b:c(0%);}to{b:c(0%);}}'
);
equal(
scopeStylesheet('@-prefix-keyframes slidein {from{b:c(0%);}to{b:c(0%);}}', '_'),
'@-prefix-keyframes slidein-⭐️_ {from{b:c(0%);}to{b:c(0%);}}'
'@-prefix-keyframes slidein {from{b:c(0%);}to{b:c(0%);}}'
);
});

scopedStyles('animation-name', () => {
equal(scopeStylesheet('p{animation-name: x}', '_'), 'p.⭐️_{animation-name: x-⭐️_}');
equal(scopeStylesheet('p{animation-name: x}', '_'), 'p.⭐️_{animation-name: x}');
});

scopedStyles('animation', () => {
equal(scopeStylesheet('p{animation: a b c }', '_'), 'p.⭐️_{animation: a b c-⭐️_ }');
equal(scopeStylesheet('p{animation: a b c }', '_'), 'p.⭐️_{animation: a b c }');
});

scopedStyles('@font-face', () => {
Expand Down