Support css "none" option

pull/7914/head
maxiruani 4 years ago
parent d04b1cca24
commit b326a4b35f

@ -35,8 +35,16 @@ const valid_options = [
'cssHash' 'cssHash'
]; ];
const valid_css_values = [
true,
false,
'injected',
'external',
'none'
];
function validate_options(options: CompileOptions, warnings: Warning[]) { function validate_options(options: CompileOptions, warnings: Warning[]) {
const { name, filename, loopGuardTimeout, dev, namespace } = options; const { name, filename, loopGuardTimeout, dev, namespace, css } = options;
Object.keys(options).forEach(key => { Object.keys(options).forEach(key => {
if (!valid_options.includes(key)) { if (!valid_options.includes(key)) {
@ -72,6 +80,21 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
}); });
} }
if (valid_css_values.indexOf(css) === -1) {
throw new Error(`options.css must be true, false, "injected", "external" or "none" (got '${css}')`);
}
if (css === true || css === false) {
options.css = css === true ? 'injected' : 'external';
const message = `options.css as a boolean is deprecated. Use "${options.css}" instead of ${css}.`;
warnings.push({
code: 'options-css-boolean-deprecated',
message,
filename,
toString: () => message
});
}
if (namespace && valid_namespaces.indexOf(namespace) === -1) { if (namespace && valid_namespaces.indexOf(namespace) === -1) {
const match = fuzzymatch(namespace, valid_namespaces); const match = fuzzymatch(namespace, valid_namespaces);
if (match) { if (match) {
@ -83,7 +106,7 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
} }
export default function compile(source: string, options: CompileOptions = {}) { export default function compile(source: string, options: CompileOptions = {}) {
options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true }, options); options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true, css: 'injected' }, options);
const stats = new Stats(); const stats = new Stats();
const warnings = []; const warnings = [];

@ -53,7 +53,7 @@ export default function dom(
const should_add_css = ( const should_add_css = (
!options.customElement && !options.customElement &&
!!styles && !!styles &&
options.css !== false options.css === 'injected'
); );
if (should_add_css) { if (should_add_css) {

@ -179,7 +179,7 @@ export interface CompileOptions {
legacy?: boolean; legacy?: boolean;
customElement?: boolean; customElement?: boolean;
tag?: string; tag?: string;
css?: boolean; css?: 'injected' | 'external' | 'none' | boolean;
loopGuardTimeout?: number; loopGuardTimeout?: number;
namespace?: string; namespace?: string;
cssHash?: CssHashGetter; cssHash?: CssHashGetter;
@ -191,6 +191,7 @@ export interface CompileOptions {
export interface ParserOptions { export interface ParserOptions {
filename?: string; filename?: string;
customElement?: boolean; customElement?: boolean;
css?: 'injected' | 'external' | 'none' | boolean;
} }
export interface Visitor { export interface Visitor {

@ -19,6 +19,7 @@ export class Parser {
readonly template: string; readonly template: string;
readonly filename?: string; readonly filename?: string;
readonly customElement: boolean; readonly customElement: boolean;
readonly css_mode: 'injected' | 'external' | 'none' | boolean;
index = 0; index = 0;
stack: TemplateNode[] = []; stack: TemplateNode[] = [];
@ -37,6 +38,7 @@ export class Parser {
this.template = template.trimRight(); this.template = template.trimRight();
this.filename = options.filename; this.filename = options.filename;
this.customElement = options.customElement; this.customElement = options.customElement;
this.css_mode = options.css;
this.html = { this.html = {
start: null, start: null,

@ -16,6 +16,12 @@ export default function read_style(parser: Parser, start: number, attributes: No
const content_end = parser.index; const content_end = parser.index;
// discard styles when css is disabled
if (parser.css_mode === 'none') {
parser.read(/<\/style\s*>/);
return null;
}
let ast; let ast;
try { try {

@ -0,0 +1,7 @@
<div>foo</div>
<style>
div {
color: red;
}
</style>

@ -0,0 +1,32 @@
{
"html": {
"start": 0,
"end": 14,
"type": "Fragment",
"children": [
{
"start": 0,
"end": 14,
"type": "Element",
"name": "div",
"attributes": [],
"children": [
{
"start": 5,
"end": 8,
"type": "Text",
"raw": "foo",
"data": "foo"
}
]
},
{
"start": 14,
"end": 16,
"type": "Text",
"raw": "\n\n",
"data": "\n\n"
}
]
}
}
Loading…
Cancel
Save