Support other atrules (#2995)

* Add test for @page/@import/@charset/@namespace/@font-face

* Add support for declarations inside at-rules

* Quick formatting adjustment
pull/3502/head
Christian Kaisermann 6 years ago committed by Conduitry
parent c470d00489
commit b286fdc26b

@ -9,7 +9,32 @@ function remove_css_prefix(name: string): string {
return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
}
const is_keyframes_node = (node: Node) => remove_css_prefix(node.name) === 'keyframes';
const is_keyframes_node = (node: Node) =>
remove_css_prefix(node.name) === 'keyframes';
const at_rule_has_declaration = ({ block }: Node): true =>
block &&
block.children &&
block.children.find((node: Node) => node.type === 'Declaration');
function minify_declarations(
code: MagicString,
start: number,
declarations: Array<Declaration>
): number {
let c = start;
declarations.forEach((declaration, i) => {
const separator = i > 0 ? ';' : '';
if ((declaration.node.start - c) > separator.length) {
code.overwrite(c, declaration.node.start, separator);
}
declaration.minify(code);
c = declaration.node.end;
});
return c;
}
// https://github.com/darkskyapp/string-hash/blob/master/index.js
function hash(str: string): string {
@ -64,16 +89,7 @@ class Rule {
code.remove(c, this.node.block.start);
c = this.node.block.start + 1;
this.declarations.forEach((declaration, i) => {
const separator = i > 0 ? ';' : '';
if ((declaration.node.start - c) > separator.length) {
code.overwrite(c, declaration.node.start, separator);
}
declaration.minify(code);
c = declaration.node.end;
});
c = minify_declarations(code, c, this.declarations)
code.remove(c, this.node.block.end - 1);
}
@ -141,10 +157,12 @@ class Declaration {
class Atrule {
node: Node;
children: Array<Atrule|Rule>;
declarations: Array<Declaration>;
constructor(node: Node) {
this.node = node;
this.children = [];
this.declarations = [];
}
apply(node: Element, stack: Element[]) {
@ -179,11 +197,6 @@ class Atrule {
});
code.remove(c, this.node.block.start);
} else if (is_keyframes_node(this.node)) {
let c = this.node.start + this.node.name.length + 1;
if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
c = this.node.expression.end;
if (this.node.block.start - c > 0) code.remove(c, this.node.block.start);
} else if (this.node.name === 'supports') {
let c = this.node.start + 9;
if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
@ -192,12 +205,26 @@ class Atrule {
c = query.end;
});
code.remove(c, this.node.block.start);
} else {
let c = this.node.start + this.node.name.length + 1;
if(this.node.expression) {
if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
c = this.node.expression.end;
}
if (this.node.block && this.node.block.start - c > 0) {
code.remove(c, this.node.block.start);
}
}
// TODO other atrules
if (this.node.block) {
let c = this.node.block.start + 1;
if (this.declarations.length) {
c = minify_declarations(code, c, this.declarations);
// if the atrule has children, leave the last declaration semicolon alone
if (this.children.length) c++;
}
this.children.forEach(child => {
if (child.is_used(dev)) {
@ -296,6 +323,11 @@ export default class Stylesheet {
this.keyframes.set(expression.name, `${this.id}-${expression.name}`);
}
});
} else if (at_rule_has_declaration(node)) {
const at_rule_declarations = node.block.children
.filter(node => node.type === 'Declaration')
.map(node => new Declaration(node));
atrule.declarations.push(...at_rule_declarations);
}
current_atrule = atrule;

@ -0,0 +1,3 @@
<style>
@charset "utf-8";
</style>

@ -0,0 +1 @@
@font-face{font-family:MyHelvetica;src:local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);font-weight:bold}

@ -0,0 +1,7 @@
<style>
@font-face {
font-family: MyHelvetica;
src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);
font-weight: bold;
}
</style>

@ -0,0 +1 @@
@import 'custom.css';@import "common.css" screen;@import url(chrome://communicator/skin/);@import url(fineprint.css) print;@import url(landscape.css) screen and (orientation:landscape);@import url(red.css) (min-width:400px);

@ -0,0 +1,8 @@
<style>
@import 'custom.css';
@import "common.css" screen;
@import url(chrome://communicator/skin/);
@import url(fineprint.css) print;
@import url(landscape.css) screen and (orientation:landscape);
@import url(red.css) (min-width:400px);
</style>

@ -0,0 +1 @@
@namespace url(http://www.w3.org/1999/xhtml);@namespace svg url(http://www.w3.org/2000/svg);a{color:blue}svg|a{color:green}*|a{color:red}

@ -0,0 +1,19 @@
<style>
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
:global(a) {
color: blue;
}
/* This matches all SVG <a> elements */
:global(svg|a) {
color: green;
}
/* This matches both XHTML and SVG <a> elements */
:global(*|a) {
color: red;
}
</style>

@ -0,0 +1 @@
@page vertical{size:A4 portrait;@top-center{content:"Vertical"}}@page :right{@top-center{content:"Preliminary edition"}@bottom-center{content:counter(page)}}@page :first{color:green;font-size:20pt;@top-left{content:"foo";color:blue}@top-right{content:"bar"}}

@ -0,0 +1,32 @@
<style>
@page vertical {
size: A4 portrait;
@top-center {
content: "Vertical";
}
}
@page :right {
@top-center {
content: "Preliminary edition";
}
@bottom-center {
content: counter(page);
}
}
@page :first {
color: green;
font-size: 20pt;
@top-left {
content: "foo";
color: blue;
}
@top-right {
content: "bar";
}
}
</style>

@ -0,0 +1 @@
@page{margin:1cm;size:A4;bleed:7pt}

@ -0,0 +1,7 @@
<style>
@page{
margin: 1cm;
size: A4;
bleed: 7pt;
}
</style>
Loading…
Cancel
Save