Skip to content

Commit

Permalink
Merge pull request #204 from nextcloud-libraries/feat/CSSEntryPointsP…
Browse files Browse the repository at this point in the history
…lugin

feat: Add `CSSEntryPointsPlugin` to fix vite for creating one CSS entry per JS entry point
  • Loading branch information
susnux authored Jun 20, 2024
2 parents 50d8324 + ccf738e commit a88a302
Show file tree
Hide file tree
Showing 9 changed files with 226 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'/)
})
})
12 changes: 12 additions & 0 deletions lib/appConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { findAppinfo } from './utils/appinfo.js'
import EmptyJSDirPlugin from './plugins/EmptyJSDir.js'
import replace from '@rollup/plugin-replace'
import injectCSSPlugin from 'vite-plugin-css-injected-by-js'
import { CSSEntryPointsPlugin } from './plugins/CSSEntryPoints.js'

type VitePluginInjectCSSOptions = Parameters<typeof injectCSSPlugin>[0]

Expand All @@ -39,6 +40,14 @@ export interface AppOptions extends Omit<BaseOptions, 'inlineCSS'> {
*/
inlineCSS?: boolean | VitePluginInjectCSSOptions,

/**
* When not using inline css and using `cssCodeSplit` this option allows to create
* one CSS entry file for each JS entry point instead of only one for each JS entry point with styles.
*
* @default false
*/
createEmptyCSSEntryPoints?: boolean

/**
* Whether to empty the output directory (`js/`)
* @default true
Expand Down Expand Up @@ -129,6 +138,9 @@ export const createAppConfig = (entries: { [entryAlias: string]: string }, optio
...(typeof options.inlineCSS === 'object' ? options.inlineCSS : {}),
})
plugins.push(...[plugin].flat())
} else if (userConfig.build?.cssCodeSplit) {
// If not inlining CSS and using `cssCodeSplit` we need this plugin to fix https://github.com/vitejs/vite/issues/17527
plugins.push(CSSEntryPointsPlugin({ createEmptyEntryPoints: options.createEmptyCSSEntryPoints }))
}

// defaults to true so only not adding if explicitly set to false
Expand Down
117 changes: 117 additions & 0 deletions lib/plugins/CSSEntryPoints.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/**
* 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, extname } 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')

// Name new CSS entry same as the entry
const entryName = basename(chunk.fileName).slice(0, -1 * extname(chunk.fileName).length)
const cssName = `${entryName}.css`

// Keep original path
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 a88a302

Please sign in to comment.