Implement universal selector handling in getStyle by Iyeroo · Pull Request #561 · freeCodeCamp/curriculum-helpers

Iyeroo · 2026-01-31T20:52:50Z

fix(curriculum):Add a private method to check for universal selectors and update getStyle to handle them correctly.

Checklist:

[ x ] I have read freeCodeCamp's contribution guidelines.
[ x ] My pull request has a descriptive title (not a vague title like Update index.md)

This pull request addresses an issue in the CSSHelp class where CSS rules containing universal selectors (*) were being matched even when the user did not explicitly request them.

Changes made:

Added a private method selectorHasUniversal(selector: string): boolean in the CSSHelp class.
- This method detects whether a selector includes a universal selector (*).
Updated the getStyle(selector: string) method to correctly handle universal selectors:
- If a CSS rule contains a universal selector but the requested selector does not, that rule will no longer be matched.
- Preserves the existing functionality for rules without universal selectors.
- The getPropVal helper remains unchanged for retrieving CSS property values, with optional whitespace stripping.

Why this is important:

Previously, rules like span[class~="one"] *:first-of-type would match selectors such as span.one div:first-of-type even if the universal selector (*) was not requested. This could cause false positives in challenges checking for allowed selectors.

With this fix:

Only explicitly requested universal selectors are matched.
Challenge validation behaves correctly.
Prevents unintentional matching of * rules.

Add a private method to check for universal selectors and update getStyle to handle them correctly.

majestic-owl448 · 2026-02-01T08:46:50Z

is there a reason why you have both this and #562 ?

the tests should go in the same PR so that everything can be tested together

Iyeroo · 2026-02-01T09:31:19Z

is there a reason why you have both this and #562 ?

the tests should go in the same PR so that everything can be tested together

Hello Maintainers,
I have merged #562 into #561 I apologise for the mistake I made waiting for review

Added tests for the universal selector functionality in CSSHelp, including mock document setup and validation of styles.

majestic-owl448 · 2026-02-01T09:59:04Z

your changes do not pass the tests, please test locally and make sure to solve the issues

Iyeroo · 2026-02-02T19:27:01Z

Hello Maintainers,
How to run the tests locally so that it can ensure all tests pass apart from test in watch mode,Lint tests

majestic-owl448 · 2026-02-03T09:03:03Z

you can always find the scripts available in the package.json file

curriculum-helpers/package.json

Line 85 in 111f791

