-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tools): Optimize build by switching css processing to esbuild (#…
- Loading branch information
Showing
30 changed files
with
413 additions
and
813 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
packages/create-package/template/config/postcss.components/postcss.config.js
This file was deleted.
Oops, something went wrong.
1 change: 0 additions & 1 deletion
1
packages/create-package/template/config/postcss.themes/postcss.config.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,23 @@ | ||
| const resolve = require("resolve"); | ||
| const assets = require('@ui5/webcomponents-tools/assets-meta.js'); | ||
| const path = require('path'); | ||
|
|
||
| const jsonImportsScript = resolve.sync("@ui5/webcomponents-tools/lib/generate-json-imports/themes.js"); | ||
| const generateReportScript = resolve.sync("@ui5/webcomponents-theming/lib/generate-css-vars-usage-report/index.js"); | ||
|
|
||
| const LIB = path.join(__dirname, `../tools/lib/`); | ||
|
|
||
| module.exports = { | ||
| scripts: { | ||
| clean: "rimraf dist && rimraf src/generated", | ||
| generate: `cross-env UI5_TS=true nps clean build.src build.postcss build.jsonImports`, | ||
| generate: `cross-env UI5_TS=true nps build.postcss build.jsonImports`, | ||
| build: { | ||
| default: `cross-env UI5_TS=true nps clean build.src build.postcss build.jsonImports build.typescript generateReport`, | ||
| src: `copy-and-watch "src/**/*.{js,css}" dist/`, | ||
| src: `copy-and-watch "src/**/*.{json}" dist/`, | ||
| typescript: "tsc", | ||
| postcss: "postcss dist/**/parameters-bundle.css --config config/postcss.themes --base dist/ --dir dist/css/", | ||
| jsonImports: `node "${jsonImportsScript}" src/generated/assets/themes src/generated/json-imports`, | ||
| postcss: `node "${LIB}/css-processors/css-processor-themes.mjs"`, | ||
| jsonImports: `node "${jsonImportsScript}" dist/generated/assets/themes src/generated/json-imports`, | ||
| }, | ||
| copyGenerated: `copy-and-watch "src/generated/**/*.{js,css,json}" dist/generated/`, | ||
| generateReport: `node "${generateReportScript}"`, | ||
| }, | ||
| }; | ||
|
|
||
| console.log(JSON.stringify(module.exports, 2, 2)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1 @@ | ||
| const postcssImport = require('postcss-import'); | ||
| const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js'); | ||
| const postcssScopeVars = require('../lib/postcss-scope-vars/index.js'); | ||
| const cssnano = require('cssnano'); | ||
| const fs = require("fs") | ||
|
|
||
|
|
||
| const packageJSON = JSON.parse(fs.readFileSync("./package.json")) | ||
|
|
||
| module.exports = { | ||
| plugins: [ | ||
| postcssImport(), | ||
| cssnano({ | ||
| preset: [ | ||
| 'default', { | ||
| mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675 | ||
| mergeRules: false, // https://github.com/cssnano/cssnano/issues/730 | ||
| }, | ||
| ] | ||
| }), | ||
| postcssScopeVars({version: packageJSON.version}), | ||
| postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }), | ||
| ] | ||
| } | ||
| module.exports = {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1 @@ | ||
| const postcssImport = require('postcss-import'); | ||
| const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js'); | ||
| const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js'); | ||
| const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js'); | ||
| const postcssScopeVars = require('../lib/postcss-scope-vars/index.js'); | ||
| const cssnano = require('cssnano'); | ||
| const fs = require("fs"); | ||
|
|
||
|
|
||
| const packageJSON = JSON.parse(fs.readFileSync("./package.json")) | ||
| const packageName = packageJSON.name; | ||
|
|
||
| module.exports = { | ||
| plugins: [ | ||
| postcssScopeVars({version: packageJSON.version}), | ||
| postcssImport(), | ||
| combineSelectors({ | ||
| removeDuplicatedProperties: true | ||
| }), | ||
| cssnano({ | ||
| preset: [ | ||
| 'default', { | ||
| mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675 | ||
| }, | ||
| ] | ||
| },), | ||
| postcssCSStoJSON({ toReplace: 'src', packageName }), | ||
| postcssCSStoESM({ toReplace: 'src', packageName }), | ||
| ] | ||
| }; | ||
| module.exports = {}; |
77 changes: 77 additions & 0 deletions
77
packages/tools/lib/css-processors/css-processor-components.mjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { globby } from "globby"; | ||
| import * as esbuild from 'esbuild' | ||
| import * as fs from "fs"; | ||
| import * as path from "path"; | ||
| import { writeFile, mkdir } from "fs/promises"; | ||
| import chokidar from "chokidar"; | ||
| import scopeVariables from "./scope-variables.mjs"; | ||
| import { writeFileIfChanged, getFileContent } from "./shared.mjs"; | ||
|
|
||
| const tsMode = process.env.UI5_TS === "true"; | ||
| const extension = tsMode ? ".css.ts" : ".css.js"; | ||
|
|
||
| const packageJSON = JSON.parse(fs.readFileSync("./package.json")) | ||
| const inputFilesGlob = "src/themes/*.css"; | ||
| const restArgs = process.argv.slice(2); | ||
|
|
||
| let customPlugin = { | ||
| name: 'ui5-tools', | ||
| setup(build) { | ||
| build.initialOptions.write = false; | ||
|
|
||
| build.onEnd(result => { | ||
| result.outputFiles.forEach(async f => { | ||
| // scoping | ||
| const newText = scopeVariables(f.text, packageJSON); | ||
| await mkdir(path.dirname(f.path), {recursive: true}); | ||
| writeFile(f.path, newText); | ||
|
|
||
| // JS/TS | ||
| const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); | ||
| const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true); | ||
| writeFileIfChanged(jsPath, jsContent); | ||
| }); | ||
| }) | ||
| }, | ||
| } | ||
|
|
||
| const getConfig = async () => { | ||
| const config = { | ||
| entryPoints: await globby(inputFilesGlob), | ||
| bundle: true, | ||
| minify: true, | ||
| outdir: 'dist/css', | ||
| outbase: 'src', | ||
| plugins: [ | ||
| customPlugin, | ||
| ] | ||
| }; | ||
| return config; | ||
| } | ||
|
|
||
| if (restArgs.includes("-w")) { | ||
| let ready; | ||
| let config = await getConfig(); | ||
| let ctx = await esbuild.context(config); | ||
| await ctx.watch() | ||
| console.log('watching...') | ||
|
|
||
| // when new component css files are added, they do not trigger a build as no one directly imports them | ||
| // restart the watch mode with the new entry points if a css file is added. | ||
| const watcher = chokidar.watch(inputFilesGlob); | ||
| watcher.on("ready", () => { | ||
| ready = true; // Initial scan is over -> waiting for new files | ||
| }); | ||
| watcher.on("add", async path => { | ||
| if (ready) { | ||
| // new file | ||
| ctx.dispose(); | ||
| config = await getConfig(); | ||
| ctx = await esbuild.context(config); | ||
| ctx.watch(); | ||
| } | ||
| }); | ||
| } else { | ||
| const config = await getConfig(); | ||
| const result = await esbuild.build(config); | ||
| } |
Oops, something went wrong.