fix: strip @layer properties block to prevent host page CSS pollution

[mariusbolik]

Problem

surveys.umd.cjs injects a <style id="formbricks__css"> tag into document.head. That tag contains two sections:

1. Correctly scoped — Tailwind preflight reset under #fbjs * selectors. ✅
2. Globally polluting — A @layer properties block with bare *, :before, :after, ::backdrop selectors. ❌

/* This part leaks out of #fbjs and resets ALL elements on the host page */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
            ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-ring-shadow: 0 0 #0000;
      --tw-ring-offset-width: 0px;
      --tw-border-style: solid;
      /* ~25 more --tw-* properties... */
    }
  }
}

Why it can't be scoped: CSS @layer at-rules are globally scoped by the CSS specification — they cannot be confined by a surrounding selector. This is a spec constraint, not a browser quirk.

Effect: Any host site using Tailwind CSS v4 will have its --tw-* custom properties reset to initial / zero on every element the moment a Formbricks survey initializes. This breaks shadow-*, ring-*, rotate-*, translate-*, and other utilities across the entire page — not just inside the survey widget.

Reported in: formbricks/js#46

Fix

Add a small PostCSS plugin in packages/surveys/postcss.config.cjs that removes any @layer properties { ... } block from the compiled CSS output:

const stripLayerProperties = () => ({
  postcssPlugin: "postcss-strip-layer-properties",
  AtRule: {
    layer: (atRule) => {
      if (atRule.params === "properties") atRule.remove();
    },
  },
});
stripLayerProperties.postcss = true;

The @property declarations already emitted earlier in the same stylesheet serve the same browser-compatibility purpose for all supporting browsers. Removing @layer properties does not affect survey rendering in any browser.

Testing

• Build packages/surveys and confirm @layer properties is absent from dist/index.umd.cjs.
• Load the SDK on a Tailwind v4 page, trigger a survey, and verify that host page shadows/rings/transforms are unaffected.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Walkthrough

This change updates the PostCSS configuration for the surveys package. The REM_REGEX pattern was modified to use control-character-based boundaries instead of word-boundaries. A new PostCSS plugin called stripLayerProperties was created to intercept and remove @layer properties at-rules. This plugin was then registered in the plugins array, added after the remtoEm() function.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description provides comprehensive problem context, technical explanation, fix details, and testing steps, but the PR template's checklist sections are not filled out.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The PR title clearly and concisely describes the main change: removing the @layer properties block to prevent CSS pollution on the host page, which is the primary objective of this changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/surveys/postcss.config.cjs`:
- Line 57: Add the same postcss marker to remtoEm for consistency: after the
existing stripLayerProperties.postcss = true assignment, set remtoEm.postcss =
true so both plugins (remtoEm and stripLayerProperties) clearly declare
postcss=true; locate the remtoEm variable/assignment in the file and add the
marker there.
- Around line 45-56: The AtRule handler in stripLayerProperties currently
compares atRule.params directly which can fail with surrounding whitespace;
change the check in the layer handler to normalize params (e.g., use
atRule.params.trim()) before comparing to "properties" so that the plugin
reliably removes `@layer` properties even if params include unexpected whitespace;
update the condition inside stripLayerProperties -> AtRule.layer (referencing
atRule and atRule.params) accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: f169f4de-037d-411a-9c75-fd3e0f09e6c1

📥 Commits

Reviewing files that changed from the base of the PR and between 87bcad2 and 8bf7fe9.

📒 Files selected for processing (1)

• packages/surveys/postcss.config.cjs

[jobenjada]

hey @mariusbolik thanks for this, we'll look into it. In the meantime, pls sign the CLA above

[Dhruwang]

Thanks for the fix, looks good 🚀

[mariusbolik]

Can you tell me when this will be live on the hosted version of Formbricks, @Dhruwang?

[mariusbolik]

The problem still occurs in the hosted version. When will it be fixed?