From a9c5cb768ad10bd25dd1a31041733fc96cd467a0 Mon Sep 17 00:00:00 2001 From: Ben Jervis Date: Wed, 13 Oct 2021 10:33:14 +1100 Subject: [PATCH] Update browser runtime (#409) --- .changeset/chilled-goats-fold.md | 9 ++ .changeset/khaki-taxis-tell.md | 10 ++ .changeset/polite-rings-nail.md | 9 ++ .changeset/pretty-carrots-drive.md | 10 ++ .changeset/strong-zebras-prove.md | 10 ++ .changeset/tiny-baboons-roll.md | 7 ++ packages/babel-plugin/src/index.ts | 4 +- packages/css/injectStyles/package.json | 8 ++ packages/css/package.json | 9 +- packages/css/src/fileScope.ts | 4 +- packages/css/src/injectStyles.ts | 30 ++++++ packages/css/src/runtimeAdapter.ts | 46 +-------- packages/css/src/style.ts | 4 +- packages/css/src/validateSelector.ts | 4 +- packages/integration/package.json | 5 +- packages/integration/src/index.ts | 6 +- .../integration/src/processVanillaFile.ts | 19 +++- packages/vite-plugin/package.json | 3 +- packages/vite-plugin/src/index.ts | 94 +++++++++++++------ site/package.json | 3 +- site/src/HomePage/HomePage.tsx | 14 +-- test-helpers/src/startFixture/vite.ts | 3 - yarn.lock | 31 +++--- 23 files changed, 219 insertions(+), 123 deletions(-) create mode 100644 .changeset/chilled-goats-fold.md create mode 100644 .changeset/khaki-taxis-tell.md create mode 100644 .changeset/polite-rings-nail.md create mode 100644 .changeset/pretty-carrots-drive.md create mode 100644 .changeset/strong-zebras-prove.md create mode 100644 .changeset/tiny-baboons-roll.md create mode 100644 packages/css/injectStyles/package.json create mode 100644 packages/css/src/injectStyles.ts diff --git a/.changeset/chilled-goats-fold.md b/.changeset/chilled-goats-fold.md new file mode 100644 index 000000000..7f97de0b8 --- /dev/null +++ b/.changeset/chilled-goats-fold.md @@ -0,0 +1,9 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Fix plugin for watch mode. + +The vite plugin previously relied on a one to one matching of resolve to load calls, and would clean up the CSS stored in memory after it was loaded. + +This isn't true in `--watch` mode, as the same file can be loaded on the rebuild without having to be resolved, which the plugin now handles. \ No newline at end of file diff --git a/.changeset/khaki-taxis-tell.md b/.changeset/khaki-taxis-tell.md new file mode 100644 index 000000000..407a7a776 --- /dev/null +++ b/.changeset/khaki-taxis-tell.md @@ -0,0 +1,10 @@ +--- +'@vanilla-extract/css': patch +--- + +Improve the browser runtime dev experience. + +The vanilla browser runtime now creates style tags containing the CSS itself, rather than injecting it directly into the CSSOM. + +This helps with debugability, as the generated CSS can actually be seen in the devtools. +There are also some new attributes set on the style tags, making it easier to identify the source of each style. diff --git a/.changeset/polite-rings-nail.md b/.changeset/polite-rings-nail.md new file mode 100644 index 000000000..5a0e5bdbc --- /dev/null +++ b/.changeset/polite-rings-nail.md @@ -0,0 +1,9 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Update the "vanilla-extract" devStyleRuntime option. + +When using the vanilla browser runtime in vite, it now operates on a new model where a .css.js file is generated, that uses @vanilla-extract/css/injectStyles to add the css to the browser. + +This allows for hot reloading of styles, and makes styles a bit easier to debug at dev time (because they're actually visible). diff --git a/.changeset/pretty-carrots-drive.md b/.changeset/pretty-carrots-drive.md new file mode 100644 index 000000000..283cfed82 --- /dev/null +++ b/.changeset/pretty-carrots-drive.md @@ -0,0 +1,10 @@ +--- +'@vanilla-extract/babel-plugin': patch +'@vanilla-extract/vite-plugin': patch +--- + +Handle vite 2.6. + +As of vite 2.6 and greater, `?used` gets appended to css imports, which causes the file imports to be not what we expected. + +This caused mismatching classnames in the vite plugin, and it caused the babel plugin to not add filescopes when it should have. diff --git a/.changeset/strong-zebras-prove.md b/.changeset/strong-zebras-prove.md new file mode 100644 index 000000000..9c2817a0c --- /dev/null +++ b/.changeset/strong-zebras-prove.md @@ -0,0 +1,10 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Automatically optimize deps. + +When using the new vanilla browser runtime, the new `injectStyles` dependency gets injected at runtime, so vite can't discover it ahead of time and pre-bundle it. + +The plugin will now add the dependency to optimizeDeps if the vanilla runtime is being used so that it's optimized up front. +It also ensures that some relevant vanilla packages are externalised in SSR mode. \ No newline at end of file diff --git a/.changeset/tiny-baboons-roll.md b/.changeset/tiny-baboons-roll.md new file mode 100644 index 000000000..f351cfcba --- /dev/null +++ b/.changeset/tiny-baboons-roll.md @@ -0,0 +1,7 @@ +--- +'@vanilla-extract/integration': patch +--- + +Export the fileScope functions. + +`stringifyFileScope` and `parseFileScope` are now exported to be used in other packages. \ No newline at end of file diff --git a/packages/babel-plugin/src/index.ts b/packages/babel-plugin/src/index.ts index 80e94f589..b2452c81c 100644 --- a/packages/babel-plugin/src/index.ts +++ b/packages/babel-plugin/src/index.ts @@ -1,7 +1,7 @@ import { relative, posix, sep } from 'path'; import { types as t, PluginObj, PluginPass, NodePath } from '@babel/core'; import template from '@babel/template'; -import { getPackageInfo } from '@vanilla-extract/integration'; +import { cssFileFilter, getPackageInfo } from '@vanilla-extract/integration'; const packageIdentifiers = new Set([ '@vanilla-extract/css', @@ -183,7 +183,7 @@ export default function (): PluginObj { } this.isESM = false; - this.isCssFile = /\.css\.(js|ts|jsx|tsx)$/.test(opts.filename); + this.isCssFile = cssFileFilter.test(opts.filename); this.alreadyCompiled = false; this.importIdentifiers = new Map(); diff --git a/packages/css/injectStyles/package.json b/packages/css/injectStyles/package.json new file mode 100644 index 000000000..1d5f33f6f --- /dev/null +++ b/packages/css/injectStyles/package.json @@ -0,0 +1,8 @@ +{ + "main": "dist/vanilla-extract-css-injectStyles.cjs.js", + "module": "dist/vanilla-extract-css-injectStyles.esm.js", + "browser": { + "./dist/vanilla-extract-css-injectStyles.cjs.js": "./dist/vanilla-extract-css-injectStyles.browser.cjs.js", + "./dist/vanilla-extract-css-injectStyles.esm.js": "./dist/vanilla-extract-css-injectStyles.browser.esm.js" + } +} diff --git a/packages/css/package.json b/packages/css/package.json index 1532bdeaa..46db5e145 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -17,6 +17,7 @@ "adapter.ts", "transformCss.ts", "fileScope.ts", + "injectStyles.ts", "disableRuntimeStyles.ts" ] }, @@ -27,6 +28,7 @@ "/adapter", "/transformCss", "/fileScope", + "/injectStyles", "/disableRuntimeStyles" ], "repository": { @@ -43,12 +45,11 @@ "css-what": "^5.0.1", "cssesc": "^3.0.0", "csstype": "^3.0.7", - "dedent": "^0.7.0", "deep-object-diff": "^1.1.0", - "deepmerge": "^4.2.2" + "deepmerge": "^4.2.2", + "outdent": "^0.8.0" }, "devDependencies": { - "@types/cssesc": "^3.0.0", - "@types/dedent": "^0.7.0" + "@types/cssesc": "^3.0.0" } } diff --git a/packages/css/src/fileScope.ts b/packages/css/src/fileScope.ts index ed9618207..ad498657d 100644 --- a/packages/css/src/fileScope.ts +++ b/packages/css/src/fileScope.ts @@ -1,4 +1,4 @@ -import dedent from 'dedent'; +import outdent from 'outdent'; import { onEndFileScope } from './adapter'; import type { FileScope } from './types'; @@ -27,7 +27,7 @@ export function hasFileScope() { export function getFileScope(): FileScope { if (fileScopes.length === 0) { throw new Error( - dedent` + outdent` Styles were unable to be assigned to a file. This is generally caused by one of the following: - You may have created styles outside of a '.css.ts' context diff --git a/packages/css/src/injectStyles.ts b/packages/css/src/injectStyles.ts new file mode 100644 index 000000000..774e6a29a --- /dev/null +++ b/packages/css/src/injectStyles.ts @@ -0,0 +1,30 @@ +import type { FileScope } from './types'; + +const stylesheets: Record = {}; + +interface InjectStylesOptions { + fileScope: FileScope; + css: string; +} +export const injectStyles = ({ fileScope, css }: InjectStylesOptions) => { + const fileScopeId = fileScope.packageName + ? [fileScope.packageName, fileScope.filePath].join('/') + : fileScope.filePath; + + let stylesheet = stylesheets[fileScopeId]; + + if (!stylesheet) { + const styleEl = document.createElement('style'); + + if (fileScope.packageName) { + styleEl.setAttribute('data-package', fileScope.packageName); + } + + styleEl.setAttribute('data-file', fileScope.filePath); + styleEl.setAttribute('type', 'text/css'); + stylesheet = stylesheets[fileScopeId] = styleEl; + document.head.appendChild(styleEl); + } + + stylesheet.innerHTML = css; +}; diff --git a/packages/css/src/runtimeAdapter.ts b/packages/css/src/runtimeAdapter.ts index 7e0b93878..6a19a838f 100644 --- a/packages/css/src/runtimeAdapter.ts +++ b/packages/css/src/runtimeAdapter.ts @@ -1,29 +1,12 @@ -import type { Adapter, Composition, CSS, FileScope } from './types'; +import type { Adapter, Composition, CSS } from './types'; +import { injectStyles } from './injectStyles'; import { transformCss } from './transformCss'; import { setAdapterIfNotSet } from './adapter'; -const stylesheets: Record = {}; - const localClassNames = new Set(); const composedClassLists: Array = []; let bufferedCSSObjs: Array = []; -function getStylesheet({ packageName, filePath }: FileScope) { - const fileScopeId = packageName ? `${packageName}${filePath}` : filePath; - if (stylesheets[fileScopeId]) { - return stylesheets[fileScopeId]; - } - const styleEl = document.createElement('style'); - document.head.appendChild(styleEl); - - if (!styleEl.sheet) { - throw new Error(`Couldn't create stylesheet`); - } - stylesheets[fileScopeId] = styleEl.sheet; - - return styleEl.sheet; -} - const browserRuntimeAdapter: Adapter = { appendCss: (cssObj: CSS) => { bufferedCSSObjs.push(cssObj); @@ -40,30 +23,9 @@ const browserRuntimeAdapter: Adapter = { localClassNames: Array.from(localClassNames), composedClassLists, cssObjs: bufferedCSSObjs, - }); - const stylesheet = getStylesheet(fileScope); - const existingRuleCount = stylesheet.cssRules.length; - - let ruleIndex = 0; - - for (const rule of css) { - try { - if (ruleIndex < existingRuleCount) { - stylesheet.deleteRule(ruleIndex); - } - stylesheet.insertRule(rule, ruleIndex++); - } catch (e) { - console.warn(`Failed to insert rule\n${rule}`); - - // insert placeholder rule to keep index count correct - stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1); - } - } + }).join('\n'); - // Delete remaining rules - while (ruleIndex < existingRuleCount) { - stylesheet.deleteRule(ruleIndex++); - } + injectStyles({ fileScope, css }); bufferedCSSObjs = []; }, diff --git a/packages/css/src/style.ts b/packages/css/src/style.ts index 25c305199..6cb66743a 100644 --- a/packages/css/src/style.ts +++ b/packages/css/src/style.ts @@ -1,5 +1,5 @@ import cssesc from 'cssesc'; -import dedent from 'dedent'; +import outdent from 'outdent'; import deepmerge from 'deepmerge'; import type { @@ -97,7 +97,7 @@ export function fontFace(rule: FontFaceRule, debugId?: string) { if ('fontFamily' in rule) { throw new Error( - dedent` + outdent` This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided. If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead. diff --git a/packages/css/src/validateSelector.ts b/packages/css/src/validateSelector.ts index 0809e8c65..9662dead6 100644 --- a/packages/css/src/validateSelector.ts +++ b/packages/css/src/validateSelector.ts @@ -1,6 +1,6 @@ import { parse } from 'css-what'; import cssesc from 'cssesc'; -import dedent from 'dedent'; +import outdent from 'outdent'; // https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript function escapeRegex(string: string) { @@ -53,7 +53,7 @@ export const validateSelector = (selector: string, targetClassName: string) => { } } catch (err) { throw new Error( - dedent` + outdent` Invalid selector: ${replaceTarget()} Style selectors must target the '&' character (along with any modifiers), e.g. ${'`${parent} &`'} or ${'`${parent} &:hover`'}. diff --git a/packages/integration/package.json b/packages/integration/package.json index 4dff61bc3..f8f2a756d 100644 --- a/packages/integration/package.json +++ b/packages/integration/package.json @@ -16,15 +16,14 @@ "dependencies": { "@vanilla-extract/css": "^1.5.0", "chalk": "^4.1.1", - "dedent": "^0.7.0", "esbuild": "^0.11.16", "eval": "^0.1.6", "find-up": "^5.0.0", "javascript-stringify": "^2.0.1", - "lodash": "^4.17.21" + "lodash": "^4.17.21", + "outdent": "^0.8.0" }, "devDependencies": { - "@types/dedent": "^0.7.0", "@types/lodash": "^4.14.168" } } diff --git a/packages/integration/src/index.ts b/packages/integration/src/index.ts index d80e814ef..44f949f3d 100644 --- a/packages/integration/src/index.ts +++ b/packages/integration/src/index.ts @@ -1,4 +1,8 @@ -export { processVanillaFile } from './processVanillaFile'; +export { + processVanillaFile, + parseFileScope, + stringifyFileScope, +} from './processVanillaFile'; export { getSourceFromVirtualCssFile } from './virtualFile'; export { getPackageInfo } from './packageInfo'; export { compile, vanillaExtractFilescopePlugin } from './compile'; diff --git a/packages/integration/src/processVanillaFile.ts b/packages/integration/src/processVanillaFile.ts index f49144f33..b8afcd4ad 100644 --- a/packages/integration/src/processVanillaFile.ts +++ b/packages/integration/src/processVanillaFile.ts @@ -4,16 +4,19 @@ import { transformCss } from '@vanilla-extract/css/transformCss'; import evalCode from 'eval'; import { stringify } from 'javascript-stringify'; import isPlainObject from 'lodash/isPlainObject'; -import dedent from 'dedent'; +import outdent from 'outdent'; import { hash } from './hash'; const originalNodeEnv = process.env.NODE_ENV; -function stringifyFileScope({ packageName, filePath }: FileScope): string { +export function stringifyFileScope({ + packageName, + filePath, +}: FileScope): string { return packageName ? `${filePath}$$$${packageName}` : filePath; } -function parseFileScope(serialisedFileScope: string): FileScope { +export function parseFileScope(serialisedFileScope: string): FileScope { const [filePath, packageName] = serialisedFileScope.split('$$$'); return { @@ -33,6 +36,7 @@ interface ProcessVanillaFileOptions { fileName: string; base64Source: string; fileScope: FileScope; + source: string; }) => string; } export function processVanillaFile({ @@ -113,7 +117,12 @@ export function processVanillaFile({ }.vanilla.css`; const virtualCssFilePath = serializeVirtualCssPath - ? serializeVirtualCssPath({ fileName, base64Source, fileScope }) + ? serializeVirtualCssPath({ + fileName, + base64Source, + fileScope, + source: css, + }) : `import '${fileName}?source=${base64Source}';`; cssImports.push(virtualCssFilePath); @@ -210,7 +219,7 @@ function stringifyExports( } } - throw new Error(dedent` + throw new Error(outdent` Invalid exports. You can only export plain objects, arrays, strings, numbers and null/undefined. diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index eb4ed1f0d..92905ffe4 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -15,7 +15,8 @@ "author": "SEEK", "license": "MIT", "dependencies": { - "@vanilla-extract/integration": "^1.4.2" + "@vanilla-extract/integration": "^1.4.2", + "outdent": "^0.8.0" }, "devDependencies": { "vite": "^2.6.0" diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index d0e9268d9..88a93d179 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -1,16 +1,17 @@ import path from 'path'; import type { Plugin, ResolvedConfig } from 'vite'; import { normalizePath } from 'vite'; +import outdent from 'outdent'; import { cssFileFilter, - virtualCssFileFilter, processVanillaFile, - getSourceFromVirtualCssFile, compile, hash, getPackageInfo, IdentifierOption, addFileScope, + stringifyFileScope, + parseFileScope, } from '@vanilla-extract/integration'; interface Options { @@ -31,37 +32,66 @@ export function vanillaExtractPlugin({ let useRuntime = false; const cssMap = new Map(); + let virtualExt: string; + return { name: 'vanilla-extract', enforce: 'pre', + config(_userConfig, env) { + useRuntime = + devStyleRuntime === 'vanilla-extract' && env.command === 'serve'; + + const include = useRuntime ? ['@vanilla-extract/css/injectStyles'] : []; + + return { + optimizeDeps: { include }, + ssr: { + external: [ + '@vanilla-extract/css', + '@vanilla-extract/css/fileScope', + '@vanilla-extract/css/adapter', + ], + }, + }; + }, configResolved(resolvedConfig) { config = resolvedConfig; - useRuntime = - devStyleRuntime === 'vanilla-extract' && config.command === 'serve'; + + virtualExt = `.vanilla.${useRuntime ? 'js' : 'css'}?hash=`; packageInfo = getPackageInfo(config.root); }, resolveId(id) { - if (virtualCssFileFilter.test(id)) { - const { fileName, source } = getSourceFromVirtualCssFile(id); - - // resolveId shouldn't really cause a side-effect however custom module meta isn't currently working - // This is a hack work around until https://github.com/vitejs/vite/issues/3240 is resolved - const shortHashFileName = normalizePath( - `${fileName}?hash=${hash(source)}`, - ); - cssMap.set(shortHashFileName, source); - - return shortHashFileName; + if (id.indexOf(virtualExt) > 0) { + return id; } }, load(id) { - if (cssMap.has(id)) { - const css = cssMap.get(id); + const extensionIndex = id.indexOf(virtualExt); + + if (extensionIndex > 0) { + const fileScopeId = id.substring(0, extensionIndex); + + if (!cssMap.has(fileScopeId)) { + throw new Error(`Unable to locate ${fileScopeId} in the CSS map.`); + } + + const css = cssMap.get(fileScopeId)!; - cssMap.delete(id); + if (!useRuntime) { + return css; + } - return css; + const fileScope = parseFileScope(fileScopeId); + + return outdent` + import { injectStyles } from '@vanilla-extract/css/injectStyles'; + + injectStyles({ + fileScope: ${JSON.stringify(fileScope)}, + css: ${JSON.stringify(css)} + }) + `; } return null; @@ -71,32 +101,42 @@ export function vanillaExtractPlugin({ return null; } - const usedIndex = id.indexOf('?used'); - const fixedId = usedIndex > 0 ? id.substring(0, usedIndex) : id; + const index = id.indexOf('?'); + const validId = index === -1 ? id : id.substring(0, index); - if (ssr || useRuntime) { + if (ssr) { return addFileScope({ source: code, - filePath: normalizePath(path.relative(packageInfo.dirname, fixedId)), + filePath: normalizePath(path.relative(packageInfo.dirname, validId)), packageInfo, }).source; } const { source, watchFiles } = await compile({ - filePath: fixedId, + filePath: validId, cwd: config.root, }); for (const file of watchFiles) { - this.addWatchFile(file); + // In start mode, we need to prevent the file from rewatching itself. + // If it's a `build --watch`, it needs to watch everything. + if (config.command === 'build' || file !== id) { + this.addWatchFile(file); + } } return processVanillaFile({ source, - filePath: fixedId, - outputCss: !ssr, + filePath: validId, identOption: identifiers ?? (config.mode === 'production' ? 'short' : 'debug'), + serializeVirtualCssPath: ({ fileScope, source }) => { + const fileId = stringifyFileScope(fileScope); + + cssMap.set(fileId, source); + + return `import "${fileId}${virtualExt}${hash(source)}";`; + }, }); }, }; diff --git a/site/package.json b/site/package.json index 9ffd20a7d..d1d6a1112 100644 --- a/site/package.json +++ b/site/package.json @@ -9,8 +9,8 @@ "dependencies": { "@mdx-js/react": "^1.6.22", "classnames": "^2.2.6", - "dedent": "^0.7.0", "lodash": "^4.17.21", + "outdent": "^0.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-head": "^3.4.0", @@ -24,7 +24,6 @@ "@babel/preset-react": "^7.13.13", "@babel/preset-typescript": "^7.13.0", "@types/classnames": "^2.2.11", - "@types/dedent": "^0.7.0", "@types/lodash": "^4.14.168", "@types/mdx-js__react": "^1.5.3", "@types/react": "^17", diff --git a/site/src/HomePage/HomePage.tsx b/site/src/HomePage/HomePage.tsx index 2668d278d..83afd6e08 100644 --- a/site/src/HomePage/HomePage.tsx +++ b/site/src/HomePage/HomePage.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import dedent from 'dedent'; +import outdent from 'outdent'; import { Box, Stack, ContentBlock, Columns, ButtonLink } from '../system'; import { Heading } from '../Typography/Heading'; import { Chevron } from '../Chevron/Chevron'; @@ -190,7 +190,7 @@ export const HomePage = () => { errorTokens={['brandd', 'large']} title="styles.css.ts" > - {dedent` + {outdent` import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ @@ -324,7 +324,7 @@ export const HomePage = () => { title="styles.css.ts" background={{ lightMode: 'coolGray800', darkMode: 'black' }} > - {dedent` + {outdent` import { style } from '@vanilla-extract/css'; export const className = style({ @@ -371,7 +371,7 @@ export const HomePage = () => { title="styles.css.ts" background={{ lightMode: 'coolGray900', darkMode: 'gray900' }} > - {dedent` + {outdent` import { createTheme, style } from '@vanilla-extract/css'; export const [themeClass, vars] = createTheme({ @@ -410,7 +410,7 @@ export const HomePage = () => { title="styles.css.ts" background={{ lightMode: 'coolGray900', darkMode: 'gray900' }} > - {dedent`import { style, createVar } from '@vanilla-extract/css'; + {outdent`import { style, createVar } from '@vanilla-extract/css'; const shadowColor = createVar(); @@ -449,7 +449,7 @@ export const HomePage = () => { title="styles.css.ts" background={{ lightMode: 'coolGray900', darkMode: 'gray900' }} > - {dedent` + {outdent` import { styleVariants } from '@vanilla-extract/css'; export const background = styleVariants({ @@ -488,7 +488,7 @@ export const HomePage = () => { title="output.css" background={{ lightMode: 'coolGray900', darkMode: 'gray900' }} > - {dedent` + {outdent` :root { --space-none__ya5b7b0: 0; --space-small__ya5b7b1: 4px; diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts index 21534dfb6..e06b237bd 100644 --- a/test-helpers/src/startFixture/vite.ts +++ b/test-helpers/src/startFixture/vite.ts @@ -43,9 +43,6 @@ export const startViteFixture = async ( root, logLevel: 'error', plugins: [vanillaExtractPlugin({ devStyleRuntime: 'vanilla-extract' })], - optimizeDeps: { - include: ['@vanilla-extract/css', '@vanilla-extract/css/fileScope'], - }, server: { port, force: true, diff --git a/yarn.lock b/yarn.lock index b6a135df4..a1ae2dd42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3285,13 +3285,6 @@ __metadata: languageName: node linkType: hard -"@types/dedent@npm:^0.7.0": - version: 0.7.0 - resolution: "@types/dedent@npm:0.7.0" - checksum: 8fec52e2072d734f547b9f77d689516423155e1895a0b174787e42ed616eaf7c3556189a90e6da254f43dad93489eed34dc7ad9715231281871674e31ff13f08 - languageName: node - linkType: hard - "@types/eslint-scope@npm:^3.7.0": version: 3.7.0 resolution: "@types/eslint-scope@npm:3.7.0" @@ -3834,15 +3827,14 @@ __metadata: dependencies: "@emotion/hash": ^0.8.0 "@types/cssesc": ^3.0.0 - "@types/dedent": ^0.7.0 "@vanilla-extract/private": ^1.0.1 chalk: ^4.1.1 css-what: ^5.0.1 cssesc: ^3.0.0 csstype: ^3.0.7 - dedent: ^0.7.0 deep-object-diff: ^1.1.0 deepmerge: ^4.2.2 + outdent: ^0.8.0 languageName: unknown linkType: soft @@ -3868,16 +3860,15 @@ __metadata: version: 0.0.0-use.local resolution: "@vanilla-extract/integration@workspace:packages/integration" dependencies: - "@types/dedent": ^0.7.0 "@types/lodash": ^4.14.168 "@vanilla-extract/css": ^1.5.0 chalk: ^4.1.1 - dedent: ^0.7.0 esbuild: ^0.11.16 eval: ^0.1.6 find-up: ^5.0.0 javascript-stringify: ^2.0.1 lodash: ^4.17.21 + outdent: ^0.8.0 languageName: unknown linkType: soft @@ -3932,6 +3923,7 @@ __metadata: resolution: "@vanilla-extract/vite-plugin@workspace:packages/vite-plugin" dependencies: "@vanilla-extract/integration": ^1.4.2 + outdent: ^0.8.0 vite: ^2.6.0 peerDependencies: vite: ^2.2.3 @@ -6716,13 +6708,6 @@ __metadata: languageName: node linkType: hard -"dedent@npm:^0.7.0": - version: 0.7.0 - resolution: "dedent@npm:0.7.0" - checksum: 05c18541a4b932006a65eccaf03d68ac60552981db424f39f1ca4bebf5beaa53d318eadbb4dc0be24232844e69d1140763a7ada94559b2cb7771a47c0a829aeb - languageName: node - linkType: hard - "deep-equal@npm:^1.0.1": version: 1.1.1 resolution: "deep-equal@npm:1.1.1" @@ -12714,6 +12699,13 @@ fsevents@~2.1.2: languageName: node linkType: hard +"outdent@npm:^0.8.0": + version: 0.8.0 + resolution: "outdent@npm:0.8.0" + checksum: 5f48c7b6a2ef8cbedf1c15d8b09d4ab14a6a9414d5616f2790c5034a1b1684e42b087033188a0657f8e04b45a1a3dc5545627cf84c479864573665ecb5761152 + languageName: node + linkType: hard + "p-cancelable@npm:^1.0.0": version: 1.1.0 resolution: "p-cancelable@npm:1.1.0" @@ -15453,7 +15445,6 @@ fsevents@~2.1.2: "@babel/preset-typescript": ^7.13.0 "@mdx-js/react": ^1.6.22 "@types/classnames": ^2.2.11 - "@types/dedent": ^0.7.0 "@types/lodash": ^4.14.168 "@types/mdx-js__react": ^1.5.3 "@types/react": ^17 @@ -15466,7 +15457,6 @@ fsevents@~2.1.2: classnames: ^2.2.6 copy-webpack-plugin: ^8.1.0 css-loader: ^5.2.4 - dedent: ^0.7.0 file-loader: ^6.2.0 github-slugger: ^1.3.0 gray-matter: ^4.0.2 @@ -15474,6 +15464,7 @@ fsevents@~2.1.2: lodash: ^4.17.21 mdx-loader: ^3.0.2 mini-css-extract-plugin: ^1.5.1 + outdent: ^0.8.0 react: ^17.0.2 react-dom: ^17.0.2 react-head: ^3.4.0