Skip to content

Commit

Permalink
feat(css): add support for Lightning CSS (#12807)
Browse files Browse the repository at this point in the history
  • Loading branch information
ArnaudBarre authored Jun 19, 2023
1 parent 7f241e9 commit c6c5d49
Show file tree
Hide file tree
Showing 29 changed files with 677 additions and 20 deletions.
6 changes: 5 additions & 1 deletion .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,11 @@ module.exports = defineConfig({
},
},
{
files: ['packages/vite/src/types/**', '*.spec.ts'],
files: [
'packages/vite/src/types/**',
'packages/vite/scripts/**',
'*.spec.ts',
],
rules: {
'n/no-extraneous-import': 'off',
},
Expand Down
2 changes: 2 additions & 0 deletions packages/vite/api-extractor.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

"mainEntryPointFilePath": "./temp/node/index.d.ts",

"bundledPackages": ["lightningcss"],

"dtsRollup": {
"enabled": true,
"untrimmedFilePath": "",
Expand Down
7 changes: 6 additions & 1 deletion packages/vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"build-types": "run-s build-types-temp build-types-pre-patch build-types-roll build-types-post-patch build-types-check",
"build-types-temp": "tsc --emitDeclarationOnly --outDir temp/node -p src/node",
"build-types-pre-patch": "tsx scripts/prePatchTypes.ts",
"build-types-roll": "api-extractor run && rimraf temp",
"build-types-roll": "tsx scripts/api-extractor.ts run && rimraf temp",
"build-types-post-patch": "tsx scripts/postPatchTypes.ts",
"build-types-check": "tsx scripts/checkBuiltTypes.ts && tsc --project tsconfig.check.json",
"typecheck": "tsc --noEmit",
Expand Down Expand Up @@ -108,6 +108,7 @@
"http-proxy": "^1.18.1",
"json-stable-stringify": "^1.0.2",
"launch-editor-middleware": "^2.6.0",
"lightningcss": "^1.21.0",
"magic-string": "^0.30.0",
"micromatch": "^4.0.5",
"mlly": "^1.3.0",
Expand Down Expand Up @@ -139,6 +140,7 @@
"sass": "*",
"stylus": "*",
"sugarss": "*",
"lightningcss": "^1.21.0",
"terser": "^5.4.0"
},
"peerDependenciesMeta": {
Expand All @@ -157,6 +159,9 @@
"sugarss": {
"optional": true
},
"lightningcss": {
"optional": true
},
"terser": {
"optional": true
}
Expand Down
1 change: 1 addition & 0 deletions packages/vite/rollup.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ function createNodeConfig(isProduction: boolean) {
},
external: [
'fsevents',
'lightningcss',
...Object.keys(pkg.dependencies),
...(isProduction ? [] : Object.keys(pkg.devDependencies)),
],
Expand Down
25 changes: 25 additions & 0 deletions packages/vite/scripts/api-extractor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Extractor, ExtractorConfig } from '@microsoft/api-extractor'

const result = Extractor.invoke(
ExtractorConfig.loadFileAndPrepare('./api-extractor.json'),
{
messageCallback: (message) => {
const ignore = () => {
// @ts-expect-error TS requires to use the const enum, which is not available as the named export in tsx
message.logLevel = 'none'
}
if (message.sourceFilePath?.includes('lightningcss')) {
ignore()
}
if (message.messageId === 'ae-forgotten-export') {
if (message.sourceFilePath?.endsWith('/src/types/lightningcss.d.ts')) {
// We only expose LightningCSS types via prefixed types to avoid
// having confusing name like "Targets" in Vite types
ignore()
}
}
},
},
)

if (!result.succeeded) process.exit(1)
23 changes: 22 additions & 1 deletion packages/vite/src/node/__tests__/plugins/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import path from 'node:path'
import { describe, expect, test, vi } from 'vitest'
import { resolveConfig } from '../../config'
import type { InlineConfig } from '../../config'
import { cssPlugin, cssUrlRE, hoistAtRules } from '../../plugins/css'
import {
convertTargets,
cssPlugin,
cssUrlRE,
hoistAtRules,
} from '../../plugins/css'

describe('search css url function', () => {
test('some spaces before it', () => {
Expand Down Expand Up @@ -237,3 +242,19 @@ async function createCssPluginTransform(
},
}
}

describe('convertTargets', () => {
test('basic cases', () => {
expect(convertTargets('es2018')).toStrictEqual({
chrome: 4128768,
edge: 5177344,
firefox: 3801088,
safari: 786432,
opera: 3276800,
})
expect(convertTargets(['safari13.1', 'ios13', 'node14'])).toStrictEqual({
ios_saf: 851968,
safari: 852224,
})
})
})
4 changes: 2 additions & 2 deletions packages/vite/src/node/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,9 @@ export interface BuildOptions {
/**
* Override CSS minification specifically instead of defaulting to `build.minify`,
* so you can configure minification for JS and CSS separately.
* @default minify
* @default 'esbuild'
*/
cssMinify?: boolean
cssMinify?: boolean | 'esbuild' | 'lightningcss'
/**
* If `true`, a separate sourcemap file will be created. If 'inline', the
* sourcemap will be appended to the resulting output file as data URI.
Expand Down
13 changes: 11 additions & 2 deletions packages/vite/src/node/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ import type { ResolvedServerOptions, ServerOptions } from './server'
import { resolveServerOptions } from './server'
import type { PreviewOptions, ResolvedPreviewOptions } from './preview'
import { resolvePreviewOptions } from './preview'
import type { CSSOptions } from './plugins/css'
import {
type CSSOptions,
type ResolvedCSSOptions,
resolveCSSOptions,
} from './plugins/css'
import {
asyncFlatten,
createDebugger,
Expand Down Expand Up @@ -326,7 +330,10 @@ export interface InlineConfig extends UserConfig {
}

export type ResolvedConfig = Readonly<
Omit<UserConfig, 'plugins' | 'assetsInclude' | 'optimizeDeps' | 'worker'> & {
Omit<
UserConfig,
'plugins' | 'css' | 'assetsInclude' | 'optimizeDeps' | 'worker'
> & {
configFile: string | undefined
configFileDependencies: string[]
inlineConfig: InlineConfig
Expand All @@ -349,6 +356,7 @@ export type ResolvedConfig = Readonly<
alias: Alias[]
}
plugins: readonly Plugin[]
css: ResolvedCSSOptions | undefined
esbuild: ESBuildOptions | false
server: ResolvedServerOptions
build: ResolvedBuildOptions
Expand Down Expand Up @@ -672,6 +680,7 @@ export async function resolveConfig(
mainConfig: null,
isProduction,
plugins: userPlugins,
css: resolveCSSOptions(config.css),
esbuild:
config.esbuild === false
? false
Expand Down
2 changes: 2 additions & 0 deletions packages/vite/src/node/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export type {
CSSOptions,
CSSModulesOptions,
PreprocessCSSResult,
ResolvedCSSOptions,
} from './plugins/css'
export type { JsonOptions } from './plugins/json'
export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
Expand Down Expand Up @@ -143,3 +144,4 @@ export type { Terser } from 'dep-types/terser'
export type { RollupCommonJSOptions } from 'dep-types/commonjs'
export type { RollupDynamicImportVarsOptions } from 'dep-types/dynamicImportVars'
export type { Matcher, AnymatchPattern, AnymatchFn } from 'dep-types/anymatch'
export type { LightningCSSOptions } from 'dep-types/lightningcss'
Loading

0 comments on commit c6c5d49

Please sign in to comment.