Skip to content

🖍 ✨ bento npm components: distribute css file#35446

Merged
samouri merged 12 commits intoampproject:mainfrom
samouri:css-npm
Aug 11, 2021
Merged

🖍 ✨ bento npm components: distribute css file#35446
samouri merged 12 commits intoampproject:mainfrom
samouri:css-npm

Conversation

@samouri
Copy link
Copy Markdown
Member

@samouri samouri commented Jul 28, 2021

summary
Addresses: #35413 (comment)

Distributes CSS files for bento components with the name extension.css. For example, the amp-fit-text bento component will distribute amp-fit-text.css.

This change works via a new function buildNpmCss which calls babel with the jss plugin on the specific .jss.js file needed. It uses the option object {css: 'REPLACED_BY_BABEL'} which is then replaced by babel during its transform. Results are stored in a new TransformCache.

questions

  • /to @caroqliu: Can we continue to assume 1 JSS file per component? Do we need to support multiple? If so, should we concat all their results into a single file?
  • Should I reuse the css-cache TransformCache or make a new one? They should never have hash collisions.
  • Should css builds happen for both amp build or just amp dist?

@samouri samouri requested review from jridgewell and rsimha August 5, 2021 20:57
@samouri samouri marked this pull request as ready for review August 6, 2021 15:05
@amp-owners-bot
Copy link
Copy Markdown

amp-owners-bot bot commented Aug 6, 2021

Hey @erwinmombay, @jridgewell! These files were changed:

build-system/babel-plugins/babel-plugin-transform-jss/index.js

Hey @rsimha! These files were changed:

build-system/common/transform-cache.js

@caroqliu
Copy link
Copy Markdown
Contributor

caroqliu commented Aug 6, 2021

  • Can we continue to assume 1 JSS file per component? Do we need to support multiple? If so, should we concat all their results into a single file?

Two components have multiple JSS files:

  • InlineGallery separately styles the Pagination component because that may not always be used.
  • amp-video has a separate autoplay.jss.js. Note also that VideoWrapper/VideoIframe are not being released on npm currently.

I'd recommend we concat into a single file for the sake of simplicity and given neither of the additional style files are particularly large even if we do end up publishing the videos.

As a naming nit, WDYT about styles.css or component.css as opposed to amp-*.css, given these are Preact components and not custom elements?

@samouri
Copy link
Copy Markdown
Member Author

samouri commented Aug 6, 2021

  • Can we continue to assume 1 JSS file per component? Do we need to support multiple? If so, should we concat all their results into a single file?

Two components have multiple JSS files:

  • InlineGallery separately styles the Pagination component because that may not always be used.
  • amp-video has a separate autoplay.jss.js. Note also that VideoWrapper/VideoIframe are not being released on npm currently.

I'd recommend we concat into a single file for the sake of simplicity and given neither of the additional style files are particularly large even if we do end up publishing the videos.

As a naming nit, WDYT about styles.css or component.css as opposed to amp-*.css, given these are Preact components and not custom elements?

Thanks for the info. I've implemented concatting the JSS files, as well as renamed the file to styles.css

Copy link
Copy Markdown
Contributor

@rsimha rsimha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super, thanks for the fixes!

@samouri samouri merged commit 7275385 into ampproject:main Aug 11, 2021
@samouri samouri deleted the css-npm branch August 11, 2021 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants