search

jsxtools / cqfill

Polyfill for CSS Container Queries
402 stars 4 forks source link

Unable to import named `cqfill` function export #15

Open JoshuaCWebDeveloper opened 2 years ago

JoshuaCWebDeveloper commented 2 years ago

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 commented 1 year ago

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

JoshuaCWebDeveloper commented 1 year ago

@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.