babel-plugin-template-html-minifier
Advanced tools
Comparing version 3.1.0 to 4.0.0
@@ -5,2 +5,14 @@ # Changelog | ||
## [4.0.0](https://github.com/cfware/babel-plugin-template-html-minifier/compare/v3.1.0...v4.0.0) (2020-01-26) | ||
### ⚠ BREAKING CHANGES | ||
* bump requirement to node.js 10.13.0 | ||
### Features | ||
* bump requirement to node.js 10.13.0 ([84755e7](https://github.com/cfware/babel-plugin-template-html-minifier/commit/84755e7210daff50abc61a5b6bddbd32e5ba2943)) | ||
* support minifying partial css ([#35](https://github.com/cfware/babel-plugin-template-html-minifier/issues/35)) ([c1a649f](https://github.com/cfware/babel-plugin-template-html-minifier/commit/c1a649f97ccf595960d0efe219d020712d8dcd0b)) | ||
## [3.1.0](https://github.com/cfware/babel-plugin-template-html-minifier/compare/v3.0.2...v3.1.0) (2019-07-24) | ||
@@ -7,0 +19,0 @@ |
'use strict'; | ||
const isBuiltinModule = require('is-builtin-module'); | ||
const createMinifyCSS = require('./minify-css'); | ||
@@ -53,3 +54,3 @@ function ownerName(importSource) { | ||
const dupCheck = new Set(); | ||
namedExports.forEach(item => { | ||
for (const item of namedExports) { | ||
if (dupCheck.has(item.name)) { | ||
@@ -60,3 +61,3 @@ throw new Error(`Module ${name} lists export ${item.name} multiple times.`); | ||
dupCheck.add(item.name); | ||
}); | ||
} | ||
@@ -87,3 +88,3 @@ moduleConfig.count = items.length; | ||
return modulesConfig[bareName(importSource)] || null; | ||
} catch (error) { | ||
} catch (_) { | ||
return null; | ||
@@ -103,5 +104,5 @@ } | ||
const modulesConfig = {}; | ||
Object.keys(modules).forEach(name => { | ||
modulesConfig[name] = normalizeModuleConfig(name, modules[name].map(normalizeExportConfig)); | ||
}); | ||
for (const [name, module] of Object.entries(modules)) { | ||
modulesConfig[name] = normalizeModuleConfig(name, module.map(normalizeExportConfig)); | ||
} | ||
@@ -111,5 +112,24 @@ return modulesConfig; | ||
function normalizeMinifierConfig(config) { | ||
if (!config || !config.htmlMinifier) { | ||
return undefined; | ||
} | ||
if (!config.htmlMinifier.minifyCSS || typeof config.htmlMinifier.minifyCSS === 'function') { | ||
return config.htmlMinifier; | ||
} | ||
// Create a custom minifyCSS function is the user didn't provide one | ||
const minifyCSS = createMinifyCSS(config); | ||
return { | ||
...config.htmlMinifier, | ||
minifyCSS | ||
}; | ||
} | ||
module.exports = { | ||
normalizeModulesConfig, | ||
getModuleConfig | ||
getModuleConfig, | ||
normalizeMinifierConfig | ||
}; |
@@ -5,3 +5,3 @@ 'use strict'; | ||
const cookRawQuasi = require('./cook-raw-quasi'); | ||
const {normalizeModulesConfig, getModuleConfig} = require('./config.js'); | ||
const {normalizeModulesConfig, normalizeMinifierConfig, getModuleConfig} = require('./config.js'); | ||
@@ -45,3 +45,3 @@ function setupDefaultBindingOption(bindings, binding, moduleConfig) { | ||
id = Math.random().toString(36).replace(/^0\.\d*/, ''); | ||
} while (value.indexOf(id) !== -1); | ||
} while (value.includes(id)); | ||
@@ -69,3 +69,2 @@ return 'babel-plugin-template-html-minifier:' + id; | ||
const quasis = template.node.quasis.map(quasi => quasi.value.raw); | ||
const placeholder = uniqueId(quasis.join('')); | ||
@@ -76,5 +75,5 @@ const tags = encapsulationGetTags(bindingOptions); | ||
try { | ||
const minified = htmlMinifier.minify(tags.opening + quasis.join(placeholder) + tags.closing, state.opts.htmlMinifier); | ||
const minified = htmlMinifier.minify(tags.opening + quasis.join(placeholder) + tags.closing, state.minifierConfig); | ||
if (!minified.startsWith(tags.opening) || !minified.endsWith(tags.closing)) { | ||
throw path.buildCodeFrameError(majorDeleteError); | ||
throw new Error(majorDeleteError); | ||
} | ||
@@ -84,3 +83,3 @@ | ||
if (minifiedParts.length !== quasis.length) { | ||
throw path.buildCodeFrameError(majorDeleteError); | ||
throw new Error(majorDeleteError); | ||
} | ||
@@ -91,3 +90,3 @@ | ||
if (state.failOnError) { | ||
throw error; | ||
throw path.buildCodeFrameError(error.message); | ||
} else if (state.logOnError) { | ||
@@ -159,2 +158,3 @@ console.error(error.message); | ||
this.moduleConfigs = normalizeModulesConfig(this.opts.modules); | ||
this.minifierConfig = normalizeMinifierConfig(this.opts); | ||
this.failOnError = this.opts.failOnError !== false; | ||
@@ -189,6 +189,6 @@ this.logOnError = this.opts.logOnError !== false; | ||
} else if (idPath.isObjectPattern()) { | ||
idPath.node.properties.forEach(prop => { | ||
for (const prop of idPath.node.properties) { | ||
const binding = path.scope.getBinding(prop.value.name); | ||
setupNamedBindingOption(this.bindings, binding, moduleConfig, prop.key.name); | ||
}); | ||
} | ||
} | ||
@@ -202,3 +202,3 @@ }, | ||
path.get('specifiers').forEach(spec => { | ||
for (const spec of path.get('specifiers')) { | ||
const binding = path.scope.getBinding(spec.node.local.name); | ||
@@ -212,3 +212,3 @@ if (spec.isImportNamespaceSpecifier()) { | ||
} | ||
}); | ||
} | ||
}, | ||
@@ -215,0 +215,0 @@ TaggedTemplateExpression(path) { |
{ | ||
"name": "babel-plugin-template-html-minifier", | ||
"description": "Minify HTML in tagged template strings using html-minifier", | ||
"version": "3.1.0", | ||
"version": "4.0.0", | ||
"main": "lib/index.js", | ||
"scripts": { | ||
"release": "standard-version --sign", | ||
"test": "xo && nyc ava -v" | ||
"pretest": "xo", | ||
"test": "tap" | ||
}, | ||
@@ -27,3 +28,7 @@ "repository": { | ||
"homepage": "https://github.com/cfware/babel-plugin-template-html-minifier#readme", | ||
"engines": { | ||
"node": ">=10.13.0" | ||
}, | ||
"dependencies": { | ||
"clean-css": "^4.2.1", | ||
"html-minifier": "^4.0.0", | ||
@@ -35,12 +40,9 @@ "is-builtin-module": "^3.0.0" | ||
"@babel/plugin-transform-template-literals": "^7.2.0", | ||
"@cfware/nyc": "^0.5.0", | ||
"ava": "^2.0.0", | ||
"choo": "^6.13.1", | ||
"choo": "^7.0.0", | ||
"hyperhtml-element": "^3.6.0", | ||
"lit-element": "^2.0.1", | ||
"lit-html": "^1.0.0", | ||
"nyc": "^14.1.0", | ||
"pify": "^4.0.1", | ||
"standard-version": "^6.0.1", | ||
"xo": "^0.24.0" | ||
"standard-version": "^7.0.0", | ||
"tap": "^14.10.6", | ||
"xo": "^0.25.3" | ||
}, | ||
@@ -47,0 +49,0 @@ "xo": { |
@@ -26,7 +26,2 @@ # babel-plugin-template-html-minifier | ||
"modules": { | ||
"lit-html": ["html"], | ||
"lit-element": [ | ||
"html", | ||
{"name": "css", "encapsulation": "style"} | ||
], | ||
"choo/html": [null], | ||
@@ -44,2 +39,27 @@ "hyperhtml": [{"name": "bind", "type": "factory"}], | ||
Example for `lit-html` and `lit-element`: | ||
```json | ||
{ | ||
"plugins": [ | ||
["template-html-minifier", { | ||
"modules": { | ||
"lit-html": ["html"], | ||
"lit-element": [ | ||
"html", | ||
{"name": "css", "encapsulation": "style"} | ||
], | ||
}, | ||
"strictCSS": true, | ||
"htmlMinifier": { | ||
"collapseWhitespace": true, | ||
"conservativeCollapse": true, | ||
"removeComments": true, | ||
"caseSensitive": true, | ||
}, | ||
}] | ||
] | ||
} | ||
``` | ||
## Options | ||
@@ -88,2 +108,20 @@ | ||
### `strictCSS` | ||
Whether CSS should only be minified when it is valid CSS. This is necessary when using css templates which allow multiple strings of invalid CSS together to make a valid stylesheet. This is the case for example with `lit-element`: | ||
```js | ||
const unit = css`px`; | ||
const widthXL = 400; | ||
const styleSheet = css` | ||
@media (${widthXL}px) { | ||
.foo { | ||
font-size: 16${unit}; | ||
} | ||
} | ||
`; | ||
``` | ||
Minification happens per template literal, it is only able to see the unconcatenated css literals and minify those. It will try to do the right thing, but it cannot handle every scenario. If you are using `lit-element`, and write these types of templates, you need to set `strictCSS` to true. | ||
### `modules` | ||
@@ -95,3 +133,3 @@ | ||
### failOnError | ||
### `failOnError` | ||
@@ -105,5 +143,5 @@ Determines whether an error should be thrown when minification failed. defaults to true. | ||
### logOnError | ||
### `logOnError` | ||
Determines whether failure to minify a template should be logged in case of an error. | ||
Defaults to true. | ||
Defaults to true. This setting only takes effect when `failOnError` is false. | ||
@@ -237,3 +275,9 @@ ```js | ||
## `babel-plugin-template-html-minifier` for enterprise | ||
Available as part of the Tidelift Subscription. | ||
The maintainers of `babel-plugin-template-html-minifier` and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-babel-plugin-template-html-minifier?utm_source=npm-babel-plugin-template-html-minifier&utm_medium=referral&utm_campaign=enterprise&utm_term=repo) | ||
[npm-image]: https://img.shields.io/npm/v/babel-plugin-template-html-minifier.svg | ||
@@ -240,0 +284,0 @@ [npm-url]: https://npmjs.org/package/babel-plugin-template-html-minifier |
26507
9
9
390
288
3
+ Addedclean-css@^4.2.1