PHPackages carbon/pipeline - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. carbon/pipeline ActiveNeos-build carbon/pipeline =============== Ultra-fast build stack for Neos CMS based on esbuild and PostCSS 0.18.7(3mo ago)1725.5k↓44%7[2 issues](https://github.com/CarbonPackages/Carbon.Pipeline/issues)1MITJavaScriptCI passing Since Jun 21Pushed 2mo ago3 watchersCompare [ Source](https://github.com/CarbonPackages/Carbon.Pipeline)[ Packagist](https://packagist.org/packages/carbon/pipeline)[ Fund](https://www.paypal.me/Jonnitto/20eur)[ GitHub Sponsors](https://github.com/jonnitto)[ RSS](/packages/carbon-pipeline/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (97)Used By (1) ![Carbon.Pipeline – Build stack for Neos CMS](https://github.com/user-attachments/assets/b8f980bc-ba34-4595-8a34-51ba10f6da8a)[![Latest stable version](https://camo.githubusercontent.com/9d399af445793a52375962ebf6af8842bda93042ba50cf778456259bb5a5dfd6/68747470733a2f2f706f7365722e707567782e6f72672f636172626f6e2f706970656c696e652f762f737461626c65)](https://packagist.org/packages/carbon/pipeline) [![Download](https://camo.githubusercontent.com/4e01da930d9b28795ed7f7991fcf411bdfd04248713c8be4d17b025acec05f22/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f776e6c6f61642d446f776e6c6f616425323061732532307a69702d696e666f726d6174696f6e616c)](https://github.com/CarbonPackages/Carbon.Pipeline/archive/main.zip) [![GitHub stars](https://camo.githubusercontent.com/91c7ead06ac1b675909f516e068cac1379f7aef3cb5dc03f86e700b81dafbbc5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f436172626f6e5061636b616765732f436172626f6e2e506970656c696e65)](https://github.com/CarbonPackages/Carbon.Pipeline/stargazers) [![GitHub watchers](https://camo.githubusercontent.com/b9e61bcc3bab04639ed1f99ba69f935a77c74955a8adcabdebdd628de8a42e78/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f77617463686572732f436172626f6e5061636b616765732f436172626f6e2e506970656c696e652e737667)](https://github.com/CarbonPackages/Carbon.Pipeline/subscription) [![GitHub license](https://camo.githubusercontent.com/0ded4d26d0185150468cc50e32d90f9fe61cf851e9187a62ed8fc3f44dace167/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f436172626f6e5061636b616765732f436172626f6e2e506970656c696e65)](LICENSE) [![GitHub issues](https://camo.githubusercontent.com/aa29d0af0070ede239ad1c4caf91225c1119506f154cd9359526836d56f534c6/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f436172626f6e5061636b616765732f436172626f6e2e506970656c696e65)](https://github.com/CarbonPackages/Carbon.Pipeline/issues) [![GitHub forks](https://camo.githubusercontent.com/b608c9b929f7cd572dc528faf772a5c010c19a02cea6b346f8f722897173862a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f436172626f6e5061636b616765732f436172626f6e2e506970656c696e65)](https://github.com/CarbonPackages/Carbon.Pipeline/network) [![Twitter](https://camo.githubusercontent.com/90acdbb2be8fda4a5e5fb85db7f1d8c60d37f0e502573e332232e1d08f6a3377/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c3f75726c3d68747470732533412532462532466769746875622e636f6d253246436172626f6e5061636b61676573253246436172626f6e2e506970656c696e65)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FCarbonPackages%2FCarbon.Pipeline) [![Sponsor @Jonnitto on GitHub](https://camo.githubusercontent.com/66407aef8131796c995b996272dec30ad1633b3da0537ea37e2643d5038d3616/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73706f6e736f722d537570706f7274253230746869732532307061636b6167652d696e666f726d6174696f6e616c)](https://github.com/sponsors/jonnitto) **Carbon.Pipeline is a delicious blend of [esbuild](https://esbuild.github.io) and [PostCSS](https://postcss.org) to form a full-featured, ultra-fast modern Javascript and CSS bundler for Flow Framework and [Neos CMS](https://www.neos.io).** Getting started --------------- [](#getting-started) First, thank you that you want to give this build stack a try! If you miss a ✨ feature or found a 🐛 bug, feel free to [open an issue](https://github.com/CarbonPackages/Carbon.Pipeline/issues/new). ### Install via [composer](https://getcomposer.org) [](#install-via-composer) Run `composer require carbon/pipeline --dev`. Some files (if not already existing) will be copied to your root folder during the installation. After installing the package, run the command `install` to install the required packages defined in `package.json`. Feel free to modify and change dependencies before installing 👍 #### Standalone use in custom projects without Neos [](#standalone-use-in-custom-projects-without-neos) Carbon.Pipeline is also a perfect choice for your non-Neos projects. Consider installing the composer package `neos/composer-plugin` beforehand to get Carbon.Pipeline installed in the correct directory under `Build/Carbon.Pipeline`. ### Manual install [](#manual-install) If you want to make significant adjustments to the build stack, you can also [download the code as zip file](https://github.com/CarbonPackages/Carbon.Pipeline/archive/main.zip) and put it in the `Build/Carbon.Pipeline` folder. Go to `Carbon.Pipeline/RootFiles/Global` and `Carbon.Pipeline/RootFiles/JavaScript` or `Carbon.Pipeline/RootFiles/TypeScript`, copy the files to your root folder (Don't forget the hidden files, starting with a dot). After this is done, run the command `install` to install the required packages defined in `package.json`. Feel free to modify and change dependencies before installing 👍 ### Choose a package manager [](#choose-a-package-manager) You can choose between different package managers: [npm](https://www.npmjs.com), [Yarn](https://yarnpkg.com) and the ultra-fast and disk-space saving [pnpm](https://pnpm.io). You can set your favorite package manager by running the command `pnpm setPackageManager`, `npm run setPackageManager npm` or `yarn setPackageManager yarn`. The script behind it don't need any dependencies, so you can run it before the `install` command. **The default package manager is `pnpm`** Add files to the build stack ---------------------------- [](#add-files-to-the-build-stack) Carbon.Pipeline assumes the following project directory structure for resources: A configured location under - `Resources/Private`: input files - `Resources/`: output files The whole configuration, including which files to build, is configured in [`pipeline.yaml`](RootFiles/Global/pipeline.yaml). The default values are set in [`defaults.yaml`](defaults.yaml) and merged with your configuration. Under the key `packages`, you can either add an array with package settings or, if you have just one entry, you can directly add the configuration: ``` packages: - package: Vendor.Bar files: - Main.pcss - Main.js # This is the same as packages: package: Vendor.Bar files: - Main.pcss - Main.js ``` If you have just one file, you can pass this directly without creating an array: ``` packages: package: Vendor.Bar files: Main.js ``` If you don't set files, all parsable files from the input folder get rendered. Files that start with an underscore (`_`) will be ignored. ``` packages: package: Vendor.Bar ``` To change the input and/or the output folder, you can do this with the `folder` option: ``` packages: package: Vendor.Bar folder: input: Assets output: inline: Private/Templates style: Public script: Public module: Public commonJS: Public ``` Further, you can write the files to another package: ``` packages: package: Vendor.Bar folder: output: package: Vendor.Theme ``` If you want to go crazy with multi-sites in Neos, you can also write the files to multiple packages: ``` packages: package: Vendor.Bar folder: output: package: - Vendor.Theme - Vendor.Bar ``` A package entry has the following options: KeyTypeDescriptionExample`package``string`The name of the package **(required)**`Vendor.Foo``files``string` or `array`The names of the entry files. If none given, all parsable files in the input folder get rendered`Main.js``ignoredFiles``string` or `array`List of files who should be ignored`Main.js``folder.input``string`The folder under `Resources/Private` where to look for the entry files`Assets``folder.output.package``string` or `array`If set, the files will be writen in a different package (one or multiple)`Foo.Bar``folder.output.inline``string`The folder where inline files get rendered`Private/Templates/``folder.output.style``string`The folder where inline styles rendered`Public/Assets``folder.output.script``string`The folder where inline scripts rendered`Public/Assets``folder.output.module``string`The folder where inline modules rendered`Public/Assets``folder.output.commonJS``string`The folder where inline commonJS files get rendered`Public/Assets``external``string` or `array`You can mark a file or a package as [external](https://esbuild.github.io/api/#external) to exclude it from your build.`*/Modules/*``inline``boolean`Flag to toggle if the files should be inlined. If set, sourcemaps are disabled`true``sourcemap``boolean`Flag to toggle source map generation`false``format``string`Set the format of the output file. [Read more](https://esbuild.github.io/api/#format)`cjs``jsFileExtension``array` or `false`File extensions of javascript files. If set to `false`, all files will have the extension `.js``false``jsFileExtension.script``string`File extension of script files`.js``jsFileExtension.module``string`Output extension of module JS files.`.module``jsFileExtension.commonJS``string`Output extension of common JS files.`.common``alias``object`This feature lets you substitute one package for another when bundling`{'oldpkg': 'newpkg'}`These are the default values for the folders: ``` folder: input: Fusion output: inline: Private/Templates/InlineAssets style: Public/Styles script: Public/Scripts module: Public/Modules commonJS: Public/CommonJS ``` and these for the build options: ``` external: null inline: false sourcemap: true format: iife jsFileExtension: script: .js module: .mjs commonJS: .cjs ``` The target folders can be adjusted under the key `folder.output`. If you want to change the defaults for all your packages, you can also set this globally in your [`pipeline.yaml`](RootFiles/Global/pipeline.yaml): ``` folder: input: Assets output: inline: Private/Templates style: Public script: Public module: Public commonJS: Public buildDefaults: sourcemap: false format: esm ``` Please look at the [`defaults.yaml`](defaults.yaml) file for all the options. If you set an entry file with the javascript module suffix (`.mjs`, `.mjsx`, `.mts` or `.mtsx`) the format of this file will be enforced to `esm`. The same with commonJS: If you set an entry file with the javascript commonJS suffix (`.cjs`, `.cjsx`, `.cts` or `.ctsx`) the format of this file will be enforced to `cjs`. E.g., if you have the following array `["Main.js", "Module.mjs", "CommonJS.cjs"]`, and have no specific setting for the format, `Main.js` will have the format `iife`, `Module.mjs` will have the format `esm` and `CommonJS.cjs` will have the format `cjs`. Tasks ----- [](#tasks) **As you can choose your favorite package manager, you have to prepend the task name with the corresponding name (`pnpm`, `yarn` or `npm run`)** There are five predefined main tasks: CommandDescriptionCommand`watch`Start the file watcher`concurrently -r pnpm:watch:*``dev`Build the files once`concurrently -r pnpm:dev:*``build`Build the files once for production (with optimzed file size)`concurrently -r pnpm:build:*``pipeline`Run install, and build the files for production`pnpm install;concurrently -r pnpm:pipeline:*``showConfig`Shows the merged configuration from [`pipeline.yaml`](RootFiles/Global/pipeline.yaml) and [`defaults.yaml`](defaults.yaml)`node Build/Carbon.Pipeline/showConfig.mjs``setPackageManager`[Set your package manager.](#choose-a-package-manager)`node Build/Carbon.Pipeline/setPackageManager.cjs`The tasks are split up, so they can run in parallel mode. But you can also run them separately: CommandDescriptionCommand`watch:js`Start the file watcher for JavaScript files`node Build/Carbon.Pipeline/esbuild.mjs --watch``watch:css`Start the file watcher for CSS files`node Build/Carbon.Pipeline/postcss.mjs --watch``dev:js`Build the files once for JavaScript files`node Build/Carbon.Pipeline/esbuild.mjs``dev:css`Build the files once for CSS files`node Build/Carbon.Pipeline/postcss.mjs``build:js`Build the JavaScript files once for production`node Build/Carbon.Pipeline/esbuild.mjs --production``build:css`Build the CSS files once for production`node Build/Carbon.Pipeline/postcss.mjs --production``pipeline:build`Build the files once for production (with optimzed file size)`concurrently -r pnpm:build:*`### Extendibility [](#extendibility) Of course, you can also add your own tasks in the `scripts` section of your `package.json` file. For example, if you have a Neos UI custom editor and want to start all your tasks in one place, you can add them like this: ``` { "build:editor": "pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ build", "watch:editor": "pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ watch", "pipeline:editor": "pnpm --dir DistributionPackages/Foo.Editor/Resources/Private/Editor/ install" } ``` > Be aware that you may have different syntax for settings options based on the chosen task manager To set the current work directory, for example you have to set `--cwd` for `yarn`, `--dir` or `-C` for `pnpm` and `--prefix` for `npm`. Because the tasks start with `build:`, respectively with `watch:` or `pipeline:`, the tasks will be included in the corresponding root command. In this example, `build`, `watch` or `pipeline`. If you want to go crazy, you can even mix different task managers. Compression of files -------------------- [](#compression-of-files) In production mode (`build`), the files also get compressed with [gzip](https://nodejs.org/api/zlib.html) and [brotli](https://github.com/google/brotli). You can edit the compression level under the key [`buildDefaults.compression`](defaults.yaml#L31-L33). Per default, the highest compression level is set. To disable compression at all, you can set it to `false`: ``` buildDefaults: compression: false ``` Or, if you want to disable just one of them, you can set the entry to `false`: ``` buildDefaults: compression: gzip: false ``` Import files from DistributionPackages and other Packages --------------------------------------------------------- [](#import-files-from-distributionpackages-and-other-packages) By default, two aliases are predefined: `DistributionPackages` and `Packages`. Like that you can import (CSS and JS) files from other packages like that: ``` import "DistributionPackages/Vendor.Foo/Resources/Private/Fusion/Main"; import "Packages/Plugins/Jonnitto.PhotoSwipe/Resources/Private/Assets/PhotoSwipe"; ``` ``` @import "DistributionPackages/Vendor.Foo/Resources/Private/Fusion/Main.pcss"; @import "Packages/Carbon/Carbon.Image/Resources/Private/Assets/Tailwind.pcss"; ``` Thanks to a custom made `resolve` function, you can also use [globbing](https://www.npmjs.com/package/glob) in CSS imports: `@import "Presentation/**/*.pcss";` Alter the configuration file ---------------------------- [](#alter-the-configuration-file) In some setups, you may need multiple configurations with different config files. In this edge case, you can set a other config file in your `scripts` section in your `package.json` file: ``` { "build:custom:css": "node Build/Carbon.Pipeline/postcss.mjs --configFile=pipelineCustom.yaml" } ``` In this example, `pipelineCustom.yaml` gets used instead of `pipeline.yaml`. CSS --- [](#css) ### Sass [](#sass) If you want to use [Sass](https://sass-lang.com) (`.scss`or `.sass` files) you have to install [`sass`](https://www.npmjs.com/package/sass): For [pnpm](https://pnpm.io): ``` pnpm add -D sass ``` For [Yarn](https://yarnpkg.com): ``` yarn add --dev sass ``` For [npm](https://www.npmjs.com): ``` npm add -D sass ``` You can now import files from `node_modules` like this (Example with bootstrap): ``` @use "pkg:bootstrap/scss/bootstrap"; ``` **Pass options to the sass compiler**You can pass options to the sass compiler with `sassOptions`. **Example**: To silence warnings from stylesheets loaded through importers and load paths, you can enable `quietDeps`: ``` sassOptions: quietDeps: true ``` ### PostCSS [](#postcss) This template comes with a variety of PostCSS Plugins. Feel free to remove some or add your own favorite packages. The configuration is located in [`.postcssrc.mjs`](RootFiles/Global/.postcssrc.mjs). The suffix of these files should be `.pcss`. #### Pass custom options to you PostCSS config file [](#pass-custom-options-to-you-postcss-config-file) You can pass custom options to your PostCSS config file with key `postcssOptions`. In this example, you would access the key `prefix` with `ctx.prefix` in your PostCSS config file (`.postcssrc.mjs`). ``` postcssOptions: prefix: true ``` #### Use postcss resolve() function [](#use-postcss-resolve-function) You can use `resolve()` in your css/scss files to load resources (eg images) from `Resources/Public` of the package. The path will be resolved at compile-time. ``` .my-class { background-image: resolve("Images/my-image.jpg"); } ``` resolves to ``` .my-class { background-image: url("/_Resources/Static/Packages/Your.Package/Images/my-image.jpg"); } ``` If you choose to order your Packages in DistributionPackages in subfolders, you can add this setting to ensure the paths are correctly rewritten: ``` postcssOptions: additionalPackagePathPrefixes: - Sites - Plugins ``` This ensures that the path that is generated (eg `/_Resources/Static/Packages/(Sites|Plugins)/Your.Package/.../`) will be correctly resolved, removing the subfolder from the path. #### PostCSS Plugins [](#postcss-plugins) **Following plugins are included:**NameDescription[postcss-import](https://www.npmjs.com/package/postcss-import)Plugin to transform `@import` rules by inlining content. Thanks to a custom `resolve` function you can also use [glob](https://www.npmjs.com/package/glob)[Tailwind CSS](https://tailwindcss.com)A utility-first CSS framework for rapidly building custom user interfaces[postcss-sort-media-queries](https://www.npmjs.com/package/postcss-sort-media-queries)Combine and sort CSS media queries (Only if no Tailwind is installed)[autoprefixer](https://www.npmjs.com/package/autoprefixer)Parse CSS and add vendor prefixes to CSS rules using values from [Can I Use](https://caniuse.com) (Not with Tailwind 4)[cssnano](https://cssnano.co)Modern CSS compression (Not with Tailwind 4)[postcss-reporter](https://www.npmjs.com/package/postcss-reporter)`console.log()` the messages (warnings, etc.) registered by other PostCSS plugins (Only if no Tailwind is installed)Of course, you can add your own or remove not-needed Plugins as you want. This is just meant as a starting point. ### Tailwind CSS [](#tailwind-css) This setup comes with [Tailwind CSS](https://tailwindcss.com), a highly customizable, low-level CSS framework. An example configuration is provided in [`tailwind.config.mjs`](RootFiles/Global/tailwind.config.mjs). The setup for get the content for the CSS files is also configured. [Read more about controlling the file size here](https://tailwindcss.com/docs/optimizing-for-production). To remove a specific package, you could use this pattern in your `pipeline.yaml`: ``` buildDefaults: content: RemovePacakge: "!DistributionPackages/Package.ToRemove" ``` By default, following entries are pre-defined: ``` buildDefaults: content: DistributionPackages: DistributionPackages/**/{Private,NodeTypes,Components}/**/*.{fusion,cpx,html,js,jsx,ts,tsx,mjs,mjsx,mts,mtsx,cjs,cjsx,cts,ctsx,svelte,vue} ignoreNodeModules: "!DistributionPackages/**/node_modules" ``` The script put automatically all entries starting with an `!` at the end of the list. You can control this setting by calling `pnpm showConfig --path=buildDefaults.content` By the way: [Alpine.js](https://github.com/alpinejs/alpine) is excellent in combination with [Tailwind CSS](https://tailwindcss.com). Javascript ---------- [](#javascript) **Enviroments variables in Javascript**You can use your enviroments variables in Javascript. To do so, you have to define `defineEnvVariables` ``` esbuild: defineEnvVariables: RELEASE_DATE ``` `defineEnvVariables` can be also an array of strings: ``` esbuild: defineEnvVariables: - RELEASE_DATE - RELEASE_VERSION ``` After that, you can acces your variable under `ENV.VARIABLE_NAME`, e.g. `ENV.RELEASE_DATE` Make sure your [`eslint.config.mjs`](RootFiles/JavaScript/eslint.config.mjs) has the global `ENV` enabled: ``` import globals from "globals"; import pluginJs from "@eslint/js"; import prettierRecommended from "eslint-plugin-prettier/recommended"; export default [ pluginJs.configs.recommended, prettierRecommended, { ignores: ["Build/", "Packages/", "**/Public/", "**/Resources/Private/Templates/", "*.noLinter.*"], languageOptions: { globals: { ...globals.browser, ...globals.node, FLOW: "readonly", ENV: "readonly", }, }, }, ]; ``` **Flow Settings in Javascript**Suppose you use tools like [Flownative.Sentry](https://github.com/flownative/flow-sentry), you perhaps want to pass some of the settings to your Javascript without setting a `data` attribute somewhere in the markup. For that, you can enable `esbuild.defineFlowSettings`. Just add the path (e.g. `Flownative.Sentry.release`) to the setting. In the background, the command `flow configuration:show` is runned. If you run the command `build`, which automatically has the flag `--production`, the `FLOW_CONTEXT` is set to `Production`. ``` esbuild: defineFlowSettings: Flownative.Sentry.release ``` `defineFlowSettings` can be also an array of strings: ``` esbuild: defineFlowSettings: - Flownative.Sentry.release - Flownative.Sentry.environment - Flownative.Sentry.dsn ``` Every entry results into one injected variable. In Javascript, you can access the variables like this: ``` import * as Sentry from "@sentry/browser"; Sentry.init({ dsn: FLOW.Flownative.Sentry.dsn, release: FLOW.Flownative.Sentry.release, environment: FLOW.Flownative.Sentry.environment, integrations: [Sentry.browserTracingIntegration()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 0.25, }); ``` **Important** As some chars are not allowed to be injected as variable keys, the will get replaced: CharReplaced with`..``.``-``_``0``ZERO``1``ONE``2``TWO``3``THREE``4``FOUR``5``FIVE``6``SIX``7``SEVEN``8``EIGHT``9``NINE`Make sure your [`eslint.config.mjs`](RootFiles/JavaScript/eslint.config.mjs) has the global `FLOW` enabled: ``` import globals from "globals"; import pluginJs from "@eslint/js"; import prettierRecommended from "eslint-plugin-prettier/recommended"; export default [ pluginJs.configs.recommended, prettierRecommended, { ignores: ["Build/", "Packages/", "**/Public/", "**/Resources/Private/Templates/", "*.noLinter.*"], languageOptions: { globals: { ...globals.browser, ...globals.node, FLOW: "readonly", ENV: "readonly", }, }, }, ]; ``` **Pass options to esbuild**You can pass options to the [esbuild API](https://esbuild.github.io/api/) with `esbuild.options`. **Example**: To remove some functions from the production build, you can use the `esbuild.options.pure` setting. If you have just one function, you can pass a string; otherwise, you have to set it to an array: ``` esbuild: options: pure: - console.log - console.pure ``` **TypeScript**If you want to use [TypeScript](https://www.typescriptlang.org), just choose the option TypeScript on the composer installation **React**Using JSX syntax usually requires you to manually import the JSX library you are using. For example, if you are using [React](https://reactjs.org), by default, you will need to import React into each JSX file like this: ``` import * as React from "react"; render(); ``` **Preact**If you're using JSX with a library other than React (such as [Preact](https://preactjs.com),), you'll likely need to configure the [JSX factory](https://esbuild.github.io/api/#jsx-factory) and [JSX fragment](https://esbuild.github.io/api/#jsx-fragment) settings since they default to `React.createElement`and `React.Fragment` respectively. Add this to your `tsconfig.json` or `jsconfig.json`: ``` { "compilerOptions": { "jsxFactory": "h", "jsxFragmentFactory": "Fragment" } } ``` **Svelte**If you want to use [Svelte](https://svelte.dev), add the following packages to `package.json`: For [pnpm](https://pnpm.io): ``` pnpm add -D svelte svelte-preprocess esbuild-svelte @tsconfig/svelte ``` For [Yarn](https://yarnpkg.com): ``` yarn add --dev svelte svelte-preprocess esbuild-svelte @tsconfig/svelte ``` For [npm](https://www.npmjs.com): ``` npm add -D svelte svelte-preprocess esbuild-svelte @tsconfig/svelte ``` Enable the plugin in your [`pipeline.yaml`](RootFiles/Global/pipeline.yaml) file: ``` esbuild: plugins: svelte: enable: true # Name of the esbuild plugin for svelte # plugin: esbuild-svelte # Name of the preprocess plugin # preprocess: svelte-preprocess # Add here your options options: compilerOptions: # external or injected css: external ``` > You can also configure the esbuild plugin and preprocess package, which should be used. Just add a key `plugin` or `preprocess` and the plugin name. Your `tsconfig.json` may look like this: ``` { "extends": "@tsconfig/svelte/tsconfig.json", "include": ["DistributionPackages/**/Private/*"], "exclude": [ "node_modules/*", "__sapper__/*", "DistributionPackages/**/Public/*", "DistributionPackages/**/Private/Templates/InlineAssets*", "Packages" ], "compilerOptions": { "baseUrl": "./", "paths": { "Packages/*": ["Packages/*"], "DistributionPackages/*": ["DistributionPackages/*"] } } } ``` **Vue.js**If you want to use [Vue.js](https://vuejs.org), add the following packages to `package.json`: For [pnpm](https://pnpm.io): ``` pnpm add -D vue esbuild-plugin-vue3 ``` For [Yarn](https://yarnpkg.com): ``` yarn add --dev vue esbuild-plugin-vue3 ``` For [npm](https://www.npmjs.com): ``` npm add -D vue esbuild-plugin-vue3 ``` Enable the plugin in your [`pipeline.yaml`](RootFiles/Global/pipeline.yaml) file: ``` esbuild: plugins: vue: enable: true # Name of the esbuild plugin for Vue # plugin: esbuild-plugin-vue3 # You can pass your needed options here # options: ``` > You can also configure the esbuild plugin, which should be used. Just add a key `plugin` and add the plugin name. **Babel.js / IE 11 support**If you want to use [Babel.js](https://babeljs.io), add the following packages to `package.json`: For [pnpm](https://pnpm.io): ``` pnpm add -D @babel/core esbuild-plugin-babel ``` For [Yarn](https://yarnpkg.com): ``` yarn add --dev @babel/core esbuild-plugin-babel ``` For [npm](https://www.npmjs.com): ``` npm add -D @babel/core esbuild-plugin-babel ``` as well as additonals babel plugins and/or presets like `@babel/preset-env`, `@babel/plugin-proposal-class-properties`, `@babel/plugin-proposal-object-rest-spread` Further, you have to add a file called `babel.config.json`, for example: ``` { "presets": [ [ "@babel/preset-env", { "modules": false } ] ], "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"] } ``` Finally, enable the plugin in your [`pipeline.yaml`](RootFiles/Global/pipeline.yaml) file: ``` esbuild: plugins: babel: enable: true # You can pass your needed options here # options: ``` As the `ENV` variable is set to `development` or `production` if you run the tasks, you can have different setups (For example remove `console` commands with [`babel-plugin-transform-remove-console`](https://www.npmjs.com/package/babel-plugin-transform-remove-console) on `production`): ``` { "env": { "development": { "presets": [ [ "@babel/preset-env", { "modules": false } ] ], "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"] }, "production": { "presets": [ [ "@babel/preset-env", { "modules": false } ] ], "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread", "transform-remove-console"] } } } ``` If you are a poor person and have to support Internet Explorer, you must edit your `.browserslistrc`. If a browser starting with `ie` is found, the target `es5` gets activated. ``` defaults ie 11 not dead ``` **Additional esbuild plugins**You can also add additional [esbuild](https://esbuild.github.io) plugins, for example [`esbuild-envfile-plugin`](https://www.npmjs.com/package/esbuild-envfile-plugin): ``` esbuild: additionalPlugins: esbuild-envfile-plugin: functionName: setup options: null ``` As the plugin returns not the function directly (like others), you also have to pass the function's name. If a plugin returns the function directly, you don't have to set this. If you want to enable such a plugin without any options, you can just pass `name-of-the-plugin: true` Watching files doesen't work ---------------------------- [](#watching-files-doesent-work) If you encounter the problem that file watching doesn't work (because of limitation of your OS) you may remove some file extentsions from the `buildDefaults.content` This is the original entry: ``` buildDefaults: content: DistributionPackages: DistributionPackages/**/{Private,NodeTypes,Components}/**/*.{fusion,cpx,html,js,jsx,ts,tsx,mjs,mjsx,mts,mtsx,cjs,cjsx,cts,ctsx,svelte,vue} ``` So, if don't use CommonJS, Svelte an Vue and write all your code in TypeScript, you can shorten (and speeding) things up by remove the not needed file extensions: ``` buildDefaults: content: DistributionPackages: DistributionPackages/**/{Private,NodeTypes,Components}/**/*.{fusion,cpx,html,ts,tsx,mts,mtsx} ``` Live-Reloading -------------- [](#live-reloading) If you want to use live reloading, you can do this with [Browsersync](https://browsersync.io/). To install it run `pnpm add --global browser-sync`, `yarn global add browser-sync`, or `npm install -g browser-sync`. Then you have to create an initial config with `browser-sync init`. After that, you need to adjust the created `bs-config.js` file. You can adjust every parameter, but the two parameter you need to set is `files` and `proxy`: ``` module.exports = { files: ["DistributionPackages/**/Public/**/*.css", "DistributionPackages/**/Public/**/*.js"], proxy: "http://your.local.domain", }; ``` If you want to also reload the page if a `fusion` or a template file gets changed, you can do so: ``` module.exports = { files: [ "DistributionPackages/**/Public/**/*.css", "DistributionPackages/**/Public/**/*.js", "DistributionPackages/**/Private/**/*.fusion", "DistributionPackages/**/Private/**/*.html", ], proxy: "http://your.local.domain", }; ``` Make sure you set the correct proxy with the corresponding protocol (`https://` or `http://`), depending on your setup. To create a better overview of the parameter, you can delete the not changed values from the file. To start Browsersync you can run `browser-sync start --config bs-config.js`. If you want to start it together with `watch`, you can add the following line into the `scripts` section: ``` { "watch:browsersync": "browser-sync start --config bs-config.js" } ``` ### Health Score 52 — FairBetter than 96% of packages Maintenance82 Actively maintained with recent releases Popularity38 Limited adoption so far Community20 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 91.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~18 days Total 95 Last Release 102d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5fec51ac160a110a31a72a54ac29e276a447d8306205a052d35491ac9cf0589b?d=identicon)[jonnitto](/maintainers/jonnitto) --- Top Contributors [![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (393 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (28 commits)")[![creative-resort](https://avatars.githubusercontent.com/u/12367437?v=4)](https://github.com/creative-resort "creative-resort (2 commits)")[![c4ll-m3-j4ck](https://avatars.githubusercontent.com/u/7119811?v=4)](https://github.com/c4ll-m3-j4ck "c4ll-m3-j4ck (2 commits)")[![kdambekalns](https://avatars.githubusercontent.com/u/95873?v=4)](https://github.com/kdambekalns "kdambekalns (1 commits)")[![mhsdesign](https://avatars.githubusercontent.com/u/85400359?v=4)](https://github.com/mhsdesign "mhsdesign (1 commits)")[![paavo](https://avatars.githubusercontent.com/u/1118783?v=4)](https://github.com/paavo "paavo (1 commits)") --- Tags buildcssesbuildhacktoberfestjavascriptneoscmspostcssreactsveltetypescriptvuejsjavascriptcsssasstypescripttailwindreactNeosvuepostcsssvelteesbuildPreact ### Embed Badge ![Health badge](/badges/carbon-pipeline/health.svg) ``` [![Health](https://phpackages.com/badges/carbon-pipeline/health.svg)](https://phpackages.com/packages/carbon-pipeline) ``` ### Alternatives [efficiently/larasset Larasset is a library for Laravel 5 which manage assets in an easy way. 684.8k](/packages/efficiently-larasset)[tarunkorat/laravel-asset-cleaner Safely detect and remove unused CSS, JS, SCSS and other assets from Laravel applications 733.2k1](/packages/tarunkorat-laravel-asset-cleaner)[trentrichardson/cakephp-shrink Compiles, combines, and minifies javascript, coffee, less, scss, and css 1619.3k](/packages/trentrichardson-cakephp-shrink) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)