From 16910e2cf353d371d39552bc8e40e573ee4863bf Mon Sep 17 00:00:00 2001 From: Barak Igal Date: Sun, 7 May 2023 15:04:54 +0300 Subject: [PATCH 1/5] feat: vite plugin (bring code to stylable) --- package-lock.json | 167 ++++++++--- packages/vite/package.json | 45 +++ packages/vite/src/index.ts | 276 ++++++++++++++++++ packages/vite/src/plugin-utils.ts | 121 ++++++++ packages/vite/src/tsconfig.json | 14 + .../vite/test/fixtures/vite-app/index.html | 12 + .../vite/test/fixtures/vite-app/src/main.js | 6 + .../test/fixtures/vite-app/src/stuff.st.css | 3 + packages/vite/test/tsconfig.json | 15 + packages/vite/test/vite-build.spec.ts | 81 +++++ packages/vite/test/vite-dev.spec.ts | 77 +++++ tsconfig.json | 4 +- 12 files changed, 784 insertions(+), 37 deletions(-) create mode 100644 packages/vite/package.json create mode 100644 packages/vite/src/index.ts create mode 100644 packages/vite/src/plugin-utils.ts create mode 100644 packages/vite/src/tsconfig.json create mode 100644 packages/vite/test/fixtures/vite-app/index.html create mode 100644 packages/vite/test/fixtures/vite-app/src/main.js create mode 100644 packages/vite/test/fixtures/vite-app/src/stuff.st.css create mode 100644 packages/vite/test/tsconfig.json create mode 100644 packages/vite/test/vite-build.spec.ts create mode 100644 packages/vite/test/vite-dev.spec.ts diff --git a/package-lock.json b/package-lock.json index 307f4ed5f4..7b16e30726 100644 --- a/package-lock.json +++ b/package-lock.json @@ -814,6 +814,10 @@ "resolved": "packages/uni-driver", "link": true }, + "node_modules/@stylable/vite": { + "resolved": "packages/vite", + "link": true + }, "node_modules/@stylable/webpack-extensions": { "resolved": "packages/webpack-extensions", "link": true @@ -4294,6 +4298,17 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -6456,6 +6471,54 @@ "resolved": "https://registry.npmjs.org/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz", "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, + "node_modules/vite": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz", + "integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==", + "peer": true, + "dependencies": { + "esbuild": "^0.17.5", + "postcss": "^8.4.23", + "rollup": "^3.21.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, "node_modules/vlq": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz", @@ -6772,17 +6835,6 @@ "node": ">=14.14.0" } }, - "packages/cli/node_modules/mime": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", - "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", - "bin": { - "mime": "cli.js" - }, - "engines": { - "node": ">=10.0.0" - } - }, "packages/code-formatter": { "name": "@stylable/code-formatter", "version": "5.11.0", @@ -7048,17 +7100,6 @@ "rollup": "^2.70.0 || ^3.0.0" } }, - "packages/rollup-plugin/node_modules/mime": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", - "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==", - "bin": { - "mime": "cli.js" - }, - "engines": { - "node": ">=10.0.0" - } - }, "packages/runtime": { "name": "@stylable/runtime", "version": "5.11.0", @@ -7087,6 +7128,44 @@ "node": ">=14.14.0" } }, + "packages/vite": { + "name": "@stylable/vite", + "version": "5.11.0", + "license": "MIT", + "dependencies": { + "@stylable/build-tools": "^5.11.0", + "@stylable/cli": "^5.11.0", + "@stylable/core": "^5.11.0", + "@stylable/node": "^5.11.0", + "@stylable/optimizer": "^5.11.0", + "@stylable/runtime": "^5.11.0", + "decache": "^4.6.1", + "mime": "^3.0.0" + }, + "engines": { + "node": ">=14.14.0" + }, + "peerDependencies": { + "vite": "^4.3.5" + } + }, + "packages/vite-plugin-stylable": { + "name": "@stylable/vite", + "version": "1.0.0", + "extraneous": true, + "dependencies": { + "@stylable/build-tools": "^5.11.0", + "@stylable/cli": "^5.11.0", + "@stylable/core": "^5.11.0", + "@stylable/node": "^5.11.0", + "@stylable/optimizer": "^5.11.0", + "@stylable/runtime": "^5.11.0", + "decache": "^4.6.1" + }, + "peerDependencies": { + "vite": "^4.0.0" + } + }, "packages/webpack-extensions": { "name": "@stylable/webpack-extensions", "version": "5.11.0", @@ -7527,13 +7606,6 @@ "lodash.upperfirst": "^4.3.1", "mime": "^3.0.0", "yargs": "^17.7.2" - }, - "dependencies": { - "mime": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", - "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==" - } } }, "@stylable/code-formatter": { @@ -7699,13 +7771,6 @@ "@stylable/runtime": "^5.11.0", "decache": "^4.6.1", "mime": "^3.0.0" - }, - "dependencies": { - "mime": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", - "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==" - } } }, "@stylable/runtime": { @@ -7721,6 +7786,19 @@ "@stylable/uni-driver": { "version": "file:packages/uni-driver" }, + "@stylable/vite": { + "version": "file:packages/vite", + "requires": { + "@stylable/build-tools": "^5.11.0", + "@stylable/cli": "^5.11.0", + "@stylable/core": "^5.11.0", + "@stylable/node": "^5.11.0", + "@stylable/optimizer": "^5.11.0", + "@stylable/runtime": "^5.11.0", + "decache": "^4.6.1", + "mime": "^3.0.0" + } + }, "@stylable/webpack-extensions": { "version": "file:packages/webpack-extensions", "requires": { @@ -10352,6 +10430,11 @@ "picomatch": "^2.3.1" } }, + "mime": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", + "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==" + }, "mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -11857,6 +11940,18 @@ "resolved": "https://registry.npmjs.org/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz", "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, + "vite": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz", + "integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==", + "peer": true, + "requires": { + "esbuild": "^0.17.5", + "fsevents": "~2.3.2", + "postcss": "^8.4.23", + "rollup": "^3.21.0" + } + }, "vlq": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz", diff --git a/packages/vite/package.json b/packages/vite/package.json new file mode 100644 index 0000000000..546ea9e6ee --- /dev/null +++ b/packages/vite/package.json @@ -0,0 +1,45 @@ +{ + "name": "@stylable/vite", + "version": "5.11.0", + "description": "Stylable plugin for Vite", + "main": "dist/index.js", + "scripts": { + "test": "mocha \"dist/test/**/*.spec.js\"" + }, + "peerDependencies": { + "vite": "^4.3.5" + }, + "dependencies": { + "@stylable/build-tools": "^5.11.0", + "@stylable/cli": "^5.11.0", + "@stylable/core": "^5.11.0", + "@stylable/node": "^5.11.0", + "@stylable/optimizer": "^5.11.0", + "@stylable/runtime": "^5.11.0", + "decache": "^4.6.1", + "mime": "^3.0.0" + }, + "files": [ + "dist", + "!dist/test", + "src", + "runtime.js", + "!*/tsconfig.{json,tsbuildinfo}" + ], + "engines": { + "node": ">=14.14.0" + }, + "publishConfig": { + "access": "public" + }, + "keywords": [ + "vite", + "css", + "css modules", + "vite-plugin", + "Stylable" + ], + "repository": "https://github.com/wix/stylable/tree/master/packages/vite", + "author": "Wix.com", + "license": "MIT" +} diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts new file mode 100644 index 0000000000..d639ec992d --- /dev/null +++ b/packages/vite/src/index.ts @@ -0,0 +1,276 @@ +import type { PluginOption } from 'vite'; +import { hasImportedSideEffects } from '@stylable/build-tools'; +import { resolveConfig as resolveStcConfig, STCBuilder } from '@stylable/cli'; +import type { DiagnosticsMode } from '@stylable/core/dist/index-internal'; +import { emitDiagnostics, tryCollectImportsDeep } from '@stylable/core/dist/index-internal'; +import { resolveNamespace as resolveNamespaceNode } from '@stylable/node'; +import { StylableOptimizer } from '@stylable/optimizer'; +import decache from 'decache'; +import fs from 'fs'; +import { Stylable } from '@stylable/core'; +import { + emitAssets, + generateCssString, + generateStylableModuleCode, + getDefaultMode, +} from './plugin-utils'; + +export interface StylableVitePluginOptions { + optimization?: { + minify?: boolean; + }; + inlineAssets?: boolean | ((filepath: string, buffer: Buffer) => boolean); + fileName?: string; + mode?: 'development' | 'production'; + diagnosticsMode?: DiagnosticsMode; + resolveNamespace?: typeof resolveNamespaceNode; + /** + * Runs "stc" programmatically with the webpack compilation. + * true - it will automatically detect the closest "stylable.config.js" file and use it. + * string - it will use the provided string as the "stcConfig" file path. + */ + stcConfig?: boolean | string; + projectRoot?: string; +} + +const requireModuleCache = new Set(); +const requireModule = (id: string) => { + requireModuleCache.add(id); + return require(id); +}; +const clearRequireCache = () => { + for (const id of requireModuleCache) { + decache(id); + } + requireModuleCache.clear(); +}; + +const ST_CSS = '.st.css'; + +export function viteStylable({ + optimization: { minify = false } = {}, + inlineAssets = true, + // Change when WSR works without it? + diagnosticsMode = 'loose', + mode = getDefaultMode(), + resolveNamespace = resolveNamespaceNode, + stcConfig, + projectRoot = process.cwd(), +}: StylableVitePluginOptions = {}): PluginOption { + let stylable!: Stylable; + let extracted!: Map; + let emittedAssets!: Map; + let stcBuilder: STCBuilder | undefined; + + return { + enforce: 'pre', + name: 'stylable', + async buildStart() { + extracted = extracted || new Map(); + emittedAssets = emittedAssets || new Map(); + if (stylable) { + clearRequireCache(); + stylable.initCache(); + } else { + stylable = new Stylable({ + fileSystem: fs, + projectRoot, + mode, + resolveNamespace, + optimizer: new StylableOptimizer(), + resolverCache: new Map(), + requireModule, + }); + } + + if (stcConfig) { + if (stcBuilder) { + for (const sourceDirectory of stcBuilder.getProjectsSources()) { + this.addWatchFile(sourceDirectory); + } + } else { + const configuration = resolveStcConfig( + projectRoot, + typeof stcConfig === 'string' ? stcConfig : undefined + ); + + if (!configuration) { + throw new Error( + `Could not find "stcConfig"${ + typeof stcConfig === 'string' ? ` at "${stcConfig}"` : '' + }` + ); + } + + stcBuilder = STCBuilder.create({ + rootDir: projectRoot, + configFilePath: configuration.path, + watchMode: this.meta.watchMode, + }); + + await stcBuilder.build(); + + for (const sourceDirectory of stcBuilder.getProjectsSources()) { + this.addWatchFile(sourceDirectory); + } + + stcBuilder.reportDiagnostics( + { + emitWarning: (e) => this.warn(e), + emitError: (e) => this.error(e), + }, + diagnosticsMode + ); + } + } + }, + async watchChange(id) { + if (stcBuilder) { + await stcBuilder.rebuild([id]); + + stcBuilder.reportDiagnostics( + { + emitWarning: (e) => this.warn(e), + emitError: (e) => this.error(e), + }, + diagnosticsMode + ); + } + }, + load(id) { + // Strip any resource queries + const idWithoutQuery = id.split('?')[0]; + + // When loading `*.st.css.js.css` modules - + // we read the virtual css chunk we generated when transforming + if (idWithoutQuery.endsWith(`${ST_CSS}.js.css`)) { + const code = extracted.get( + // We strip away the `.css` extension and the `\0` prefix + idWithoutQuery.slice(1, -1 * '.css'.length) + ); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + return { code: code!.css }; + } + + // So when loading `*.st.css.js` modules - + // we read the actual `*.st.css` file so our transform alone can process it + if (idWithoutQuery.endsWith(`${ST_CSS}.js`)) { + const code = fs.readFileSync( + // We strip away the `.js` extension and the `\0` prefix + idWithoutQuery.slice(1, -1 * '.js'.length), + 'utf8' + ); + return { code, moduleSideEffects: false }; + } + return null; + }, + async resolveId(id, importer, options) { + const [idWithoutQuery, query] = id.split('?'); + + // Here we fake-resolve our virtual `*.st.css.js.css` CSS modules + // otherwise our generated `*.st.css.js.css` import fails resolution + if (idWithoutQuery.endsWith(`${ST_CSS}.js.css`)) { + const resolution = await this.resolve( + `${idWithoutQuery.slice(1, -1 * '.js.css'.length)}${query ? `?${query}` : ''}`, + importer, + { + skipSelf: true, + ...options, + } + ); + if (!resolution) { + return resolution; + } + + const [resolvedWithoutQuery, resolvedQuery] = resolution.id.split('?'); + return { + ...resolution, + id: `\0${resolvedWithoutQuery}.js.css${ + resolvedQuery ? `?${resolvedQuery}` : '' + }`, + }; + } + + // Here we reroute `*.st.css` imports to `*.st.css.js` imports. + // We do this to avoid Vite's built-in CSS plugin + // from parsing our generated ES module as CSS. + if (idWithoutQuery.endsWith(ST_CSS)) { + const resolution = await this.resolve(id, importer, { + skipSelf: true, + ...options, + }); + + if (!resolution) { + return resolution; + } + + const [resolvedWithoutQuery, query] = resolution.id.split('?'); + return { + ...resolution, + id: `\0${resolvedWithoutQuery}.js${query ? `?${query}` : ''}`, + }; + } + return null; + }, + transform(source, id) { + const [idWithoutQuery] = id.split('?'); + + // We only transform the rerouted `*.st.css.js` imports + if (!idWithoutQuery.endsWith(`${ST_CSS}.js`)) { + return null; + } + const { meta, exports } = stylable.transform( + stylable.analyze( + idWithoutQuery.slice( + // Remove our conventional `\0` prefix + 1, + // We strip away the fake `.js` extension as far as Stylable is concerned + -3 + ), + source + ) + ); + const assetsIds = emitAssets(this, stylable, meta, emittedAssets, inlineAssets); + const css = generateCssString(meta, minify, stylable, assetsIds); + const moduleImports = []; + for (const imported of meta.getImportStatements()) { + if (hasImportedSideEffects(stylable, meta, imported)) { + moduleImports.push(`import ${JSON.stringify(imported.request)};`); + } + } + extracted.set(idWithoutQuery.slice(1), { css }); + + for (const filePath of tryCollectImportsDeep(stylable.resolver, meta)) { + this.addWatchFile(filePath); + } + + /** + * In case this Stylable module has sources the diagnostics will be emitted in `watchChange` hook. + */ + if ( + !stcBuilder?.getSourcesFiles( + idWithoutQuery.slice( + // Remove our conventional `\0` prefix + 1, + // We strip away the fake `.js` extension as far as Stylable is concerned + -3 + ) + ) + ) { + emitDiagnostics( + { + emitWarning: (e: Error) => this.warn(e), + emitError: (e: Error) => this.error(e), + }, + meta, + diagnosticsMode + ); + } + + return { + code: generateStylableModuleCode(id, meta, exports, moduleImports), + map: { mappings: '' }, + }; + }, + }; +} diff --git a/packages/vite/src/plugin-utils.ts b/packages/vite/src/plugin-utils.ts new file mode 100644 index 0000000000..c62841a2b9 --- /dev/null +++ b/packages/vite/src/plugin-utils.ts @@ -0,0 +1,121 @@ +import type { Stylable, StylableMeta } from '@stylable/core'; +import type { StylableExports } from '@stylable/core/dist/index-internal'; +import { processUrlDependencies } from '@stylable/build-tools'; +import fs from 'fs'; +import { basename, extname, isAbsolute, join } from 'path'; +import { createHash } from 'crypto'; +import mime from 'mime'; +import type { PluginContext } from 'rollup'; +import type { StylableVitePluginOptions } from './index'; + + + +export function generateStylableModuleCode( + id: string, + meta: StylableMeta, + exports: StylableExports, + moduleImports: string[] +) { + const [idWithoutQuery, query] = id.split('?'); + return ` + import { classesRuntime, statesRuntime } from '@stylable/runtime/esm/pure'; + ${moduleImports.join('\n')} + + import '${idWithoutQuery}.css${query ? `?${query}` : ''}'; + + export var namespace = ${JSON.stringify(meta.namespace)}; + export var st = classesRuntime.bind(null, namespace); + export var style = st; + export var cssStates = statesRuntime.bind(null, namespace); + export var classes = ${JSON.stringify(exports.classes)}; + export var keyframes = ${JSON.stringify(exports.keyframes)}; + export var layers = ${JSON.stringify(exports.layers)}; + export var stVars = ${JSON.stringify(exports.stVars)}; + export var vars = ${JSON.stringify(exports.vars)}; + `; +} + +export function generateCssString( + meta: StylableMeta, + minify: boolean, + stylable: Stylable, + assetsIds: string[] +) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const css = meta + .targetAst!.toString() + .replace( + /__stylable_url_asset_(.*?)__/g, + (_$0, $1) => assetsIds[Number($1)] + ); + + if (minify && stylable.optimizer) { + return stylable.optimizer.minifyCSS(css); + } + return css; +} + +export function emitAssets( + ctx: PluginContext, + stylable: Stylable, + meta: StylableMeta, + emittedAssets: Map, + inlineAssets: StylableVitePluginOptions['inlineAssets'] +): string[] { + const assets = processUrlDependencies({ + meta, + rootContext: stylable.projectRoot, + host: { + isAbsolute, + join, + }, + }); + const assetsIds: string[] = []; + for (const asset of assets) { + const fileBuffer = fs.readFileSync(asset); + const shouldInline = + typeof inlineAssets === 'function' + ? inlineAssets(asset, fileBuffer) + : inlineAssets; + + if (shouldInline) { + const mimeType = mime.getType(extname(asset)); + assetsIds.push( + `data:${mimeType};base64,${fileBuffer.toString('base64')}` + ); + } else { + const name = basename(asset); + let hash = emittedAssets.get(asset); + if (hash) { + assetsIds.push(`${hash}_${name}`); + } else { + const fileBuffer = fs.readFileSync(asset); + hash = createHash('sha1').update(fileBuffer).digest('hex'); + const fileName = `${hash}_${name}`; + if (emittedAssets.has(fileName)) { + assetsIds.push(fileName); + } else { + emittedAssets.set(fileName, hash); + emittedAssets.set(asset, hash); + assetsIds.push(fileName); + ctx.emitFile({ + type: 'asset', + fileName, + source: fileBuffer, + }); + } + } + } + } + return assetsIds; +} + +export function getDefaultMode(): 'development' | 'production' { + if (process.env.NODE_ENV === 'production') { + return 'production'; + } + if (process.env.ROLLUP_WATCH) { + return 'development'; + } + return 'production'; +} diff --git a/packages/vite/src/tsconfig.json b/packages/vite/src/tsconfig.json new file mode 100644 index 0000000000..e0342d219a --- /dev/null +++ b/packages/vite/src/tsconfig.json @@ -0,0 +1,14 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "outDir": "../dist" + }, + "references": [ + { "path": "../../build-tools/src" }, + { "path": "../../cli/src" }, + { "path": "../../core/src" }, + { "path": "../../node/src" }, + { "path": "../../runtime/src" }, + { "path": "../../optimizer/src" } + ] +} diff --git a/packages/vite/test/fixtures/vite-app/index.html b/packages/vite/test/fixtures/vite-app/index.html new file mode 100644 index 0000000000..05a4fd406a --- /dev/null +++ b/packages/vite/test/fixtures/vite-app/index.html @@ -0,0 +1,12 @@ + + + + + + Vite + React + TS + Stylable + + +
+ + + diff --git a/packages/vite/test/fixtures/vite-app/src/main.js b/packages/vite/test/fixtures/vite-app/src/main.js new file mode 100644 index 0000000000..9f9b4364f0 --- /dev/null +++ b/packages/vite/test/fixtures/vite-app/src/main.js @@ -0,0 +1,6 @@ +import { style, classes } from './stuff.st.css'; + +const root = document.getElementById('root'); +root.className = classes.root; +root.textContent = 'This
should be blue'; +root.setAttribute('data-hook', 'target'); diff --git a/packages/vite/test/fixtures/vite-app/src/stuff.st.css b/packages/vite/test/fixtures/vite-app/src/stuff.st.css new file mode 100644 index 0000000000..b0acb82c96 --- /dev/null +++ b/packages/vite/test/fixtures/vite-app/src/stuff.st.css @@ -0,0 +1,3 @@ +.root { + background-color: #1337AF; +} diff --git a/packages/vite/test/tsconfig.json b/packages/vite/test/tsconfig.json new file mode 100644 index 0000000000..4fe1e91854 --- /dev/null +++ b/packages/vite/test/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "outDir": "../dist/test", + "types": ["node", "externals", "mocha"] + }, + "references": [ + { "path": "../../core/src" }, + { "path": "../../cli/src" }, + { "path": "../../e2e-test-kit/src" }, + { "path": "../../core-test-kit/src" }, + { "path": "../../optimizer/src" }, + { "path": "../src" } + ] +} diff --git a/packages/vite/test/vite-build.spec.ts b/packages/vite/test/vite-build.spec.ts new file mode 100644 index 0000000000..0f23d3d0d5 --- /dev/null +++ b/packages/vite/test/vite-build.spec.ts @@ -0,0 +1,81 @@ +import { dirname } from 'path'; +import { expect } from 'chai'; +import { type UserConfig as ViteConfig, build, preview } from 'vite'; +import { viteStylable } from '@stylable/vite'; +import playwright from 'playwright-core'; + +const project = 'vite-app'; +const projectDir = dirname(require.resolve(`@stylable/vite/test/fixtures/${project}/index.html`)); + +const viteConfig: ViteConfig = { + root: projectDir, + plugins: [viteStylable()], + logLevel: 'silent', + clearScreen: false, +}; + +async function viteBuildAndPreview() { + await build({ + configFile: false, + ...viteConfig, + }); + const vitePreviewServer = await preview({ + configFile: false, + ...viteConfig, + }); + + const viteAddress = vitePreviewServer.httpServer?.address(); + + if (!viteAddress) { + throw new Error('no preview server url for some reason'); + } + const url = + typeof viteAddress === 'string' ? viteAddress : `http://localhost:${viteAddress.port}/`; + + return { + stop() { + vitePreviewServer.httpServer.close(); + return Promise.resolve(); + }, + url, + }; +} + +describe('vite build', () => { + let vitePreviewServer: Awaited> | undefined; + const disposable = new Set<() => Promise | void>(); + before(async () => { + vitePreviewServer = await viteBuildAndPreview(); + }); + + after(async () => { + for (const dispose of disposable) { + await dispose(); + } + await vitePreviewServer?.stop(); + }); + + it('should render stylable-styled content in `vite build && vite preview`', async () => { + const page = await open(vitePreviewServer!.url, disposable); + + const bg = await page.evaluate(() => { + const elm = document.querySelector('[data-hook="target"]')!; + return window.getComputedStyle(elm).getPropertyValue('background-color'); + }); + + expect(bg).to.equal('rgb(19, 55, 175)'); + }); +}); + +async function open(url: string, dispose: Set<() => Promise | void>) { + const launchOptions = {}; + const browser = process.env.PLAYWRIGHT_SERVER + ? await playwright.chromium.connect(process.env.PLAYWRIGHT_SERVER, launchOptions) + : await playwright.chromium.launch(launchOptions); + + const browserContext = await browser.newContext(); + const page = await browserContext.newPage(); + await page.goto(url, { waitUntil: 'networkidle' }); + dispose.add(() => browser.close()); + return page; +} diff --git a/packages/vite/test/vite-dev.spec.ts b/packages/vite/test/vite-dev.spec.ts new file mode 100644 index 0000000000..aac750ff91 --- /dev/null +++ b/packages/vite/test/vite-dev.spec.ts @@ -0,0 +1,77 @@ +import { dirname } from 'path'; +import { expect } from 'chai'; +import type { UserConfig as ViteConfig } from 'vite'; +import { createServer } from 'vite'; +import { viteStylable } from '@stylable/vite'; +import playwright from 'playwright-core'; + +const project = 'vite-app'; +const projectDir = dirname(require.resolve(`@stylable/vite/test/fixtures/${project}/index.html`)); + +const viteConfig: ViteConfig = { + root: projectDir, + plugins: [viteStylable()], + logLevel: 'silent', + clearScreen: false, +}; + +async function viteDev() { + const viteServer = await createServer({ + configFile: false, + ...viteConfig, + }); + await viteServer.listen(); + const viteAddress = viteServer.httpServer?.address(); + + if (!viteAddress) { + throw new Error('no dev server url for some reason'); + } + const url = + typeof viteAddress === 'string' ? viteAddress : `http://localhost:${viteAddress.port}/`; + + return { + async stop() { + await viteServer.close(); + }, + url, + }; +} + +describe('vite dev', () => { + let viteDevServer: Awaited> | undefined; + const disposable = new Set<() => Promise | void>(); + before(async () => { + viteDevServer = await viteDev(); + }); + + after(async () => { + for (const dispose of disposable) { + await dispose(); + } + await viteDevServer?.stop(); + }); + + it('should render stylable-styled content in `vite dev`', async () => { + const page = await open(viteDevServer!.url, disposable); + + const bg = await page.evaluate(() => { + const elm = document.querySelector('[data-hook="target"]')!; + return window.getComputedStyle(elm).getPropertyValue('background-color'); + }); + + expect(bg).to.equal('rgb(19, 55, 175)'); + }); +}); + +async function open(url: string, dispose: Set<() => Promise | void>) { + const launchOptions = {}; + const browser = process.env.PLAYWRIGHT_SERVER + ? await playwright.chromium.connect(process.env.PLAYWRIGHT_SERVER, launchOptions) + : await playwright.chromium.launch(launchOptions); + + const browserContext = await browser.newContext(); + const page = await browserContext.newPage(); + await page.goto(url, { waitUntil: 'networkidle' }); + dispose.add(() => browser.close()); + return page; +} diff --git a/tsconfig.json b/tsconfig.json index 12f2f4e449..e88afa6e3c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -45,6 +45,8 @@ { "path": "./packages/webpack-plugin/src" }, { "path": "./packages/webpack-plugin/test" }, { "path": "./packages/esbuild/src" }, - { "path": "./packages/esbuild/test" } + { "path": "./packages/esbuild/test" }, + { "path": "./packages/vite/src" }, + { "path": "./packages/vite/test" } ] } From 2cca2927f138a0909860082c1d0b79c6f4575810 Mon Sep 17 00:00:00 2001 From: Tom Raviv Date: Tue, 2 Jan 2024 16:27:21 +0200 Subject: [PATCH 2/5] chore(deps): update deps for vite package --- package-lock.json | 665 ++++++++++++++++++++++++++++-- packages/vite/package.json | 20 +- packages/vite/src/plugin-utils.ts | 153 +++---- 3 files changed, 724 insertions(+), 114 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9681b2c021..f0e8fa4333 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6838,14 +6838,14 @@ "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, "node_modules/vite": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz", - "integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "peer": true, "dependencies": { - "esbuild": "^0.17.5", - "postcss": "^8.4.23", - "rollup": "^3.21.0" + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" }, "bin": { "vite": "bin/vite.js" @@ -6853,12 +6853,16 @@ "engines": { "node": "^14.18.0 || >=16.0.0" }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@types/node": ">= 14", "less": "*", + "lightningcss": "^1.21.0", "sass": "*", "stylus": "*", "sugarss": "*", @@ -6871,6 +6875,9 @@ "less": { "optional": true }, + "lightningcss": { + "optional": true + }, "sass": { "optional": true }, @@ -6885,6 +6892,411 @@ } } }, + "node_modules/vite/node_modules/@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/vite/node_modules/esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "hasInstallScript": true, + "peer": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, + "node_modules/vite/node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "peer": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/vlq": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz", @@ -7521,23 +7933,23 @@ }, "packages/vite": { "name": "@stylable/vite", - "version": "5.11.0", + "version": "5.17.0", "license": "MIT", "dependencies": { - "@stylable/build-tools": "^5.11.0", - "@stylable/cli": "^5.11.0", - "@stylable/core": "^5.11.0", - "@stylable/node": "^5.11.0", - "@stylable/optimizer": "^5.11.0", - "@stylable/runtime": "^5.11.0", - "decache": "^4.6.1", + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", "mime": "^3.0.0" }, "engines": { - "node": ">=14.14.0" + "node": ">=16" }, "peerDependencies": { - "vite": "^4.3.5" + "vite": "^4.5.1" } }, "packages/vite-plugin-stylable": { @@ -8339,13 +8751,13 @@ "@stylable/vite": { "version": "file:packages/vite", "requires": { - "@stylable/build-tools": "^5.11.0", - "@stylable/cli": "^5.11.0", - "@stylable/core": "^5.11.0", - "@stylable/node": "^5.11.0", - "@stylable/optimizer": "^5.11.0", - "@stylable/runtime": "^5.11.0", - "decache": "^4.6.1", + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", "mime": "^3.0.0" } }, @@ -12502,15 +12914,210 @@ "integrity": "sha512-oWOptgqBs948A3V9TmAUcVFvb0dJgmeHrcIcWq4rqtmCfaRs93t0+DfJu90V5n3drN0CKBYm4BTi9yvWyKXA+g==" }, "vite": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.5.tgz", - "integrity": "sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz", + "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==", "peer": true, "requires": { - "esbuild": "^0.17.5", + "esbuild": "^0.18.10", "fsevents": "~2.3.2", - "postcss": "^8.4.23", - "rollup": "^3.21.0" + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "dependencies": { + "@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "optional": true, + "peer": true + }, + "@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "optional": true, + "peer": true + }, + "@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "optional": true, + "peer": true + }, + "@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "optional": true, + "peer": true + }, + "@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "optional": true, + "peer": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "optional": true, + "peer": true + }, + "@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "optional": true, + "peer": true + }, + "@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "optional": true, + "peer": true + }, + "@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "optional": true, + "peer": true + }, + "@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "optional": true, + "peer": true + }, + "@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "optional": true, + "peer": true + }, + "@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "optional": true, + "peer": true + }, + "@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "optional": true, + "peer": true + }, + "@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "optional": true, + "peer": true + }, + "@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "optional": true, + "peer": true + }, + "@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "optional": true, + "peer": true + }, + "@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "optional": true, + "peer": true + }, + "@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "optional": true, + "peer": true + }, + "esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "peer": true, + "requires": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, + "rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "peer": true, + "requires": { + "fsevents": "~2.3.2" + } + } } }, "vlq": { diff --git a/packages/vite/package.json b/packages/vite/package.json index 546ea9e6ee..3c4b6ffcd3 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -1,22 +1,22 @@ { "name": "@stylable/vite", - "version": "5.11.0", + "version": "5.17.0", "description": "Stylable plugin for Vite", "main": "dist/index.js", "scripts": { "test": "mocha \"dist/test/**/*.spec.js\"" }, "peerDependencies": { - "vite": "^4.3.5" + "vite": "^4.5.1" }, "dependencies": { - "@stylable/build-tools": "^5.11.0", - "@stylable/cli": "^5.11.0", - "@stylable/core": "^5.11.0", - "@stylable/node": "^5.11.0", - "@stylable/optimizer": "^5.11.0", - "@stylable/runtime": "^5.11.0", - "decache": "^4.6.1", + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", "mime": "^3.0.0" }, "files": [ @@ -27,7 +27,7 @@ "!*/tsconfig.{json,tsbuildinfo}" ], "engines": { - "node": ">=14.14.0" + "node": ">=16" }, "publishConfig": { "access": "public" diff --git a/packages/vite/src/plugin-utils.ts b/packages/vite/src/plugin-utils.ts index c62841a2b9..18cc3d5110 100644 --- a/packages/vite/src/plugin-utils.ts +++ b/packages/vite/src/plugin-utils.ts @@ -5,19 +5,29 @@ import fs from 'fs'; import { basename, extname, isAbsolute, join } from 'path'; import { createHash } from 'crypto'; import mime from 'mime'; -import type { PluginContext } from 'rollup'; +import type { Plugin } from 'vite'; import type { StylableVitePluginOptions } from './index'; +type ObjectHook = T | ({ handler: T; order?: 'pre' | 'post' | null } & O); +type GetThisParameters any> = T extends ( + this: infer P, + ...args: any +) => any + ? P + : never; +type VitePluginTransfrom = GetThisParameters< + Plugin['transform'] extends ObjectHook ? NonNullable : false +>; export function generateStylableModuleCode( - id: string, - meta: StylableMeta, - exports: StylableExports, - moduleImports: string[] + id: string, + meta: StylableMeta, + exports: StylableExports, + moduleImports: string[] ) { - const [idWithoutQuery, query] = id.split('?'); - return ` + const [idWithoutQuery, query] = id.split('?'); + return ` import { classesRuntime, statesRuntime } from '@stylable/runtime/esm/pure'; ${moduleImports.join('\n')} @@ -36,86 +46,79 @@ export function generateStylableModuleCode( } export function generateCssString( - meta: StylableMeta, - minify: boolean, - stylable: Stylable, - assetsIds: string[] + meta: StylableMeta, + minify: boolean, + stylable: Stylable, + assetsIds: string[] ) { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const css = meta - .targetAst!.toString() - .replace( - /__stylable_url_asset_(.*?)__/g, - (_$0, $1) => assetsIds[Number($1)] - ); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const css = meta + .targetAst!.toString() + .replace(/__stylable_url_asset_(.*?)__/g, (_$0, $1) => assetsIds[Number($1)]); - if (minify && stylable.optimizer) { - return stylable.optimizer.minifyCSS(css); - } - return css; + if (minify && stylable.optimizer) { + return stylable.optimizer.minifyCSS(css); + } + return css; } export function emitAssets( - ctx: PluginContext, - stylable: Stylable, - meta: StylableMeta, - emittedAssets: Map, - inlineAssets: StylableVitePluginOptions['inlineAssets'] + ctx: VitePluginTransfrom, + stylable: Stylable, + meta: StylableMeta, + emittedAssets: Map, + inlineAssets: StylableVitePluginOptions['inlineAssets'] ): string[] { - const assets = processUrlDependencies({ - meta, - rootContext: stylable.projectRoot, - host: { - isAbsolute, - join, - }, - }); - const assetsIds: string[] = []; - for (const asset of assets) { - const fileBuffer = fs.readFileSync(asset); - const shouldInline = - typeof inlineAssets === 'function' - ? inlineAssets(asset, fileBuffer) - : inlineAssets; - - if (shouldInline) { - const mimeType = mime.getType(extname(asset)); - assetsIds.push( - `data:${mimeType};base64,${fileBuffer.toString('base64')}` - ); - } else { - const name = basename(asset); - let hash = emittedAssets.get(asset); - if (hash) { - assetsIds.push(`${hash}_${name}`); - } else { + const assets = processUrlDependencies({ + meta, + rootContext: stylable.projectRoot, + host: { + isAbsolute, + join, + }, + }); + const assetsIds: string[] = []; + for (const asset of assets) { const fileBuffer = fs.readFileSync(asset); - hash = createHash('sha1').update(fileBuffer).digest('hex'); - const fileName = `${hash}_${name}`; - if (emittedAssets.has(fileName)) { - assetsIds.push(fileName); + const shouldInline = + typeof inlineAssets === 'function' ? inlineAssets(asset, fileBuffer) : inlineAssets; + + if (shouldInline) { + const mimeType = mime.getType(extname(asset)); + assetsIds.push(`data:${mimeType};base64,${fileBuffer.toString('base64')}`); } else { - emittedAssets.set(fileName, hash); - emittedAssets.set(asset, hash); - assetsIds.push(fileName); - ctx.emitFile({ - type: 'asset', - fileName, - source: fileBuffer, - }); + const name = basename(asset); + let hash = emittedAssets.get(asset); + if (hash) { + assetsIds.push(`${hash}_${name}`); + } else { + const fileBuffer = fs.readFileSync(asset); + hash = createHash('sha1').update(fileBuffer).digest('hex'); + const fileName = `${hash}_${name}`; + if (emittedAssets.has(fileName)) { + assetsIds.push(fileName); + } else { + emittedAssets.set(fileName, hash); + emittedAssets.set(asset, hash); + assetsIds.push(fileName); + ctx.emitFile({ + type: 'asset', + fileName, + source: fileBuffer, + }); + } + } } - } } - } - return assetsIds; + return assetsIds; } export function getDefaultMode(): 'development' | 'production' { - if (process.env.NODE_ENV === 'production') { + if (process.env.NODE_ENV === 'production') { + return 'production'; + } + if (process.env.ROLLUP_WATCH) { + return 'development'; + } return 'production'; - } - if (process.env.ROLLUP_WATCH) { - return 'development'; - } - return 'production'; } From d169769863c034d7900c6240ed5aa3e55dbadf27 Mon Sep 17 00:00:00 2001 From: Tom Raviv Date: Tue, 2 Jan 2024 18:07:13 +0200 Subject: [PATCH 3/5] chore: rename vite plugin to "@stylable/vite-plugin" --- package-lock.json | 29 ++++++++++++++++--- packages/{vite => vite-plugin}/package.json | 4 +-- packages/{vite => vite-plugin}/src/index.ts | 0 .../{vite => vite-plugin}/src/plugin-utils.ts | 0 .../{vite => vite-plugin}/src/tsconfig.json | 0 .../test/fixtures/vite-app/index.html | 0 .../test/fixtures/vite-app/src/main.js | 0 .../test/fixtures/vite-app/src/stuff.st.css | 0 .../{vite => vite-plugin}/test/tsconfig.json | 0 .../test/vite-build.spec.ts | 6 ++-- .../test/vite-dev.spec.ts | 6 ++-- tsconfig.json | 4 +-- 12 files changed, 37 insertions(+), 12 deletions(-) rename packages/{vite => vite-plugin}/package.json (94%) rename packages/{vite => vite-plugin}/src/index.ts (100%) rename packages/{vite => vite-plugin}/src/plugin-utils.ts (100%) rename packages/{vite => vite-plugin}/src/tsconfig.json (100%) rename packages/{vite => vite-plugin}/test/fixtures/vite-app/index.html (100%) rename packages/{vite => vite-plugin}/test/fixtures/vite-app/src/main.js (100%) rename packages/{vite => vite-plugin}/test/fixtures/vite-app/src/stuff.st.css (100%) rename packages/{vite => vite-plugin}/test/tsconfig.json (100%) rename packages/{vite => vite-plugin}/test/vite-build.spec.ts (93%) rename packages/{vite => vite-plugin}/test/vite-dev.spec.ts (93%) diff --git a/package-lock.json b/package-lock.json index f0e8fa4333..3bcbd2d5b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1086,8 +1086,8 @@ "resolved": "packages/uni-driver", "link": true }, - "node_modules/@stylable/vite": { - "resolved": "packages/vite", + "node_modules/@stylable/vite-plugin": { + "resolved": "packages/vite-plugin", "link": true }, "node_modules/@stylable/webpack-extensions": { @@ -7933,6 +7933,27 @@ }, "packages/vite": { "name": "@stylable/vite", + "version": "5.17.0", + "extraneous": true, + "license": "MIT", + "dependencies": { + "@stylable/build-tools": "^5.17.0", + "@stylable/cli": "^5.17.0", + "@stylable/core": "^5.17.0", + "@stylable/node": "^5.17.0", + "@stylable/optimizer": "^5.17.0", + "@stylable/runtime": "^5.17.0", + "decache": "^4.6.2", + "mime": "^3.0.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "vite": "^4.5.1" + } + }, + "packages/vite-plugin": { "version": "5.17.0", "license": "MIT", "dependencies": { @@ -8748,8 +8769,8 @@ "@stylable/uni-driver": { "version": "file:packages/uni-driver" }, - "@stylable/vite": { - "version": "file:packages/vite", + "@stylable/vite-plugin": { + "version": "file:packages/vite-plugin", "requires": { "@stylable/build-tools": "^5.17.0", "@stylable/cli": "^5.17.0", diff --git a/packages/vite/package.json b/packages/vite-plugin/package.json similarity index 94% rename from packages/vite/package.json rename to packages/vite-plugin/package.json index 3c4b6ffcd3..8a4509f8be 100644 --- a/packages/vite/package.json +++ b/packages/vite-plugin/package.json @@ -1,5 +1,5 @@ { - "name": "@stylable/vite", + "name": "@stylable/vite-plugin", "version": "5.17.0", "description": "Stylable plugin for Vite", "main": "dist/index.js", @@ -39,7 +39,7 @@ "vite-plugin", "Stylable" ], - "repository": "https://github.com/wix/stylable/tree/master/packages/vite", + "repository": "https://github.com/wix/stylable/tree/master/packages/vite-plugin", "author": "Wix.com", "license": "MIT" } diff --git a/packages/vite/src/index.ts b/packages/vite-plugin/src/index.ts similarity index 100% rename from packages/vite/src/index.ts rename to packages/vite-plugin/src/index.ts diff --git a/packages/vite/src/plugin-utils.ts b/packages/vite-plugin/src/plugin-utils.ts similarity index 100% rename from packages/vite/src/plugin-utils.ts rename to packages/vite-plugin/src/plugin-utils.ts diff --git a/packages/vite/src/tsconfig.json b/packages/vite-plugin/src/tsconfig.json similarity index 100% rename from packages/vite/src/tsconfig.json rename to packages/vite-plugin/src/tsconfig.json diff --git a/packages/vite/test/fixtures/vite-app/index.html b/packages/vite-plugin/test/fixtures/vite-app/index.html similarity index 100% rename from packages/vite/test/fixtures/vite-app/index.html rename to packages/vite-plugin/test/fixtures/vite-app/index.html diff --git a/packages/vite/test/fixtures/vite-app/src/main.js b/packages/vite-plugin/test/fixtures/vite-app/src/main.js similarity index 100% rename from packages/vite/test/fixtures/vite-app/src/main.js rename to packages/vite-plugin/test/fixtures/vite-app/src/main.js diff --git a/packages/vite/test/fixtures/vite-app/src/stuff.st.css b/packages/vite-plugin/test/fixtures/vite-app/src/stuff.st.css similarity index 100% rename from packages/vite/test/fixtures/vite-app/src/stuff.st.css rename to packages/vite-plugin/test/fixtures/vite-app/src/stuff.st.css diff --git a/packages/vite/test/tsconfig.json b/packages/vite-plugin/test/tsconfig.json similarity index 100% rename from packages/vite/test/tsconfig.json rename to packages/vite-plugin/test/tsconfig.json diff --git a/packages/vite/test/vite-build.spec.ts b/packages/vite-plugin/test/vite-build.spec.ts similarity index 93% rename from packages/vite/test/vite-build.spec.ts rename to packages/vite-plugin/test/vite-build.spec.ts index 0f23d3d0d5..def3fb4c76 100644 --- a/packages/vite/test/vite-build.spec.ts +++ b/packages/vite-plugin/test/vite-build.spec.ts @@ -1,11 +1,13 @@ import { dirname } from 'path'; import { expect } from 'chai'; import { type UserConfig as ViteConfig, build, preview } from 'vite'; -import { viteStylable } from '@stylable/vite'; +import { viteStylable } from '@stylable/vite-plugin'; import playwright from 'playwright-core'; const project = 'vite-app'; -const projectDir = dirname(require.resolve(`@stylable/vite/test/fixtures/${project}/index.html`)); +const projectDir = dirname( + require.resolve(`@stylable/vite-plugin/test/fixtures/${project}/index.html`) +); const viteConfig: ViteConfig = { root: projectDir, diff --git a/packages/vite/test/vite-dev.spec.ts b/packages/vite-plugin/test/vite-dev.spec.ts similarity index 93% rename from packages/vite/test/vite-dev.spec.ts rename to packages/vite-plugin/test/vite-dev.spec.ts index aac750ff91..661639a0df 100644 --- a/packages/vite/test/vite-dev.spec.ts +++ b/packages/vite-plugin/test/vite-dev.spec.ts @@ -2,11 +2,13 @@ import { dirname } from 'path'; import { expect } from 'chai'; import type { UserConfig as ViteConfig } from 'vite'; import { createServer } from 'vite'; -import { viteStylable } from '@stylable/vite'; +import { viteStylable } from '@stylable/vite-plugin'; import playwright from 'playwright-core'; const project = 'vite-app'; -const projectDir = dirname(require.resolve(`@stylable/vite/test/fixtures/${project}/index.html`)); +const projectDir = dirname( + require.resolve(`@stylable/vite-plugin/test/fixtures/${project}/index.html`) +); const viteConfig: ViteConfig = { root: projectDir, diff --git a/tsconfig.json b/tsconfig.json index e88afa6e3c..fa51007bc8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -46,7 +46,7 @@ { "path": "./packages/webpack-plugin/test" }, { "path": "./packages/esbuild/src" }, { "path": "./packages/esbuild/test" }, - { "path": "./packages/vite/src" }, - { "path": "./packages/vite/test" } + { "path": "./packages/vite-plugin/src" }, + { "path": "./packages/vite-plugin/test" } ] } From af4f1e349bee010ef09224fb7f6ccbd671e583af Mon Sep 17 00:00:00 2001 From: Tom Raviv Date: Tue, 2 Jan 2024 18:13:56 +0200 Subject: [PATCH 4/5] docs: add vite-plugin to readmes --- README.md | 1 + packages/vite-plugin/README.md | 55 ++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 packages/vite-plugin/README.md diff --git a/README.md b/README.md index c312eea85d..3332a6030d 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ This repository is a `mono-repo` containing multiple `packages` that together co | [webpack-plugin](./packages/webpack-plugin) | `@stylable/webpack-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/webpack-plugin.svg)](https://www.npmjs.com/package/@stylable/webpack-plugin) | `webpack` (`^5.30.0`) integration plugin | | [experimental-loader](./packages/experimental-loader) | `@stylable/experimental-loader` | [![npm version](https://img.shields.io/npm/v/@stylable/experimental-loader.svg)](https://www.npmjs.com/package/@stylable/experimental-loader) | experimental `webpack` loader - not recommended for production use | | [rollup-plugin](./packages/rollup-plugin) | `@stylable/rollup-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/rollup-plugin) | Rollup (`v2.x`) integration plugin | +| [vite-plugin](./packages/vite-plugin) | `@stylable/vite-plugin` | [![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) | Vite (`v4.x`) integration plugin | | [esbuild](./packages/esbuild) | `@stylable/esbuild` | [![npm version](https://img.shields.io/npm/v/@stylable/rollup-plugin.svg)](https://www.npmjs.com/package/@stylable/esbuild) | esbuild integration plugin | ### Test-kits diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md new file mode 100644 index 0000000000..13e85457b6 --- /dev/null +++ b/packages/vite-plugin/README.md @@ -0,0 +1,55 @@ + +# @stylable/vite-plugin + +[![npm version](https://img.shields.io/npm/v/@stylable/vite-plugin.svg)](https://www.npmjs.com/package/@stylable/vite-plugin) + +### Installation + +`npm i @stylable/vite-plugin -D` + +or + +`yarn add @stylable/vite-plugin --dev` + +### Example Usage +```js +// vite.config.js +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { viteStylable } from '@stylable/vite'; + +export default defineConfig({ + plugins: [react(), viteStylable({})], +}); + + +``` +> If you use any other vite CSS plugins you should exclude Stylable files (`*.st.css`) from them. + + +### Plugin Options + +```ts +export interface StylableVitePluginOptions { + optimization?: { + minify?: boolean; + }; + inlineAssets?: boolean | ((filepath: string, buffer: Buffer) => boolean); + fileName?: string; + mode?: 'development' | 'production'; + diagnosticsMode?: DiagnosticsMode; + resolveNamespace?: typeof resolveNamespaceNode; + /** + * Runs "stc" programmatically with the webpack compilation. + * true - it will automatically detect the closest "stylable.config.js" file and use it. + * string - it will use the provided string as the "stcConfig" file path. + */ + stcConfig?: boolean | string; + projectRoot?: string; +} +``` + +> This package provides a **naive** Stylable vite plugin. It is in early development stages and may not behave expectedly in all cases. Please open a PR/issue if you encounter any problems. + +## License +Copyright (c) 2024 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by an [MIT license](./LICENSE). From 81e723a6630a77aae3f0e31d116a8dbdab85e88c Mon Sep 17 00:00:00 2001 From: Tom Raviv Date: Wed, 3 Jan 2024 14:18:43 +0200 Subject: [PATCH 5/5] add license file --- packages/vite-plugin/LICENSE | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 packages/vite-plugin/LICENSE diff --git a/packages/vite-plugin/LICENSE b/packages/vite-plugin/LICENSE new file mode 100644 index 0000000000..f362f7732d --- /dev/null +++ b/packages/vite-plugin/LICENSE @@ -0,0 +1,9 @@ +MIT License + +Copyright 2024 Wix.com + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.