Skip to content

Commit

Permalink
fix font bundling issue
Browse files Browse the repository at this point in the history
  • Loading branch information
moe-dev committed Dec 5, 2024
1 parent e7455df commit ed9a791
Show file tree
Hide file tree
Showing 8 changed files with 165 additions and 34 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"prettier": "^2.8.4",
"rimraf": "^3.0.2",
"rollup": "^4.22.4",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-node-externals": "^6.1.2",
"rollup-plugin-postcss": "^4.0.2",
"rollup-preserve-directives": "^1.1.2",
Expand Down
87 changes: 85 additions & 2 deletions packages/sdk-react/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,3 +1,86 @@
import rollup from '../../rollup.config.base.mjs';
import typescript from "@rollup/plugin-typescript";
import nodeExternals from "rollup-plugin-node-externals";
import path from "node:path";
import postcss from 'rollup-plugin-postcss';
import preserveDirectives from 'rollup-preserve-directives';
import url from '@rollup/plugin-url';
import alias from '@rollup/plugin-alias';
import copy from 'rollup-plugin-copy';

export default (options) => rollup();
const getFormatConfig = (format) => {
const pkgPath = path.join(process.cwd(), "package.json");
const __dirname = path.dirname(new URL(import.meta.url).pathname);

return {
input: 'src/index.ts',
output: {
format,
dir: "dist",
entryFileNames: `[name].${format === 'esm' ? 'mjs' : 'js'}`,
preserveModules: true,
sourcemap: true,
},
plugins: [
alias({
entries: [
{ find: 'assets', replacement: path.resolve(__dirname, 'src/assets') }
]
}),
postcss({
modules: true,
extensions: ['.css', '.scss'],
use: ['sass'],
extract: `styles.${format}.css`,
minimize: true,
sourceMap: true,
}),
typescript({
outputToFilesystem: true,
tsconfig: './tsconfig.json',
compilerOptions: {
outDir: "dist",
composite: false,
declaration: format === 'esm',
declarationMap: format === "esm",
sourceMap: true,
},
}),
preserveDirectives(),
nodeExternals({
packagePath: pkgPath,
builtinsPrefix: 'ignore',
}),
url({
include: [
'**/*.svg',
'**/*.png',
'**/*.jpg',
'**/*.gif',
'**/*.woff',
'**/*.woff2',
'**/*.ttf',
'**/*.eot'
],
limit: 8192,
emitFiles: true,
fileName: 'assets/fonts/[name].[hash][extname]',
}),
copy({
targets: [
{
src: path.resolve(__dirname, "src/assets/fonts/**/*"),
dest: path.resolve(__dirname, "dist/assets/fonts"),
},
],
verbose: false,
}),
],
};
};

export default () => {
const esm = getFormatConfig('esm');
const cjs = getFormatConfig('cjs');

return [esm, cjs];
};
Binary file not shown.
Binary file not shown.
Binary file not shown.
17 changes: 17 additions & 0 deletions packages/sdk-react/src/components/auth/theme.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
/* Define the font-face rules */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("./assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2");
}

:root {
/* Button Colors */
--button-bg: #ffffff; /* Default button background */
Expand Down
50 changes: 50 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 12 additions & 32 deletions rollup.config.base.mjs
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import typescript from "@rollup/plugin-typescript";
import nodeExternals from "rollup-plugin-node-externals";
import path from "node:path";
import postcss from 'rollup-plugin-postcss';
import preserveDirectives from 'rollup-preserve-directives';
import url from '@rollup/plugin-url';
import alias from '@rollup/plugin-alias';

const getFormatConfig = (format) => {
const pkgPath = path.join(process.cwd(), "package.json");
const __dirname = path.dirname(new URL(import.meta.url).pathname);

/** @type {import('rollup').RollupOptions} */
return {
input: 'src/index.ts',
output: {
Expand All @@ -20,22 +16,9 @@ const getFormatConfig = (format) => {
sourcemap: true,
},
plugins: [
alias({
entries: [
{ find: 'assets', replacement: path.resolve(__dirname, 'packages/sdk-react/src/assets') }
]
}),
postcss({
modules: true,
extensions: ['.css', '.scss'],
use: ['sass'],
extract: `styles.${format}.css`,
minimize: true,
sourceMap: true,
}),
typescript({
outputToFilesystem: true,
tsconfig: './tsconfig.json',
outputToFilesystem: false,
compilerOptions: {
outDir: "dist",
composite: false,
Expand All @@ -44,24 +27,21 @@ const getFormatConfig = (format) => {
sourceMap: true,
},
}),
preserveDirectives(),
nodeExternals({
packagePath: pkgPath,
builtinsPrefix: 'ignore',
}),
url({
include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif'],
limit: 8192,
emitFiles: true,
fileName: '[name].[hash][extname]',
}),
],
};
};
}
}

export default () => {

export default () => {
const esm = getFormatConfig('esm');
const cjs = getFormatConfig('cjs');

return [esm, cjs];
};

return [
esm,
cjs
]
}

0 comments on commit ed9a791

Please sign in to comment.