Bento: Components missing CSS

[swissspidy]

Description

When importing a React component such as @ampproject/amp-base-carousel, there seems to be no way to get the component's CSS as originally defined in component.jss.js.

So while I get a nicely styled component when using the <amp-base-carousel> custom element, in React I get a completely unstyled carousel with class names generated by JSS, but no actual styles for them.

And amp-base-carousel.css only contains pre-upgrade styles, so that doesn't help either.

How do I get the CSS?

Reproduction Steps

I am basically doing this:

import { BaseCarousel } from '@ampproject/amp-base-carousel/react';

function SomeComponent() {
	  return (
		    <BaseCarousel
		    autoAdvance={ true }
		    loop={ true }
		    snap={ true }
		    >
	  );
}

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2107092322000

[samouri]

I believe we have two options (pertinent design doc):

1. disable the transform babel-plugin-transform-jss for npm builds, so that the jss hooks stay in place. This requires the bundle contains the jss package.
2. keep the transform enabled, but start distributing the associated CSS files. In this case, the pubs need to include the CSS on the page manually, but jss does not need to be part of the bundle

[swissspidy]

From a developer perspective I'd prefer (2) just so I have more flexibility with how the CSS is being added to the page.

[kristoferbaxter]

I'd also push toward 2 for the same reason.

[caroqliu]

Fixed by #35446