Skip to content

Commit 086961f

Browse files
riccardoperrariccardoperra
committed
Remove vanilla extract hacks in ui package
This remove the solid export in ui package (hope there are no issue for this) Signed-off-by: riccardoperra <riccardo.perra@icloud.com>
1 parent af2a0a7 commit 086961f

File tree

4 files changed

+64
-385
lines changed

4 files changed

+64
-385
lines changed

‎packages/ui/package.json‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,22 @@
1111
"type": "module",
1212
"exports": {
1313
".": {
14-
"solid": "./dist/source-gen/index.jsx",
14+
"types": "./dist/types/index.d.ts",
1515
"import": "./dist/esm/index.js",
1616
"browser": {
1717
"import": "./dist/esm/index.js",
1818
"require": "./dist/cjs/index.js"
1919
},
2020
"require": "./dist/cjs/index.js",
21-
"node": "./dist/cjs/index.js",
22-
"types": "./dist/types/index.d.ts"
21+
"node": "./dist/cjs/index.js"
2322
},
2423
"./themes/darkTheme": {
25-
"default": "./dist/esm/lib/themes/darkTheme.css.vanilla.js",
26-
"types": "./dist/types/lib/themes/dark-theme.css.d.ts"
24+
"types": "./dist/types/lib/themes/dark-theme.css.d.ts",
25+
"default": "./dist/esm/darkTheme.css.vanilla.js"
2726
},
2827
"./themes/lightTheme": {
29-
"default": "./dist/esm/lib/themes/lightTheme.css.vanilla.js",
30-
"types": "./dist/types/lib/themes/light-theme.css.d.ts"
28+
"types": "./dist/types/lib/themes/light-theme.css.d.ts",
29+
"default": "./dist/esm/lightTheme.css.vanilla.js"
3130
}
3231
},
3332
"typesVersions": {
@@ -95,32 +94,30 @@
9594
"solid-use": "^0.7.2"
9695
},
9796
"devDependencies": {
98-
"@babel/plugin-syntax-jsx": "^7.21.4",
99-
"@rollup/plugin-babel": "^6.0.3",
100-
"@rollup/plugin-node-resolve": "^15.0.2",
97+
"@babel/plugin-syntax-jsx": "^7.28.6",
98+
"@rollup/plugin-babel": "^7.0.0",
99+
"@rollup/plugin-node-resolve": "^16.0.3",
101100
"@types/node": "catalog:next",
102-
"@vanilla-extract/esbuild-plugin": "^2.3.22",
103101
"@vanilla-extract/rollup-plugin": "^1.5.3",
104-
"@vanilla-extract/vite-plugin": "5.2.1",
102+
"@vanilla-extract/vite-plugin": "^5.2.1",
105103
"acorn-jsx": "^5.3.2",
106-
"chalk": "5.1.2",
107-
"csstype": "3.1.1",
104+
"chalk": "^5.6.2",
105+
"csstype": "^3.2.3",
108106
"esbuild": "^0.19.8",
109107
"estree-walker": "2.0.2",
110-
"magic-string": "0.26.7",
111-
"merge-anything": "5.0.4",
108+
"magic-string": "^0.30.21",
109+
"merge-anything": "^6.0.6",
112110
"oxfmt": "catalog:next",
113111
"oxlint": "catalog:next",
114112
"postcss": "^8.4.31",
115113
"pretty-ms": "8.0.0",
116114
"rimraf": "^3.0.2",
117-
"rollup": "^2.79.1",
118-
"rollup-plugin-import-css": "^3.2.1",
115+
"rollup": "^4.60.0",
116+
"rollup-plugin-import-css": "^4.2.0",
119117
"rollup-plugin-terser": "^7.0.2",
120118
"rollup-preset-solid": "^3.0.0",
121119
"solid-js": "catalog:next",
122-
"tiny-glob": "^0.2.9",
123-
"typescript": "^5.9.3",
120+
"typescript": "catalog:next",
124121
"vite": "catalog:next",
125122
"vite-plugin-dts": "catalog:next",
126123
"vite-plugin-solid": "catalog:next"

‎packages/ui/rollup.config.ts‎

Lines changed: 2 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import typescript from '@rollup/plugin-typescript';
21
import {vanillaExtractPlugin} from '@vanilla-extract/rollup-plugin';
3-
import fs from 'fs';
4-
import path from 'path';
52
import type {ModuleFormat, OutputOptions, RollupOptions} from 'rollup';
6-
import {defineConfig, rollup} from 'rollup';
3+
import {defineConfig} from 'rollup';
74
import {dependencies, peerDependencies} from './package.json';
8-
import {preserveJsxImports} from './tools/preserve-jsx-imports';
95
import withSolid from './tools/with-solid';
106

117
const externals = [
@@ -18,8 +14,6 @@ const externals = [
1814
'solid-use/props',
1915
];
2016

21-
const cssFileFilter = /\.css\.(js|mjs|jsx|ts|tsx)(\?used)?$/;
22-
2317
const solidConfig = withSolid({
2418
input: {
2519
index: 'src/index.tsx',
@@ -28,115 +22,9 @@ const solidConfig = withSolid({
2822
},
2923
targets: ['esm', 'cjs'],
3024
external: externals,
31-
output: [buildOutput('esm'), buildOutput('cjs')],
25+
output: [buildOutput('esm')],
3226
plugins: [
3327
vanillaExtractPlugin(),
34-
{
35-
name: 'generate-vanilla-extract-source',
36-
async closeBundle() {
37-
const build = await rollup({
38-
input: {
39-
index: 'dist/source/index.jsx',
40-
'lightTheme.css': 'dist/source/lib/themes/light-theme.css.js',
41-
'darkTheme.css': 'dist/source/lib/themes/dark-theme.css.js',
42-
},
43-
treeshake: false,
44-
external: externals,
45-
plugins: [
46-
typescript({tsconfig: './tsconfig.source.json'}),
47-
// Source folder should not be edited, but we need to manually
48-
// preserve custom jsx imports like styled.div
49-
preserveJsxImports(),
50-
{
51-
name: 'transfer-vanilla-extract-source',
52-
async renderChunk(code, info) {
53-
const id = info.facadeModuleId ?? '';
54-
// We need to keep untouched files that are not handled by Vanilla Extract
55-
if (!cssFileFilter.test(id)) {
56-
return;
57-
}
58-
// The path should be resolved removing the query parameter that
59-
// rollup applies like ?used / ?unused
60-
const index = id.indexOf('?');
61-
const filePath = index === -1 ? id : id.substring(0, index);
62-
const resolvedPath = filePath.split(path.sep).join('/');
63-
64-
// This is the base path that contain the generated css from vanilla-extract.
65-
const builtPath = resolvedPath.replace(
66-
'/dist/source/',
67-
'/dist/esm/',
68-
);
69-
70-
// @vanilla-extract/rollup-plugin generate a css file with the suffix `.ts.vanilla.css`.
71-
// It will be in the same folder of the js file due to preserveModules.
72-
const cssFile = builtPath.replace(/\.js$/, '.ts.vanilla.css');
73-
74-
let jsFile: string;
75-
// Entry inputs should be handled in a different way
76-
// since the facadeModuleId is different from the file name that
77-
// will be used for outputting the .js file.
78-
if (info.isEntry) {
79-
const parsedFileName = path.parse(info.fileName);
80-
const parsedFacadeModuleId = path.parse(id);
81-
parsedFacadeModuleId.name = parsedFileName.name;
82-
parsedFacadeModuleId.base = `${parsedFileName.name}${parsedFileName.ext}`;
83-
jsFile = path
84-
.format(parsedFacadeModuleId)
85-
.split(path.sep)
86-
.join('/')
87-
.replace('/dist/source/', '/dist/esm/');
88-
} else {
89-
jsFile = builtPath.replace(/\.js$/, '.vanilla.js');
90-
}
91-
try {
92-
const jsCode = fs.readFileSync(jsFile, {
93-
encoding: 'utf8',
94-
});
95-
96-
// Sometimes Vanilla extract doesn't generate the css file,
97-
// for example when the .js file contains only css variables or
98-
// something that should not be added to the stylesheet.
99-
if (fs.existsSync(cssFile)) {
100-
const cssCode = fs.readFileSync(cssFile, {
101-
encoding: 'utf8',
102-
});
103-
const cssParsedPath = path.parse(cssFile);
104-
const chunkPath = path.parse(info.fileName);
105-
// We need to emit every css file present in the dist/esm folder
106-
// that has been generated with Vanilla Extract
107-
this.emitFile({
108-
type: 'asset',
109-
source: cssCode,
110-
fileName: `${chunkPath.dir}/${cssParsedPath.name}${cssParsedPath.ext}`,
111-
});
112-
}
113-
return {
114-
code: jsCode,
115-
map: info.map,
116-
};
117-
} catch (e) {
118-
console.log(e);
119-
}
120-
},
121-
},
122-
],
123-
});
124-
await build.write({
125-
dir: './dist/source-gen',
126-
preserveModules: true,
127-
preserveModulesRoot: 'dist/source',
128-
exports: 'named',
129-
entryFileNames({name}) {
130-
return `${name.replace(/\.css$/, '.css.vanilla')}.[ext]`;
131-
},
132-
assetFileNames({name}) {
133-
return name?.replace(/^dist\/source\//, '') ?? '';
134-
},
135-
});
136-
},
137-
},
138-
// This is needed in order to fix some side effects that are not resolved manually.
139-
// TODO: need to check this
14028
{
14129
name: 'no-treeshake',
14230
transform() {

‎packages/ui/tools/preserve-jsx-imports.ts‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

0 commit comments

Comments
 (0)
⚡