Skip to content

Commit

Permalink
feat: Add CSSEntryPointsPlugin to fix vite for creating one CSS ent…
Browse files Browse the repository at this point in the history
…ry per JS entry point

with `cssCodeSplit` vite only inlines CSS in async chunks,
but it does not properly create CSS files for synchronously imported CSS.

Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Co-authored-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux and ShGKme committed Jun 20, 2024
1 parent 50d8324 commit 9668003
Show file tree
Hide file tree
Showing 8 changed files with 209 additions and 0 deletions.
15 changes: 15 additions & 0 deletions LICENSES/MIT.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
Copyright <YEAR> <COPYRIGHT HOLDER>

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.
7 changes: 7 additions & 0 deletions __fixtures__/css-entry-points/first.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
* SPDX-License-Identifier: CC0-1.0
*/
import './shared.js'

window.alert('Hello world from first.js')
7 changes: 7 additions & 0 deletions __fixtures__/css-entry-points/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
* SPDX-License-Identifier: CC0-1.0
*/
.color {
background-color: red;
}
9 changes: 9 additions & 0 deletions __fixtures__/css-entry-points/second.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
* SPDX-License-Identifier: CC0-1.0
*/
import './global.css'

window.onload = async () => {
await import('./shared.js')
}
7 changes: 7 additions & 0 deletions __fixtures__/css-entry-points/shared.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
* SPDX-License-Identifier: CC0-1.0
*/
.color {
background-color: blue !important;
}
7 changes: 7 additions & 0 deletions __fixtures__/css-entry-points/shared.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
* SPDX-License-Identifier: CC0-1.0
*/
import './shared.css'

window.something = () => 'Just so the module will not be empty'
45 changes: 45 additions & 0 deletions __tests__/css-entry-points.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
*
* SPDX-License-Identifier: MIT
*/

import type { RollupOutput, OutputAsset } from 'rollup'
import { build } from 'vite'
import { describe, it, expect } from 'vitest'
import { CSSEntryPointsPlugin } from '../lib/plugins/CSSEntryPoints'
import { resolve } from 'path'

const root = resolve(import.meta.dirname, '../__fixtures__/css-entry-points')

describe('CSS entry point plugin', () => {
it('minifies using esbuild by default', async () => {
const { output } = await build({
configFile: false,
root,
appType: 'custom',
plugins: [CSSEntryPointsPlugin()],
build: {
cssCodeSplit: true,
rollupOptions: {
input: {
first: resolve(root, './first.js'),
second: resolve(root, './second.js'),
},
output: {
assetFileNames: 'assets/[name].[ext]',
chunkFileNames: 'chunks/[name].js',
entryFileNames: '[name].js',
},
},
},
}) as RollupOutput

// Has correct first entry
const firstCSS = output.find(({ fileName }) => fileName === 'assets/first.css') as OutputAsset
expect(firstCSS.source).toMatch(/@import '\.\/[^.]+\.chunk\.css'/)
// Has correct second entry
const secondCSS = output.find(({ fileName }) => fileName === 'assets/second.css') as OutputAsset
expect(secondCSS.source).toMatch(/@import '\.\/[^.]+\.chunk\.css'/)
})
})
112 changes: 112 additions & 0 deletions lib/plugins/CSSEntryPoints.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/**
* SPDX-FileCopyrightText: 2024 Ferdinand Thiessen <opensource@fthiessen.de>
*
* SPDX-License-Identifier: MIT
*/

// eslint-disable-next-line n/no-extraneous-import
import type { OutputOptions, PreRenderedAsset } from 'rollup'
import type { Plugin } from 'vite'

import { basename, dirname, join, normalize } from 'path'

interface CSSEntryPointsPluginOptions {
/**
* Also create empty CSS entry points for JS entry points without styles
* @default false
*/
createEmptyEntryPoints?: boolean
}

/**
* A vite plugin to properly extract synchronously imported CSS from JS entry points
*
* @param options Configuration for the plugin
*/
export function CSSEntryPointsPlugin(options?: CSSEntryPointsPluginOptions) {
const pluginOptions = {
createEmptyEntryPoints: false,
...options,
}

return {
name: 'css-entry-points-plugin',

// We use this to adjust the asset file names for CSS files so we ensure entry points are unique
config(config) {
/**
* Create a wrapper function to rename non entry css assets
* @param config Original assets file name config
*/
function fixupAssetFileNames(config: Required<OutputOptions['assetFileNames']>) {
// Return a wrapper function
return (info: PreRenderedAsset) => {
// If the original assets name option is a function we need to call it otherwise just use the template string
const name = typeof config === 'function' ? config(info) : config
// Only handle CSS files not extracted by this plugin
if (info.name.endsWith('.css') && !String(info.source).startsWith('/* extracted by css-entry-points-plugin */')) {
// The new name should have the same path but instead of the .css extension it is .chunk.css
return name.replace(/(.css|.\[ext\]|\[extname\])$/, '.chunk.css')
}
return name
}
}

// If there is any output option we need to fix the assetFileNames
if (config.build?.rollupOptions?.output) {
for (const output of [config.build.rollupOptions.output].flat()) {
if (output.assetFileNames === undefined) {
continue
}
output.assetFileNames = fixupAssetFileNames(output.assetFileNames)
}
}
},

generateBundle(options, bundle) {
for (const chunk of Object.values(bundle)) {
// Only handle entry points
if (chunk.type !== 'chunk' || !chunk.isEntry) {
continue
}

// Set of all synchronously imported CSS of this entry point
const importedCSS = new Set<string>(chunk.viteMetadata?.importedCss ?? [])
const getImportedCSS = (importedNames: string[]) => {
for (const importedName of importedNames) {
const importedChunk = bundle[importedName]
// Skip non chunks
if (importedChunk.type !== 'chunk') {
continue
}
// First add the css modules imported by imports
getImportedCSS(importedChunk.imports ?? [])
// Now merge the imported CSS into the list
;(importedChunk.viteMetadata?.importedCss ?? [])
.forEach((name: string) => importedCSS.add(name))
}
}
getImportedCSS(chunk.imports)

// Skip empty entries if not configured to output empty CSS
if (importedCSS.size === 0 && !pluginOptions.createEmptyEntryPoints) {
continue
}

const source = [...importedCSS.values()]
.map((css) => `@import './${basename(css)}';`)
.join('\n')

const cssName = `${chunk.name}.css`
const path = dirname(typeof options.assetFileNames === 'string' ? options.assetFileNames : options.assetFileNames({ type: 'asset', source: '', name: 'name.css' }))
this.emitFile({
type: 'asset',
name: `\0${cssName}`,
fileName: normalize(join(path, cssName)),
needsCodeReference: false,
source: `/* extracted by css-entry-points-plugin */\n${source}`,
})
}
}
} as Plugin
}

0 comments on commit 9668003

Please sign in to comment.