Unable to import named cqfill function export

[JoshuaCWebDeveloper]

The docs indicate that I should be able to manually apply the polyfill to a shadow root by importing a named export function called cqfill:

import { cqfill } from 'cqfill'

cqfill() /* cqfill(document); cqfill(shadowRoot) */

However, when I attempted to do this, Webpack gave me an error saying that cqfill had no exports. I ended up having to do the following in order to import the cqfill function:

import { cqfill } from 'node_modules/cqfill/export/cqfill.cjs'

cqfill(shadowRoot)

I ended up using another library that worked with styled-components but wanted to post this issue here in case it affects others as well. :)

[maac4422]

@JoshuaCWebDeveloper which library did you used that support styled-components?

[JoshuaCWebDeveloper]

@JoshuaCWebDeveloper which library did you used that support styled-components?

I've still been using styled-container-query (example: https://github.com/samizdapp/athena/blob/07870857fae824634495a7a100f1fd052541f67f/packages/gateway-client/src/app/components/status-dashboard/box-status/box-status.tsx#L265), but it comes with some gotchas, so check out the docs on their repo.

Also check on the status of the official CSS Container Queries standard that is in the works.