Skip to content

add pure ignore comment for CSS Modules #80

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 3 commits into from
Nov 5, 2024
Merged

add pure ignore comment for CSS Modules #80

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
90c16fe
add pure ignore comment for css modules
jantimon Oct 31, 2024
73e1c62
remove comments
jantimon Nov 1, 2024
971abcd
refactor: logic
alexander-akait Nov 5, 2024
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
Prev Previous commit
Next Next commit
remove comments
  • Loading branch information
@jantimon
jantimon committed Nov 2, 2024
commit 73e1c624313a711394bf35c227841d7eb44d95f9
32 changes: 18 additions & 14 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,18 @@ const IGNORE_MARKER = "cssmodules-pure-ignore";

const isSpacing = (node) => node.type === "combinator" && node.value === " ";

function hasIgnoreComment(node) {
if (!node.parent) {
return false;
}
const indexInParent = node.parent.index(node);
function getIgnoreComment(node) {
const indexInParent = node.parent ? node.parent.index(node) : -1;
for (let i = indexInParent - 1; i >= 0; i--) {
const prevNode = node.parent.nodes[i];
if (prevNode.type === "comment") {
return prevNode.text.trimStart().startsWith(IGNORE_MARKER);
if (prevNode.text.trimStart().startsWith(IGNORE_MARKER)) {
return prevNode;
}
} else {
break;
}
}
return false;
}

function normalizeNodeArray(nodes) {
Expand Down Expand Up @@ -531,6 +529,7 @@ module.exports = (options = {}) => {
});

root.walkAtRules((atRule) => {
const ignoreComment = getIgnoreComment(atRule);
if (/keyframes$/i.test(atRule.name)) {
const globalMatch = /^\s*:global\s*\((.+)\)\s*$/.exec(
atRule.params
Expand All @@ -542,7 +541,7 @@ module.exports = (options = {}) => {
let globalKeyframes = globalMode;

if (globalMatch) {
if (pureMode && !hasIgnoreComment(atRule)) {
if (pureMode && !ignoreComment) {
throw atRule.error(
"@keyframes :global(...) is not allowed in pure mode"
);
Expand Down Expand Up @@ -582,11 +581,7 @@ module.exports = (options = {}) => {
context.options = options;
context.localAliasMap = localAliasMap;

if (
pureMode &&
context.hasPureGlobals &&
!hasIgnoreComment(atRule)
) {
if (pureMode && context.hasPureGlobals && ignoreComment) {
throw atRule.error(
'Selector in at-rule"' +
selector +
Expand Down Expand Up @@ -620,9 +615,14 @@ module.exports = (options = {}) => {
}
});
}

if (ignoreComment) {
ignoreComment.remove();
}
});

root.walkRules((rule) => {
const ignoreComment = getIgnoreComment(rule);
if (
rule.parent &&
rule.parent.type === "atrule" &&
Expand All @@ -637,7 +637,7 @@ module.exports = (options = {}) => {
context.options = options;
context.localAliasMap = localAliasMap;

if (pureMode && context.hasPureGlobals && !hasIgnoreComment(rule)) {
if (pureMode && context.hasPureGlobals && !ignoreComment) {
throw rule.error(
'Selector "' +
rule.selector +
Expand All @@ -654,6 +654,10 @@ module.exports = (options = {}) => {
localizeDeclaration(declaration, context)
);
}

if (ignoreComment) {
ignoreComment.remove();
}
});
},
};
Expand Down
37 changes: 17 additions & 20 deletions test/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -949,16 +949,23 @@ const tests = [
options: { mode: "pure" },
input: `/* cssmodules-pure-ignore */
:global(.foo) { color: blue; }`,
expected: `/* cssmodules-pure-ignore */
expected: `.foo { color: blue; }`,
},
{
name: "should suppress errors for global selectors after ignore comment #2",
options: { mode: "pure" },
input: `/* cssmodules-pure-ignore */
/* another comment */
:global(.foo) { color: blue; }`,
expected: `/* another comment */
.foo { color: blue; }`,
},
{
name: "should allow additional text in ignore comment",
options: { mode: "pure" },
input: `/* cssmodules-pure-ignore - needed for third party integration */
:global(#foo) { color: blue; }`,
expected: `/* cssmodules-pure-ignore - needed for third party integration */
#foo { color: blue; }`,
expected: `#foo { color: blue; }`,
},
{
name: "should not affect rules after the ignored block",
Expand All @@ -985,9 +992,7 @@ const tests = [
/* cssmodules-pure-ignore */
:global(.bar) { color: blue; }
}`,
expected: `/* cssmodules-pure-ignore */
.foo {
/* cssmodules-pure-ignore */
expected: `.foo {
.bar { color: blue; }
}`,
},
Expand All @@ -998,8 +1003,7 @@ const tests = [
::view-transition-group(modal) {
animation-duration: 300ms;
}`,
expected: `/* cssmodules-pure-ignore */
::view-transition-group(modal) {
expected: `::view-transition-group(modal) {
animation-duration: 300ms;
}`,
},
Expand All @@ -1011,8 +1015,7 @@ const tests = [
from { opacity: 1; }
to { opacity: 0; }
}`,
expected: `/* cssmodules-pure-ignore */
@keyframes fadeOut {
expected: `@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}`,
Expand All @@ -1025,7 +1028,6 @@ const tests = [
:global(.foo) { color: blue; }
}`,
expected: `@media (min-width: 768px) {
/* cssmodules-pure-ignore */
.foo { color: blue; }
}`,
},
Expand All @@ -1037,10 +1039,8 @@ const tests = [
.local { color: green; }
/* cssmodules-pure-ignore */
:global(.bar) { color: red; }`,
expected: `/* cssmodules-pure-ignore */
.foo { color: blue; }
expected: `.foo { color: blue; }
:local(.local) { color: green; }
/* cssmodules-pure-ignore */
.bar { color: red; }`,
},
{
Expand All @@ -1050,8 +1050,7 @@ const tests = [
:global(.foo):hover > :global(.bar) + :global(.baz) {
color: blue;
}`,
expected: `/* cssmodules-pure-ignore */
.foo:hover > .bar + .baz {
expected: `.foo:hover > .bar + .baz {
color: blue;
}`,
},
Expand All @@ -1064,8 +1063,7 @@ const tests = [
:global(.baz) {
color: blue;
}`,
expected: `/* cssmodules-pure-ignore */
.foo,
expected: `.foo,
.bar,
.baz {
color: blue;
Expand All @@ -1079,8 +1077,7 @@ const tests = [
:global(.foo)::after {
content: '';
}`,
expected: `/* cssmodules-pure-ignore */
.foo::before,
expected: `.foo::before,
.foo::after {
content: '';
}`,
Expand Down
Loading