style: address transform minification warnings

[pixelflips]

Description

Fix CSS nesting warnings that appear when running Storybook. The [data-theme="dark"] & nesting syntax requires the :is() pseudo-class transformation, which is not supported in the configured target browsers (chrome87, edge88, firefox78, safari14).

Screenshot

Fixes DSS-40

Updated selectors to use compatible patterns:

• Web components: Use :host-context([data-theme="dark"]) & (consistent with existing patterns)
• Doc components: Un-nest to flat selectors like [data-theme="dark"] .class

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• tested manually

1. Run storybook locally, verify warnings no longer appear.

Test Configuration:

• OS: macOS
• Browsers: Chrome

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	8f12b1a
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/694050af45a9430008d6415b
😎 Deploy Preview	https://deploy-preview-612--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pixelflips]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies dark-mode styling selectors across three component stylesheets. In pds-input.scss, the dark-theme selector is changed from a direct attribute check to a :host-context check for shadow DOM scoping. In docCanvas.css, dark-mode rules for action elements are converted to direct child selectors and CSS structure is corrected with closing braces. In docTokenTable.css, dark-mode styling is relocated from nested selectors to standalone rules. These changes affect how dark-theme styles are applied and scoped within their respective components.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: addressing CSS nesting warnings by refactoring selectors for browser compatibility.
Description check	✅ Passed	The description is comprehensive, including motivation, specific changes, issue reference, type of change, testing approach, and most checklist items completed.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch style/transform-warning-fix

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2effab4 and 8f12b1a.

📒 Files selected for processing (3)

• libs/core/src/components/pds-input/pds-input.scss (1 hunks)
• libs/doc-components/src/components/docCanvas/docCanvas.css (2 hunks)
• libs/doc-components/src/components/docTokenTable/docTokenTable.css (2 hunks)

🔇 Additional comments (4)

libs/core/src/components/pds-input/pds-input.scss (1)

260-262: ✓ Correct approach for shadow DOM dark-theme detection.

Using :host-context([data-theme="dark"]) & is the correct pattern for web components to detect dark-theme context from the light DOM. This avoids the :is() transformation that triggered the CSS nesting warning for the configured target browsers (all of which support :host-context() — Chrome 51+, Firefox 63+, Safari 10.1+, Edge 79+).

Please verify that the SCSS compiler generates the expected final selectors for these nested :host-context() rules. Run a build and inspect the generated CSS to confirm the selectors compile correctly (e.g., something like :host-context([data-theme="dark"]) .has-error .pds-input__field:hover:not(:disabled)).

Also applies to: 288-290

libs/doc-components/src/components/docTokenTable/docTokenTable.css (1)

33-37: ✓ Proper un-nesting with appropriate stylelint override.

Converting the dark-mode rule to a flat selector [data-theme="dark"] .doc-token-table tbody tr correctly resolves the CSS nesting warning. The !important flag ensures the dark background properly overrides the light-mode rule, and the stylelint disable comment is appropriately justified for this compound selector pattern.

libs/doc-components/src/components/docCanvas/docCanvas.css (2)

103-105: ✓ Proper un-nesting with correct specificity ordering.

The dark-mode selector [data-theme="dark"] .doc-canvas-action:hover has higher specificity (0, 3, 0) than the light-mode selector .doc-canvas-action:hover (0, 2, 0), ensuring the dark-mode color override is applied correctly.

---

152-154: ✓ Dark-mode toggle background properly un-nested.

The flat selector [data-theme="dark"] .doc-cavas-actions-toggle correctly overrides the light-mode background via cascade order (rule placement), with no need for !important flags.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}