Version: 17.0.0 (also reproduced in 17.1.0-rc.1)
Severity: Build-blocking
Build tool: Webpack 5 (via NX)
Problem
index.css in the published package contains a @font-face declaration referencing ./fonts/SpaceGrotesk-Light.woff2, but that font file is not included in the npm package. Any project that imports the CSS (directly or transitively) gets a hard webpack build failure.
Steps to Reproduce
- Install
@tedi-design-system/react@17.0.0
- Import
@tedi-design-system/react/index.css in a webpack project (e.g. via styles.css)
- Run the webpack build
Error
ERROR in ./src/styles.css
Module Error (from postcss-loader):
/path/to/node_modules/@tedi-design-system/react/index.css:16203:12:
Can't resolve '/path/to/node_modules/@tedi-design-system/react/fonts/SpaceGrotesk-Light.woff2'
in '/path/to/node_modules/@tedi-design-system/react'
Root Cause
index.css contains the following @font-face declaration:
@font-face {
font-family: Space Grotesk;
font-style: normal;
font-weight: 300;
src: url(./fonts/SpaceGrotesk-Light.woff2) format("woff2");
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
The fonts/ directory in the published package contains only Roboto and Material Symbols fonts — SpaceGrotesk-Light.woff2 is absent.
Expected Behavior
The package should either:
- Include
SpaceGrotesk-Light.woff2 in the fonts/ directory, or
- Not reference a font file that is not shipped with the package
Workaround
Until a fixed release is available, the build can be unblocked by manually placing a copy of SpaceGrotesk-Light.woff2 into node_modules/@tedi-design-system/react/fonts/. This can be automated with a postinstall script, but is not a production-ready fix.
Version:
17.0.0(also reproduced in17.1.0-rc.1)Severity: Build-blocking
Build tool: Webpack 5 (via NX)
Problem
index.cssin the published package contains a@font-facedeclaration referencing./fonts/SpaceGrotesk-Light.woff2, but that font file is not included in the npm package. Any project that imports the CSS (directly or transitively) gets a hard webpack build failure.Steps to Reproduce
@tedi-design-system/react@17.0.0@tedi-design-system/react/index.cssin a webpack project (e.g. viastyles.css)Error
Root Cause
index.csscontains the following@font-facedeclaration:The
fonts/directory in the published package contains only Roboto and Material Symbols fonts —SpaceGrotesk-Light.woff2is absent.Expected Behavior
The package should either:
SpaceGrotesk-Light.woff2in thefonts/directory, orWorkaround
Until a fixed release is available, the build can be unblocked by manually placing a copy of
SpaceGrotesk-Light.woff2intonode_modules/@tedi-design-system/react/fonts/. This can be automated with apostinstallscript, but is not a production-ready fix.