"scripts": {

Iyeroo · 2026-02-03T11:35:06Z

Hello maintainers,
Please check I have run the tests locally hope it has been resolved waiting for review

majestic-owl448

the tests for the helper are in https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/css-helper.test.ts, add it there, do not create a new file

you can add css to test to https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/__fixtures__/curriculum-helper-css.ts like the other tests are doing

Iyeroo · 2026-02-03T12:36:21Z

the tests for the helper are in https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/css-helper.test.ts, add it there, do not create a new file

you can add css to test to https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/__fixtures__/curriculum-helper-css.ts like the other tests are doing

ok thankyou for correcting me I will fix the structure and revert

…lper-css.test.tsx

Iyeroo · 2026-02-04T16:47:06Z

the tests for the helper are in https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/css-helper.test.ts, add it there, do not create a new file

you can add css to test to https://github.com/freeCodeCamp/curriculum-helpers/blob/main/packages/tests/__fixtures__/curriculum-helper-css.ts like the other tests are doing

Hello maintainer,
I moved file to its expected place have a check waiting for review

majestic-owl448

please make sure to test all the cases:

want universal selector, universal selector in css
want universal selector, universal selector not in css
don't want universal selector, universal selector in css
don't want universal selector, universal selector not in css

you can add new strings to packages/tests/fixtures/curriculum-helper-css.ts if you need for tests

majestic-owl448 · 2026-02-05T08:17:20Z

packages/tests/curriculum-helper.test.tsx

 import * as helper from "./../helpers/lib/index";
+import { CSSHelp } from "./../helpers/lib/index";


it is not necessary to add the new import, the first one is importing everything fron the same file

majestic-owl448 · 2026-02-05T08:17:36Z

packages/tests/curriculum-helper.test.tsx

 import cssTestValues from "./__fixtures__/curriculum-helper-css";
+import { cssString } from "./__fixtures__/curriculum-helper-css";


not necessary to add the second import, it's already included in the first one

I revised it

majestic-owl448 · 2026-02-05T08:21:03Z

packages/tests/universal-selector.test.ts

this file should be removed please, fold everything in the already existing test file

It is been removed

majestic-owl448 · 2026-02-05T08:22:06Z

packages/tests/__fixtures__/curriculum-helper-css.ts

+}
+  span[class~="one"] *:first-of-type {
+  background-image: linear-gradient(#f93, #f93);
+  border-color: #d61;
 }


please do not change the current existing strings, the current tests are based on these and changing them could interfere, if you need new css, create a new string

Thankyou for correcting me I will ensure I follow each command.I appreciate the community support

please do not change the current existing strings, the current tests are based on these and changing them could interfere, if you need new css, create a new string
I added new strings without modifying existing ones

the change to the existing string is still here

have a check I fixed

…-helpers into Iyeroo-patch-2 Merge upstream updates and add full test coverage for universal selector handling

Iyeroo · 2026-02-06T16:40:00Z

please make sure to test all the cases:

want universal selector, universal selector in css

want universal selector, universal selector not in css

don't want universal selector, universal selector in css

don't want universal selector, universal selector not in css

you can add new strings to packages/tests/fixtures/curriculum-helper-css.ts if you need for tests

Thanks for the feedback!
I’ve updated the tests to cover all universal selector combinations and added fixtures to keep things clear and reusable. I’ve also adjusted the exports so CSSHelp is accessible as expected.

Please let me know if there’s anything else you’d like me to refine.

majestic-owl448 · 2026-02-06T18:03:00Z

packages/tests/curriculum-helper.test.tsx

+const {
+  cssFullExample,
+  cssCodeWithCommentsRemoved,
+  cssWithUniversal,
+  cssWithoutUniversal,
+} = cssTestValues;


you have these but you are not using these, or you use them or you don't import them

majestic-owl448 · 2026-02-06T18:03:50Z

packages/tests/curriculum-helper.test.tsx

+    styleEl.textContent = `
+      span[class~="one"] *:first-of-type {
+        border-color: #d61;
+      }
+    `;


why do this when you have create the strings in the fixtures file?

majestic-owl448 · 2026-02-06T18:04:36Z

packages/tests/curriculum-helper.test.tsx

+    styleEl.textContent = `
+      span[class~="one"] > p:first-of-type {
+        color: red;
+      }
+    `;


again, you are importing strings from the fixtures files, so why not use them? instead you are creating this.

I will not add more comments but it's the same below

Thanks for pointing that out — you’re absolutely right.

I’ve updated the tests to exclusively use the shared fixture strings and removed all inline CSS definitions.

Appreciate your patience and the guidance.

majestic-owl448

why have you chosen file packages/tests/curriculum-helper.test.tsx to write the tests when there is packages/tests/css-helper.test.ts?

Iyeroo · 2026-02-06T18:38:02Z

why have you chosen file packages/tests/curriculum-helper.test.tsx to write the tests when there is packages/tests/css-helper.test.ts?

I’ve also moved the tests to packages/tests/css-helper.test.ts so they live alongside the existing CSSHelp tests.
Appreciate your patience and the guidance.

Iyeroo · 2026-02-06T18:38:14Z

Hi @majestic-owl448, just checking in to see if anything else is needed from my side. Thanks!
have a check

Implement universal selector handling in getStyle

0760191

Add a private method to check for universal selectors and update getStyle to handle them correctly.

Iyeroo requested a review from a team as a code owner January 31, 2026 20:52

majestic-owl448 mentioned this pull request Feb 1, 2026

fix(curriculum):Add tests for universal selector in CSSHelp #562

Closed

2 tasks

Implement tests for universal selector in CSSHelp

0284bd9

Added tests for the universal selector functionality in CSSHelp, including mock document setup and validation of styles.

test issue resolved

17d935e

majestic-owl448 reviewed Feb 3, 2026

View reviewed changes

test included in curriculum-helper.test.tsx with css in curriculum-he…

02d59cd

…lper-css.test.tsx

majestic-owl448 reviewed Feb 5, 2026

View reviewed changes

Iyeroo and others added 3 commits February 6, 2026 21:22

Delete packages/tests/universal-selector.test.ts

d7fd709

test(css-help): add fixtures and cover universal selector edge cases

044a0e9

Merge branch 'Iyeroo-patch-2' of https://github.com/Iyeroo/curriculum…

1e1aab9

…-helpers into Iyeroo-patch-2 Merge upstream updates and add full test coverage for universal selector handling

the change in existing string removed

efcdc21

majestic-owl448 reviewed Feb 6, 2026

View reviewed changes

test(css-help): use fixtures and cover all universal selector cases

f55e3ae

		import * as helper from "./../helpers/lib/index";
		import { CSSHelp } from "./../helpers/lib/index";

		import cssTestValues from "./__fixtures__/curriculum-helper-css";
		import { cssString } from "./__fixtures__/curriculum-helper-css";

Uh oh!

Comments

Conversation

Iyeroo commented Jan 31, 2026 • edited by majestic-owl448 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes made:

Why this is important:

Uh oh!

majestic-owl448 commented Feb 1, 2026

Uh oh!

Iyeroo commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

majestic-owl448 commented Feb 1, 2026

Uh oh!

Iyeroo commented Feb 2, 2026

Uh oh!

majestic-owl448 commented Feb 3, 2026

Uh oh!

Iyeroo commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

majestic-owl448 left a comment

Choose a reason for hiding this comment

Uh oh!

Iyeroo commented Feb 3, 2026

Uh oh!

Iyeroo commented Feb 4, 2026

Uh oh!

majestic-owl448 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

majestic-owl448 Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Iyeroo commented Feb 6, 2026

Uh oh!

majestic-owl448 Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

majestic-owl448 left a comment

Choose a reason for hiding this comment

Uh oh!

Iyeroo commented Feb 6, 2026

Uh oh!

Iyeroo commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Iyeroo commented Jan 31, 2026 •

edited by majestic-owl448

Loading

Iyeroo commented Feb 1, 2026 •

edited

Loading

Iyeroo commented Feb 3, 2026 •

edited

Loading

majestic-owl448 Feb 5, 2026 •

edited

Loading

majestic-owl448 Feb 6, 2026 •

edited

Loading

Iyeroo commented Feb 6, 2026 •

edited

Loading