Andarist / Andarist/stylis-plugin-extra-scope

why first selector was modified?

Open
#16 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
23
Forks
14
PR merge metrics
No merged PRs in 30d

Description

Work with styled-component v5, and I found that first selector will be modified, and this made the whole page's style broken.

image

Here is my test code

```js
export function addCssScope(scopes: string[]) {
// FORM:
// https://github.com/Andarist/stylis-plugin-extra-scope/blob/master/src/index.js
const extraScopePlugin: StylisPlugin = (context, content, selectors) => {
if (context === -2) {
console.log('[selectors]', selectors);
console.log('[content] ', content);
console.log('\n\n');
return;
}

if (context !== -1) {
return;
}

console.log('[before] selectors', selectors);

const selector = selectors[0];
selectors[0] = `.${scopes[0]} ${selector}`;

for (let i = 1; i < scopes.length; i++) {
selectors.push(`.${scopes[i]} ${selector}`);
}

console.log('[after] selectors', selectors);
};

Object.defineProperty(extraScopePlugin, 'name', {
value: 'addCssScopePlugin',
});

return extraScopePlugin;
}

// .......

```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.