Skip to content

Commit 6e1aed3

Browse files
gucong3000gucong3000
authored
Add support for Svelte (#69)
1 parent ed46e76 commit 6e1aed3

File tree

5 files changed

+174
-74
lines changed

5 files changed

+174
-74
lines changed

‎extract.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ function getLang (attribute) {
8080
function htmlParser (source, opts, styles) {
8181
styles = styles || [];
8282

83-
const standard = opts.from && /\.(?:\w*html?|x(?:ht|ml|slt?)|markdown|md)$/i.test(opts.from);
83+
const standard = opts.from && /\.(?:\w*html?|xht|xslt?|jsp|aspx?|ejs|php\d*|twig|liquid|m(?:ark)?d(?:ow)?n|mk?d)$/i.test(opts.from);
8484

8585
function onStyleTag (style) {
8686
if (!(style.inHtml || style.inXsls || style.inXslt || standard) && (style.attribute.src || style.attribute.href) && !style.content.trim()) {
@@ -91,10 +91,11 @@ function htmlParser (source, opts, styles) {
9191
}
9292

9393
function onStyleAttribute (style) {
94-
if (style.inTemplate && /\{\{[\s\S]*?\}\}/g.test(style.content)) {
94+
if (/{[\s\S]*?}/g.test(style.content)) {
9595
style.syntax = loadSyntax(opts, __dirname);
9696
style.lang = "custom-template";
9797
} else {
98+
// style.ignoreErrors = opts.from && /\.(?:jsp|aspx?|ejs|php\d*|twig)$/i.test(opts.from);
9899
style.lang = "css";
99100
}
100101
styles.push(style);

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "postcss-html",
3-
"version": "0.30.0",
3+
"version": "0.31.0",
44
"description": "PostCSS syntax for parsing HTML (and HTML-like)",
55
"repository": {
66
"type": "git",
@@ -43,19 +43,19 @@
4343
},
4444
"peerDependencies": {
4545
"postcss": ">=5.0.0",
46-
"postcss-syntax": ">=0.30.0"
46+
"postcss-syntax": ">=0.31.0"
4747
},
4848
"devDependencies": {
49-
"autoprefixer": "^8.6.3",
49+
"autoprefixer": "^8.6.4",
5050
"chai": "^4.1.2",
5151
"codecov": "^3.0.2",
5252
"mocha": "^5.2.0",
5353
"nyc": "^12.0.2",
54-
"postcss": "^6.0.22",
54+
"postcss": "^6.0.23",
5555
"postcss-less": "^2.0.0",
5656
"postcss-safe-parser": "^3.0.1",
57-
"postcss-scss": "^1.0.5",
58-
"postcss-syntax": ">=0.30.0",
57+
"postcss-scss": "^1.0.6",
58+
"postcss-syntax": ">=0.31.0",
5959
"sugarss": "^1.0.1"
6060
}
6161
}

‎test/interpolation.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
"use strict";
2+
3+
const expect = require("chai").expect;
4+
const syntax = require("../");
5+
6+
describe("template interpolation", () => {
7+
it("PHP", () => {
8+
const document = syntax.parse(
9+
[
10+
"<a style=\"color: #<?php echo '000' ?>;font-size:<?php echo '12' ?>px\">",
11+
"</a>",
12+
].join("\n"), {
13+
from: "quickapp.ux",
14+
}
15+
);
16+
17+
expect(document.nodes).to.have.lengthOf(1);
18+
19+
const root = document.first;
20+
expect(root.source).to.have.property("lang", "css");
21+
expect(root.nodes).to.have.lengthOf(2);
22+
expect(root.first).to.have.property("type", "decl");
23+
expect(root.first).to.have.property("prop", "color");
24+
expect(root.first).to.have.property("value", "#<?php echo '000' ?>");
25+
expect(root.last).to.have.property("type", "decl");
26+
expect(root.last).to.have.property("prop", "font-size");
27+
expect(root.last).to.have.property("value", "<?php echo '12' ?>px");
28+
});
29+
30+
it("EJS", () => {
31+
const document = syntax.parse(
32+
[
33+
"<a style=\"color: #<%= user.color %>;font-size:<%= user.size %>px\">",
34+
"</a>",
35+
].join("\n"), {
36+
from: "quickapp.ux",
37+
}
38+
);
39+
40+
expect(document.nodes).to.have.lengthOf(1);
41+
42+
const root = document.first;
43+
expect(root.source).to.have.property("lang", "css");
44+
expect(root.nodes).to.have.lengthOf(2);
45+
expect(root.first).to.have.property("type", "decl");
46+
expect(root.first).to.have.property("prop", "color");
47+
expect(root.first).to.have.property("value", "#<%= user.color %>");
48+
expect(root.last).to.have.property("type", "decl");
49+
expect(root.last).to.have.property("prop", "font-size");
50+
expect(root.last).to.have.property("value", "<%= user.size %>px");
51+
});
52+
53+
it("Quick App", () => {
54+
const document = syntax.parse(
55+
[
56+
"<template>",
57+
"\t<span style=\"color:#{{notice.color}};font-size:{{notice.font_size}}px\" for=\"{{(index,notice) in showModalData.notice}}\">{{notice.txt}}</span>",
58+
"<style module=\"style\"></style>",
59+
"</template>",
60+
].join("\n"), {
61+
from: "quickapp.ux",
62+
}
63+
);
64+
65+
expect(document.nodes).to.have.lengthOf(2);
66+
expect(document.first.source).to.have.property("lang", "custom-template");
67+
expect(document.last.source).to.have.property("lang", "css");
68+
69+
const root = document.first;
70+
expect(root.nodes).to.have.lengthOf(2);
71+
root.nodes.forEach(node => {
72+
expect(node).to.have.property("type", "decl");
73+
});
74+
75+
expect(root.first).to.have.property("prop", "color");
76+
expect(root.first).to.have.property("value", "#{{notice.color}}");
77+
78+
expect(root.last).to.have.property("prop", "font-size");
79+
expect(root.last).to.have.property("value", "{{notice.font_size}}px");
80+
});
81+
82+
it("VUE", () => {
83+
const document = syntax.parse(
84+
[
85+
"<template>",
86+
"\t<span style=\"color:#{{notice.color}};font-size:{{notice.font_size}}px\" for=\"{{(index,notice) in showModalData.notice}}\">{{notice.txt}}</span>",
87+
"<style module=\"style\"></style>",
88+
"</template>",
89+
].join("\n"), {
90+
from: "vue-sfc.vue",
91+
}
92+
);
93+
94+
expect(document.nodes).to.have.lengthOf(2);
95+
expect(document.first.source).to.have.property("lang", "custom-template");
96+
expect(document.last.source).to.have.property("lang", "css");
97+
98+
const root = document.first;
99+
expect(root.nodes).to.have.lengthOf(2);
100+
root.nodes.forEach(node => {
101+
expect(node).to.have.property("type", "decl");
102+
});
103+
104+
expect(root.first).to.have.property("prop", "color");
105+
expect(root.first).to.have.property("value", "#{{notice.color}}");
106+
107+
expect(root.last).to.have.property("prop", "font-size");
108+
expect(root.last).to.have.property("value", "{{notice.font_size}}px");
109+
});
110+
111+
it("Svelte", () => {
112+
const document = syntax.parse(
113+
[
114+
"<a style=\"display: {dynamicProperties}\">",
115+
"</a>",
116+
].join("\n"), {
117+
from: "quickapp.ux",
118+
}
119+
);
120+
expect(document.nodes).to.have.lengthOf(1);
121+
expect(document.first.source).to.have.property("lang", "custom-template");
122+
const root = document.first;
123+
expect(root.nodes).to.have.lengthOf(1);
124+
root.nodes.forEach(node => {
125+
expect(node).to.have.property("type", "decl");
126+
});
127+
expect(root.first).to.have.property("prop", "display");
128+
expect(root.first).to.have.property("value", "{dynamicProperties}");
129+
});
130+
});

‎test/quickapp.js‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎test/safe-parser.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
"use strict";
2+
3+
const expect = require("chai").expect;
4+
const syntax = require("../");
5+
6+
describe("postcss-safe-parser", () => {
7+
it("Quick App", () => {
8+
const document = syntax({
9+
css: "postcss-safe-parser",
10+
}).parse(
11+
[
12+
"<template>",
13+
"\t<span style=\"color:{{notice.color}};font-size:{{notice.font_size}}px\" for=\"{{(index,notice) in showModalData.notice}}\">{{notice.txt}}</span>",
14+
"</template>",
15+
].join("\n"), {
16+
from: "quickapp.ux",
17+
}
18+
);
19+
20+
expect(document.nodes).to.have.lengthOf(1);
21+
const root = document.first;
22+
expect(root.nodes).to.have.lengthOf(2);
23+
root.nodes.forEach(node => {
24+
expect(node).to.have.property("type", "decl");
25+
});
26+
27+
// color:{{notice.color}}
28+
expect(root.first).to.have.property("prop", "color");
29+
expect(root.first).to.have.property("value", "{{notice.color}}");
30+
31+
// font-size:{{notice.font_size}}px
32+
expect(root.last).to.have.property("prop", "font-size");
33+
expect(root.last).to.have.property("value", "{{notice.font_size}}px");
34+
});
35+
});

0 commit comments

Comments
 (0)