Skip to content

Commit d9e475d

Browse files
Jokcydanilowoz
Jokcy
and
danilowoz
authored
fix: add new build for styleless (#798)
Co-authored-by: Danilo Woznica <[email protected]>
1 parent a15c559 commit d9e475d

File tree

14 files changed

+879
-66
lines changed

14 files changed

+879
-66
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,6 @@ dist
106106

107107
# Mac
108108
.DS_Store
109+
110+
# Vscode
111+
.vscode

‎examples/nextjs/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"noEmit": true,
1010
"esModuleInterop": true,
1111
"module": "esnext",
12-
"moduleResolution": "node",
12+
"moduleResolution": "node16",
1313
"resolveJsonModule": true,
1414
"isolatedModules": true,
1515
"jsx": "preserve",

‎examples/vite-react/App.jsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Sandpack } from "@codesandbox/sandpack-react";
2+
3+
const App = () => {
4+
return (
5+
<div>
6+
<Sandpack />
7+
<Sandpack theme="dark" />
8+
<Sandpack template="nextjs" />
9+
<Sandpack options={{ readOnly: true }} />
10+
</div>
11+
);
12+
};
13+
14+
export default App;

‎examples/vite-react/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/index.jsx"></script>
11+
</body>
12+
</html>

‎examples/vite-react/index.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
4+
import App from "./App";
5+
6+
const root = createRoot(document.getElementById("root"));
7+
root.render(
8+
<StrictMode>
9+
<App />
10+
</StrictMode>
11+
);

‎examples/vite-react/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"scripts": {
3+
"dev": "vite",
4+
"build": "vite build",
5+
"preview": "vite preview"
6+
},
7+
"dependencies": {
8+
"react": "^18.2.0",
9+
"react-dom": "^18.2.0"
10+
},
11+
"devDependencies": {
12+
"@vitejs/plugin-react": "3.1.0",
13+
"vite": "4.0.0",
14+
"esbuild-wasm": "0.15.12"
15+
}
16+
}

‎examples/vite-react/vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from "vite";
2+
import react from "@vitejs/plugin-react";
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [react()],
7+
});

