Skip to content

Commit

Permalink
fix: avoid generation of empty css files when source styles are impor…
Browse files Browse the repository at this point in the history 
…ted in TS file
  • Loading branch information
@webdiscus
webdiscus committed Sep 2, 2023
1 parent e808ab7 commit e780eca
Show file tree
Hide file tree
Showing 24 changed files with 339 additions and 322 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Change log

## 2.10.1 (2023-09-02)

- fix: avoid generation of empty css files when source styles are imported in TS file

## 2.10.0 (2023-09-01)

- feat: add Handlebars helpers `assign`, `partial` and `block` to extend a template layout with blocks
Expand Down
2 changes: 1 addition & 1 deletion examples/handlebars-layout/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Using assign, blocks and layouts in Handlebars

Using the `partial` and `block` build-in plugin helpers you can extend a template layout the many blocks.
Using the `partial` and `block` build-in plugin helpers you can extend a template layout with many blocks.
You can assign many variables, which will be available in a partial.

Use the [HTML Builder Plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) for Webpack
Expand Down
244 changes: 55 additions & 189 deletions package-lock.json
View file

Large diffs are not rendered by default.

11 changes: 5 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html-bundler-webpack-plugin",
"version": "2.10.0",
"version": "2.10.1",
"description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
"keywords": [
"html",
Expand All @@ -12,11 +12,9 @@
"template",
"ejs",
"handlebars",
"mustache",
"nunjucks",
"eta",
"hbs",
"inline",
"style",
"javascript",
"css",
Expand Down Expand Up @@ -100,7 +98,7 @@
},
"devDependencies": {
"@babel/core": "^7.22.11",
"@babel/preset-env": "^7.22.10",
"@babel/preset-env": "^7.22.14",
"@test-fixtures/js": "0.0.2",
"@test-fixtures/lorem": "0.0.2",
"@test-fixtures/scss": "0.0.7",
Expand All @@ -112,15 +110,16 @@
"ejs": "^3.1.9",
"handlebars": "^4.7.8",
"jest": "^29.6.4",
"liquidjs": "^10.9.1",
"liquidjs": "^10.9.2",
"mustache": "^4.2.0",
"nunjucks": "^3.2.4",
"prettier": "^3.0.2",
"prettier": "^3.0.3",
"responsive-loader": "^3.1.2",
"sass": "^1.65.1",
"sass-loader": "^13.3.2",
"sharp": "^0.32.5",
"ts-loader": "9.4.4",
"typescript": "5.2.2",
"webpack": "^5.88.2",
"webpack-cli": "5.1.4",
"webpack-dev-server": "^4.15.1"
Expand Down
4 changes: 2 additions & 2 deletions src/Plugin/AssetCompiler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -673,8 +673,8 @@ class AssetCompiler {
Collection.addEntry(entry);

for (const module of chunkModules) {
const { _bundlerPluginMeta, buildInfo, resource, resourceResolveData } = module;
const { isScript, isImportedStyle, isDependencyUrl } = _bundlerPluginMeta || {};
const { buildInfo, resource, resourceResolveData } = module;
const { isScript, isImportedStyle } = resourceResolveData?._bundlerPluginMeta || {};
let moduleType = module.type;

if (
Expand Down
15 changes: 7 additions & 8 deletions src/Plugin/Messages/Info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ const Dependency = require('../../Loader/Dependency');
const PluginService = require('../PluginService');

const gray = ansi256(244);

const padLevel1 = 15;
const padLevel1 = 19;
const padLevel2 = padLevel1 + 10;
const padChunks = padLevel1 + 4;
const padChunks = padLevel1 + 2;

/**
* Get the compilation name styled based on the presence of an error.
Expand All @@ -44,7 +43,7 @@ const colorType = (item, pad) => {
const color = inline ? yellowBright : ansi256(112);

if (type === Collection.type.style && item.imports != null) {
type = inline ? `inline styles` : `import styles`;
type = inline ? `inline styles` : `import styles in`;
} else if (inline) {
type = `inline`;
}
Expand Down Expand Up @@ -84,11 +83,10 @@ const renderAssets = (item) => {
}

for (let { inline, chunkFile, assetFile } of item.chunks) {
li = isSingleChunk ? '->' : '';
if (inline) {
li = isSingleChunk ? '~>' : '~';
str += `${li.padStart(padLen)} ${gray(path.basename(chunkFile))} ${yellow`(inline)`}\n`;
} else {
li = isSingleChunk ? '->' : '-';
str += `${li.padStart(padLen)} ${assetFile}\n`;
}
}
Expand Down Expand Up @@ -141,7 +139,7 @@ const verbose = () => {

// assets
if (resources.length > 0) {
str += green(`assets:`) + `\n`;
str += green`assets:` + `\n`;
}

for (const item of resources) {
Expand All @@ -168,10 +166,11 @@ const verbose = () => {
}

if (hasImports) {
str += `${''.padStart(padLevel1)} ${ansi256(214)`sources:`}\n`;
for (const importedItem of item.imports) {
let sourceFile = relativePathForView(importedItem.resource);

str += `${''.padStart(padLevel1)}` + ` ${cyanBright(sourceFile)}\n`;
str += `${''.padStart(padChunks)} ${ansi256(143)(sourceFile)}\n`;
str += renderAssets(importedItem);
}
} else {
Expand Down
224 changes: 112 additions & 112 deletions test/__snapshots__/output.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,110 +8,110 @@ exports[`verbose output into console verbose output 1`] = `
source: src/views/home/index.html
output: dist/
assets:
style: src/styles/style.css
-> css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> assets/img/plum.d39e7174.png
style: src/views/home/style.css
-> css/style.bundle.1.css
resource: ~fixtures/images/kiwi.png
-> ../assets/img/kiwi.da3e3cc9.png
inline: ~fixtures/images/icons/iphone.png
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
resource: ~fixtures/images/image.webp
-> assets/img/image-160w.webp
inline: ~fixtures/images/icons/imac.svg
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/home.svg
inline: ~fixtures/images/stern.svg
script: src/views/home/home.js
-> js/home.bundle.js
style: src/styles/style.css
-> css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> assets/img/plum.d39e7174.png
style: src/views/home/style.css
-> css/style.bundle.1.css
resource: ~fixtures/images/kiwi.png
-> ../assets/img/kiwi.da3e3cc9.png
inline: ~fixtures/images/icons/iphone.png
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
resource: ~fixtures/images/image.webp
-> assets/img/image-160w.webp
inline: ~fixtures/images/icons/imac.svg
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/home.svg
inline: ~fixtures/images/stern.svg
script: src/views/home/home.js
-> js/home.bundle.js
ENTRY lang/de/index.html
source: src/views/home/index.html
output: dist/
assets:
style: src/styles/style.css
-> ../../css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> ../../assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> ../../assets/img/plum.d39e7174.png
style: src/views/home/style.css
-> ../../css/style.bundle.1.css
resource: ~fixtures/images/kiwi.png
-> ../assets/img/kiwi.da3e3cc9.png
inline: ~fixtures/images/icons/iphone.png
resource: ~fixtures/images/apple.png
-> ../../assets/img/apple.02a7c382.png
resource: ~fixtures/images/image.webp
-> ../../assets/img/image-160w.webp
inline: ~fixtures/images/icons/imac.svg
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/home.svg
inline: ~fixtures/images/stern.svg
script: src/views/home/home.js
-> ../../js/home.bundle.js
style: src/styles/style.css
-> ../../css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> ../../assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> ../../assets/img/plum.d39e7174.png
style: src/views/home/style.css
-> ../../css/style.bundle.1.css
resource: ~fixtures/images/kiwi.png
-> ../assets/img/kiwi.da3e3cc9.png
inline: ~fixtures/images/icons/iphone.png
resource: ~fixtures/images/apple.png
-> ../../assets/img/apple.02a7c382.png
resource: ~fixtures/images/image.webp
-> ../../assets/img/image-160w.webp
inline: ~fixtures/images/icons/imac.svg
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/home.svg
inline: ~fixtures/images/stern.svg
script: src/views/home/home.js
-> ../../js/home.bundle.js
ENTRY pages/about.html
source: src/views/about/index.html
output: dist/
assets:
style: @test-fixtures/scss/dist/fixture-styles.css
-> ../css/fixture-styles.bundle.css
resource: @test-fixtures/scss/fixture-images/fixture-image-bg.png
-> ../assets/img/fixture-image-bg.697ef306.png
style: src/styles/style.css
-> ../css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> ../assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> ../assets/img/plum.d39e7174.png
style: src/views/about/style.css
-> ../css/style.bundle.2.css
resource: ~fixtures/images/melon.png
-> ../assets/img/melon.a92cb911.png
inline: ~fixtures/images/token.svg
resource: ~fixtures/images/fig.png
-> ../assets/img/fig.c6809878.png
resource: ~fixtures/images/responsive/hardware.webp?size=300
-> ../assets/img/hardware-300w.webp
resource: ~fixtures/images/responsive/hardware.webp?sizes[]=200&sizes[]=400
-> ../assets/img/hardware-200w.webp 200w,../assets/img/hardware-400w.webp 400w
script: src/views/about/about-split.js
-> chunks:
- ../js/612.bundle.js
- ../js/about-split.bundle.js
script: src/views/about/about-inline-split.js?inline
-> chunks:
~ 544.bundle.js (inline)
~ about-inline-split.bundle.js (inline)
script: src/views/about/about.js
-> ../js/about.bundle.js
style: @test-fixtures/scss/dist/fixture-styles.css
-> ../css/fixture-styles.bundle.css
resource: @test-fixtures/scss/fixture-images/fixture-image-bg.png
-> ../assets/img/fixture-image-bg.697ef306.png
style: src/styles/style.css
-> ../css/style.bundle.css
resource: ~fixtures/fonts/dummy/font-01.woff2
-> ../assets/fonts/font-01.woff2
resource: ~fixtures/fonts/dummy/font-02.woff2
-> ../assets/fonts/font-02.woff2
inline: src/styles/inlined.css?inline
resource: ~fixtures/images/pear.png
-> ../assets/img/pear.6b9b072a.png
inline: ~fixtures/images/icons/iphone.png
inline: ~fixtures/images/icons/imac.svg
resource: ~fixtures/images/plum.png
-> ../assets/img/plum.d39e7174.png
style: src/views/about/style.css
-> ../css/style.bundle.2.css
resource: ~fixtures/images/melon.png
-> ../assets/img/melon.a92cb911.png
inline: ~fixtures/images/token.svg
resource: ~fixtures/images/fig.png
-> ../assets/img/fig.c6809878.png
resource: ~fixtures/images/responsive/hardware.webp?size=300
-> ../assets/img/hardware-300w.webp
resource: ~fixtures/images/responsive/hardware.webp?sizes[]=200&sizes[]=400
-> ../assets/img/hardware-200w.webp 200w,../assets/img/hardware-400w.webp 400w
script: src/views/about/about-split.js
-> chunks:
../js/612.bundle.js
../js/about-split.bundle.js
script: src/views/about/about-inline-split.js?inline
-> chunks:
544.bundle.js (inline)
about-inline-split.bundle.js (inline)
script: src/views/about/about.js
-> ../js/about.bundle.js
"
`;
Expand All @@ -128,12 +128,12 @@ watch files:
source: src/index.html
output: dist/
assets:
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
"
`;
Expand All @@ -150,12 +150,12 @@ watch files:
source: src/index.html
output: dist/
assets:
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
"
`;
Expand All @@ -172,12 +172,12 @@ watch files:
source: src/index.html
output: dist/
assets:
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
style: src/style.css
-> assets/css/style.bundle.css
resource: ~fixtures/images/apple.png
-> assets/img/apple.02a7c382.png
script: src/main.js
-> assets/js/main.bundle.js
"
`;
Loading

0 comments on commit e780eca

Please sign in to comment.