How to transpile web components coded typescript and scss to javascript and css in Material You (Material Design 3)

Question

Material Web with Material Design 2, I could use web components like mwc-button, by importing module from unpkg or transpiling (or bundling) to a JavaScript file (ex. mwc-bundle-button.js) from the NPM package.

<script defer
        type="module"
        src='https://unpkg.com/@@material/mwc-button?module'>
</script>
or
<script defer
        type="module"
        src='../(path)/web-components/mwc-bundle-button.js'>
</script>

<mwc-button label="button label"></mwc-button>

Material Web with Material You (Material Design 3), there are still no NPM package (@material/web) at 2022/06/29.

I want to try some web components with Material You, but I do not know how to transpile the repository to JavaScript files.

I tried,

1. git clone Lit starter kit (maybe use Lit in material-web)
2. download the material-web repository in the [Lit starter kit]
3. build (maybe tsc) about icon.ts for transpiling to JavaScript files
4. rollup -c for bundle to one JavaScript file

Then, TS2307: Cannot find module './lib/icon-styles.css' or its corresponding type declarations. is occurred.

Is this the right direction? (Can I reach the goal by solving some errors?)

Or, Do I have a misunderstanding?

Answer 1

in 2022/8/31, there is the NPM package @material/web.

Then, I can use web components like <md-outlined-button>, by bundling (with rollup.js) to a JavaScript file (ex. bundle-md-outlined-button.js) from the NPM package.