‎sandpack-react/package.json

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,27 @@
99
},
1010
"license": "Apache-2.0",
1111
"author": "CodeSandbox",
12-
"main": "dist/cjs/index.js",
13-
"module": "dist/esm/index.js",
14-
"types": "dist/types/index.d.ts",
15-
"sideEffects": [
16-
"dist/index.css"
17-
],
12+
"main": "dist/index.js",
13+
"module": "dist/index.mjs",
14+
"types": "dist/index.d.ts",
15+
"exports": {
16+
"./unstyled": {
17+
"types": "./dist/unstyled/index.d.ts",
18+
"import": "./dist/unstyled/index.esm.js",
19+
"require": "./dist/unstyled/index.js"
20+
},
21+
".": {
22+
"types": "./dist/index.d.ts",
23+
"import": "./dist/index.esm.js",
24+
"require": "./dist/index.js"
25+
}
26+
},
1827
"scripts": {
1928
"clean": "rm -rf dist",
2029
"prebuild": "yarn run clean",
2130
"test": "TEST_ENV=true jest . --transformIgnorePatterns \"node_modules/(?!@codemirror)/\" --modulePathIgnorePatterns \"e2e\"",
2231
"lint": "eslint '**/*.ts?(x)' --fix",
23-
"build": "rollup -c && yarn build:types",
24-
"build:types": "tsc -p tsconfig.json",
32+
"build": "rollup -c",
2533
"build:publish": "yarn build",
2634
"start": "tsc -p tsconfig.esm.json --watch",
2735
"dev": "start-storybook -p 6006 --quiet",
@@ -69,7 +77,10 @@
6977
"@types/lz-string": "^1.3.34",
7078
"@types/node": "^9.4.6",
7179
"@types/react": "^18.0.15",
80+
"acorn-walk": "^8.2.0",
81+
"astring": "^1.8.4",
7282
"babel-loader": "^7.1.5",
83+
"rollup-plugin-filesize": "^10.0.0",
7384
"typescript": "4.4.4"
7485
},
7586
"peerDependencies": {

‎sandpack-react/rollup.config.js

Lines changed: 85 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,94 @@
22
const commonjs = require("@rollup/plugin-commonjs");
33
const replace = require("@rollup/plugin-replace");
44
const typescript = require("@rollup/plugin-typescript");
5+
const filesize = require("rollup-plugin-filesize");
56

67
const pkg = require("./package.json");
8+
const removeCss = require("./scripts/rollup-remove-css-transformer");
79

8-
const configBase = {
9-
input: "src/index.ts",
10-
output: [
11-
{
12-
file: pkg.main,
13-
exports: "named",
14-
format: "cjs",
15-
inlineDynamicImports: true,
16-
interop: "auto",
17-
},
18-
{
19-
file: pkg.module,
20-
exports: "named",
21-
format: "es",
22-
inlineDynamicImports: true,
23-
},
24-
],
10+
const basePlugins = [commonjs({ requireReturnsDefault: "preferred" })];
11+
12+
const external = [
13+
"react/jsx-runtime",
14+
...Object.keys(pkg.dependencies),
15+
...Object.keys(pkg.devDependencies),
16+
...Object.keys(pkg.peerDependencies),
17+
];
2518

26-
plugins: [
27-
typescript({ tsconfig: "./tsconfig.json" }),
28-
replace({
29-
preventAssignment: true,
30-
values: { "process.env.TEST_ENV": "false" },
31-
}),
32-
commonjs({ requireReturnsDefault: "preferred" }),
33-
],
34-
external: [
35-
"react/jsx-runtime",
36-
...Object.keys(pkg.dependencies),
37-
...Object.keys(pkg.devDependencies),
38-
...Object.keys(pkg.peerDependencies),
39-
],
40-
};
19+
const baseConfig = { input: "src/index.ts", external };
20+
21+
const configBase = [
22+
{
23+
...baseConfig,
24+
plugins: basePlugins.concat(
25+
replace({
26+
preventAssignment: true,
27+
values: {
28+
"process.env.TEST_ENV": "false",
29+
"process.env.SANDPACK_UNSTYLED_COMPONENTS": `"false"`,
30+
},
31+
}),
32+
typescript({ tsconfig: "./tsconfig.json" }),
33+
filesize()
34+
),
35+
output: [
36+
{
37+
dir: "dist",
38+
exports: "named",
39+
format: "cjs",
40+
inlineDynamicImports: true,
41+
interop: "auto",
42+
},
43+
{
44+
dir: "dist",
45+
chunkFileNames: "[name]-[hash].esm.js",
46+
entryFileNames: "[name].esm.js",
47+
exports: "named",
48+
format: "es",
49+
inlineDynamicImports: true,
50+
},
51+
],
52+
},
53+
54+
{
55+
...baseConfig,
56+
treeshake: {
57+
preset: "smallest",
58+
manualPureFunctions: ["createStitches"],
59+
},
60+
plugins: basePlugins.concat(
61+
replace({
62+
preventAssignment: true,
63+
values: {
64+
"process.env.TEST_ENV": "false",
65+
"process.env.SANDPACK_UNSTYLED_COMPONENTS": `"true"`,
66+
},
67+
}),
68+
typescript({
69+
tsconfig: "./tsconfig.json",
70+
compilerOptions: { outDir: "dist/unstyled/" },
71+
}),
72+
removeCss(),
73+
filesize()
74+
),
75+
output: [
76+
{
77+
dir: "dist/unstyled",
78+
exports: "named",
79+
format: "cjs",
80+
inlineDynamicImports: true,
81+
interop: "auto",
82+
},
83+
{
84+
dir: "dist/unstyled",
85+
chunkFileNames: "[name]-[hash].esm.js",
86+
entryFileNames: "[name].esm.js",
87+
exports: "named",
88+
format: "es",
89+
inlineDynamicImports: true,
90+
},
91+
],
92+
},
93+
];
4194

4295
module.exports = configBase;

‎sandpack-react/scripts/rollup-remove-css-transformer.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* eslint-disable @typescript-eslint/no-var-requires */
2+
const path = require("path");
3+
4+
const walk = require("acorn-walk");
5+
const { generate } = require("astring");
6+
7+
module.exports = function () {
8+
return {
9+
name: "remove-css",
10+
transform(code, id) {
11+
const ast = this.parse(code);
12+
13+
const idArr = id.split("/");
14+
idArr.pop();
15+
16+
const sourceDirPath = idArr.join("/");
17+
18+
let isCssImported = false;
19+
20+
walk.simple(ast, {
21+
ImportDeclaration: (_node) => {
22+
if (
23+
path.resolve(sourceDirPath, _node.source.value) ===
24+
path.join(__dirname, "../src/styles")
25+
) {
26+
const specify = _node.specifiers?.find(
27+
(specify) => specify.imported.name === "css"
28+
);
29+
30+
if (specify) {
31+
isCssImported = true;
32+
specify.imported.name = "fakeCss";
33+
specify.local.name = "fakeCss";
34+
}
35+
}
36+
},
37+
CallExpression: (_node) => {
38+
if (_node.callee.name === "css" && isCssImported) {
39+
_node.type = "Identifier";
40+
_node.name = "fakeCss";
41+
delete _node.arguments;
42+
}
43+
},
44+
});
45+
46+
return {
47+
code: generate(ast),
48+
};
49+
},
50+
};
51+
};

‎sandpack-react/src/styles/index.ts

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,11 @@ import { createStitchesMock } from "./stitches-mock";
1111
*/
1212
export const THEME_PREFIX = "sp";
1313

14-
const getNodeProcess = (): false | string | undefined => {
15-
if (typeof process === "undefined") return false;
16-
17-
return (
18-
process.env.SANDPACK_BARE_COMPONENTS ||
19-
process.env.NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS
20-
);
21-
};
22-
2314
/**
2415
* @category Theme
2516
*/
26-
export const { createTheme, css, getCssText, keyframes } = getNodeProcess()
17+
// prettier-ignore
18+
export const { createTheme, css, getCssText, keyframes } = process.env.SANDPACK_UNSTYLED_COMPONENTS === 'true'
2719
? createStitchesMock
2820
: createStitches({
2921
prefix: THEME_PREFIX,
@@ -147,3 +139,12 @@ const simpleHashFunction = (str: string): number => {
147139
}
148140
return Math.abs(hash);
149141
};
142+
143+
/**
144+
* The fake `css` function used to match the real `css` function usage
145+
* We use this for the unstyled bundle which do not need real class names
146+
* `css` is a factory which return a className generator, but also it be used in scenarios which `toString` will be invoked
147+
* so we also need to add the `toString` method to it.
148+
*/
149+
export const fakeCss = () => "";
150+
fakeCss.toString = fakeCss;

‎sandpack-react/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"emitDecoratorMetadata": true,
1111
"noImplicitAny": true,
1212
"jsx": "react-jsx",
13-
"outDir": "dist/types",
13+
"outDir": "dist",
1414
"skipLibCheck": true
1515
},
1616
"include": ["src"],

‎website/docs/src/pages/getting-started/layout.mdx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,19 @@ For this, sandpack uses a small package called [`classer`](https://github.com/co
3232
This pattern is compatible with most modern styling systems, including Tailwind, styled-components and emotion.
3333
</Callout>
3434

35-
### Bare components and remove runtime styling
35+
### Bare components, remove runtime styling or use unstyled components
3636

37-
`@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return bare components, which will eliminate all Sandpack CSS style.
37+
`@codesanbdox/sandpack-react` relies on [@stitches/core](https://github.com/stitchesjs/stitches) to style its component, which is almost zero-runtime CSS-in-JS framework. However, if you want to get rid of any runtime script or create your own style on top of Sandpack components, we provide a way to return unstyled components, which will eliminate all Sandpack CSS style.
3838

39-
To do it, you need to pass `SANDPACK_BARE_COMPONENTS` environment variable (`NEXT_PUBLIC_SANDPACK_BARE_COMPONENTS` for Nextjs) as `true`, which will remove the Stitches dependency, its execution and return only the HTML of the components.
39+
To do it, you need to consume the same components from the `unstyled` subfolder, which doesn't contain the Stitches dependency. For example:
40+
41+
```jsx
42+
import { Sandpack } from "@codesandbox/sandpack-react/unstyled";
43+
44+
const App = () => {
45+
return <Sandpack />
46+
};
47+
```
4048

4149
## Themes
4250

0 commit comments

Comments
 (0)