Stop embedding the Inter font and publish CommonJS packages again (#48)

Co-authored-by: Germain <[email protected]>

.storybook/preview.ts

@@ -1,5 +1,9 @@
 import { withThemeByClassName } from "@storybook/addon-styling";
 
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
 import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
 import "../src/styles/global.css";
 

package.json

@@ -3,15 +3,17 @@
   "version": "0.1.0",
   "description": "Compound components for the Web",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./dist/compound-web.cjs",
+  "module": "./dist/compound-web.js",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
+      "require": "./dist/compound-web.cjs",
+      "import": "./dist/compound-web.js",
       "types": "./dist/index.d.ts"
     },
-    "./dist/index.css": {
-      "import": "./dist/index.css"
+    "./dist/style.css": {
+      "require": "./dist/style.css",
+      "import": "./dist/style.css"
     }
   },
   "types": "./dist/index.d.ts",
@@ -51,6 +53,7 @@
     "@babel/core": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
+    "@fontsource/inter": "^5.0.5",
     "@percy/cli": "^1.26.2",
     "@percy/storybook": "^4.3.6",
     "@storybook/addon-actions": "7.0.27",
@@ -72,6 +75,7 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
+    "@vector-im/compound-design-tokens": "0.0.3",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "babel-loader": "^9.1.3",
@@ -98,13 +102,14 @@
   },
   "dependencies": {
     "@radix-ui/react-form": "^0.0.3",
-    "@vector-im/compound-design-tokens": "0.0.3",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
+    "@fontsource/inter": "^5",
     "@types/react": "*",
     "@types/react-dom": "*",
+    "@vector-im/compound-design-tokens": "^0.0.3",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },

src/styles/global.css

@@ -15,51 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* Inter unexpectedly contains various codepoints which collide with emoji, even
-   when variation-16 is applied to request the emoji variant.  From eyeballing
-   the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
-   Therefore we define a unicode-range to load which excludes the glyphs
-   (to avoid having to maintain a fork of Inter). */
 :root {
-  /* This is a false positive */
-  /* stylelint-disable unit-no-unknown */
-  --cpd-inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
-    U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
   --cpd-radius-pill-effect: 9999px;
 }
 
-@font-face {
-  font-family: Inter;
-  font-weight: 400;
-  unicode-range: var(--cpd-inter-unicode-range);
-  src: url("../res/fonts/Inter/Inter-Regular.woff2") format("woff2"),
-    url("../res/fonts/Inter/Inter-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: Inter;
-  font-weight: 500;
-  unicode-range: var(--cpd-inter-unicode-range);
-  src: url("../res/fonts/Inter/Inter-Medium.woff2") format("woff2"),
-    url("../res/fonts/Inter/Inter-Medium.woff") format("woff");
-}
-
-@font-face {
-  font-family: Inter;
-  font-weight: 600;
-  unicode-range: var(--cpd-inter-unicode-range);
-  src: url("../res/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
-    url("../res/fonts/Inter/Inter-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: Inter;
-  font-weight: 700;
-  unicode-range: var(--cpd-inter-unicode-range);
-  src: url("../res/fonts/Inter/Inter-Bold.woff2") format("woff2"),
-    url("../res/fonts/Inter/Inter-Bold.woff") format("woff");
-}
-
 html,
 body,
 input {

vite.config.ts

@@ -7,8 +7,14 @@ import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
   build: {
+    lib: {
+      entry: resolve(__dirname, "./src/index.ts"),
+      name: "CompoundWeb",
+      fileName: "compound-web",
+      formats: ["es", "cjs"],
+    },
+
     target: browserslistToEsbuild(),
-    assetsInlineLimit: 0, // To disable assets inlining as base64 in the bundle
 
     // We expect to be used as a dependency with a bundler, so we don't need to
     // minify and let the bundler deal with the sourcemaps
@@ -17,11 +23,6 @@ export default defineConfig({
     cssMinify: false,
 
     rollupOptions: {
-      // We are *not* running in library mode because inlines all the assets.
-      // Instead, we're running in normal mode & specifying the entrypoint here.
-      // See: https://github.com/vitejs/vite/issues/3295
-      input: [resolve(__dirname, "./src/index.ts")],
-
       // Must be in sync with the list of dependencies in the package.json
       // It includes all dependencies except @vector-im/compound-design-tokens
       external: [
@@ -35,13 +36,6 @@ export default defineConfig({
 
       // Without this, none of the exports are preserved in the bundle
       preserveEntrySignatures: "strict",
-
-      output: {
-        format: "es",
-        // This keeps a flat structure in the output directory
-        entryFileNames: "[name].js",
-        assetFileNames: "[name][extname]",
-      },
     },
   },
 

yarn.lock

@@ -1498,6 +1498,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
   integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
+"@fontsource/inter@^5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.0.5.tgz#bd3e923660cc4632d09b1882d104b0cb9430dec6"
+  integrity sha512-RE1JmWRB6Kxo+1nXUnORSSH5uKgUZ2QEQE+h/nsNt758C+17G9y26E9QiAsIqsG13NpKhwn22EeECfyC+da5ew==
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"