Skip to content

Commit 3a92210

Browse files
rellivrelliv
committed
fix css missing semicolon
1 parent f2fded4 commit 3a92210

File tree

8 files changed

+116
-73
lines changed

8 files changed

+116
-73
lines changed

‎dist/twcss-to-sass.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/browser/twcss-to-sass.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/node/twcss-to-sass.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@egoistdeveloper/twcss-to-sass",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "HTML template to SASS converter for TailwindCSS",
55
"source": "src/index.js",
66
"main": "dist/twcss-to-sass.js",
@@ -39,6 +39,6 @@
3939
"cpx": "^1.5.0",
4040
"husky": "^4.2.5",
4141
"webpack": "^4.43.0",
42-
"webpack-cli": "^3.3.11"
42+
"webpack-cli": "^3.3.12"
4343
}
4444
}

‎src/data/mock3.html‎

Lines changed: 84 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,84 @@
1-
<!-- Root element for center items -->
2-
<div class="flex flex-col h-screen bg-gray-100">
3-
<!-- Auth Card Container -->
4-
<div class="grid place-items-center mx-2 my-20 sm:my-auto">
5-
<!-- Auth Card -->
6-
<div class="w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12
7-
px-6 py-10 sm:px-10 sm:py-6
8-
bg-white rounded-lg shadow-md lg:shadow-lg">
9-
10-
<!-- Card Title -->
11-
<h2 class="text-center font-semibold text-3xl lg:text-4xl text-gray-800">
12-
Login
13-
</h2>
14-
15-
<form class="mt-10" method="POST">
16-
<!-- Email Input -->
17-
<label for="email" class="block text-xs font-semibold text-gray-600 uppercase">E-mail</label>
18-
<input id="email" type="email" name="email" placeholder="e-mail address" autocomplete="email"
19-
class="block w-full py-3 px-1 mt-2
20-
text-gray-800 appearance-none
21-
border-b-2 border-gray-100
22-
focus:text-gray-500 focus:outline-none focus:border-gray-200"
23-
required />
24-
25-
<!-- Password Input -->
26-
<label for="password" class="block mt-2 text-xs font-semibold text-gray-600 uppercase">Password</label>
27-
<input id="password" type="password" name="password" placeholder="password" autocomplete="current-password"
28-
class="block w-full py-3 px-1 mt-2 mb-4
29-
text-gray-800 appearance-none
30-
border-b-2 border-gray-100
31-
focus:text-gray-500 focus:outline-none focus:border-gray-200"
32-
required />
33-
34-
<!-- Auth Buttton -->
35-
<button type="submit"
36-
class="w-full py-3 mt-10 bg-gray-800 rounded-sm
37-
font-medium text-white uppercase
38-
focus:outline-none hover:bg-gray-700 hover:shadow-none">
39-
Login
40-
</button>
41-
42-
<!-- Another Auth Routes -->
43-
<div class="sm:flex sm:flex-wrap mt-8 sm:mb-4 text-sm text-center">
44-
<a href="forgot-password" class="flex-2 underline">
45-
Forgot password?
46-
</a>
47-
48-
<p class="flex-1 text-gray-500 text-md mx-4 my-1 sm:my-auto">
49-
or
50-
</p>
51-
52-
<a href="register" class="flex-2 underline">
53-
Create an Account
54-
</a>
55-
</div>
56-
</form>
57-
</div>
58-
</div>
59-
</div>
1+
/* div -> NOTEXT */
2+
.any-1-div {
3+
@apply flex flex-col h-screen bg-gray-100;
4+
5+
/*#block_1*/
6+
/* div -> NOTEXT */
7+
.any-2-div {
8+
@apply grid place-items-center mx-2 my-20 sm: my-auto;
9+
10+
/*#block_1*/
11+
/* div -> NOTEXT */
12+
.any-3-div {
13+
@apply w-11/12 p-12 sm: w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-6 py-10 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg;
14+
border: gray
15+
16+
/*#block_2*/
17+
/* h2 -> Login */
18+
.any-3-h2 {
19+
@apply text-center font-semibold text-3xl lg: text-4xl text-gray-800;
20+
/*#block_0*/
21+
}
22+
23+
/* form -> NOTEXT */
24+
.any-4-form {
25+
@apply mt-10;
26+
27+
/*#block_6*/
28+
/* label -> E-mail */
29+
.any-4-label {
30+
@apply block text-xs font-semibold text-gray-600 uppercase;
31+
/*#block_0*/
32+
}
33+
34+
/* input -> NOTEXT */
35+
.any-4-input {
36+
@apply block w-full py-3 px-1 mt-2 text-gray-800 appearance-none border-b-2 border-gray-100 focus: text-gray-500 focus:outline-none focus:border-gray-200;
37+
/*#block_-*/
38+
}
39+
40+
/* label -> Password */
41+
.any-4-label {
42+
@apply block mt-2 text-xs font-semibold text-gray-600 uppercase;
43+
/*#block_0*/
44+
}
45+
46+
/* input -> NOTEXT */
47+
.any-4-input {
48+
@apply block w-full py-3 px-1 mt-2 mb-4 text-gray-800 appearance-none border-b-2 border-gray-100 focus: text-gray-500 focus:outline-none focus:border-gray-200;
49+
/*#block_-*/
50+
}
51+
52+
/* button -> Login */
53+
.any-4-button {
54+
@apply w-full py-3 mt-10 bg-gray-800 rounded-sm font-medium text-white uppercase focus: outline-none hover:bg-gray-700 hover:shadow-none;
55+
/*#block_0*/
56+
}
57+
58+
/* div -> NOTEXT */
59+
.any-5-div {
60+
@apply sm: flex sm:flex-wrap mt-8 sm:mb-4 text-sm text-center;
61+
62+
/*#block_3*/
63+
/* a -> Forgot password? */
64+
.any-5-a {
65+
@apply flex-2 underline;
66+
/*#block_0*/
67+
}
68+
69+
/* p -> or */
70+
.any-5-p {
71+
@apply flex-1 text-gray-500 text-md mx-4 my-1 sm: my-auto;
72+
/*#block_0*/
73+
}
74+
75+
/* a -> Create an Account */
76+
.any-5-a {
77+
@apply flex-2 underline;
78+
/*#block_0*/
79+
}
80+
}
81+
}
82+
}
83+
}
84+
}

‎src/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const getAttributes = function (attributes, keys) {
2525

2626
let _attribute = attributes.filter((x) => x.key == key);
2727

28-
_attributes[key] = _attribute.length ? utils.utils.cleanText(_attribute[0].value) : null;
28+
_attributes[key] = _attribute.length ? utils.cleanText(_attribute[0].value) : null;
2929
}
3030

3131
return Object.entries(_attributes).filter((x) => {
@@ -59,11 +59,11 @@ const parseHtmlJson = function (htmlJson) {
5959

6060
// find text nodes and merge
6161
node.text = children.filter((x) => x.type == 'text').map((x) => {
62-
return utils.utils.cleanText(x.content, true);
62+
return utils.cleanText(x.content, true);
6363
}).filter((x) => x !== null).join(' ');
6464

6565
// last cleanup
66-
node.text = utils.utils.cleanText(node.text, true);
66+
node.text = utils.cleanText(node.text, true);
6767

6868
// get elements
6969
node.children = children.length ? children.filter((x) => x.type == 'element') : null;
@@ -113,6 +113,8 @@ const getSassTree = function (nodeTree, count = 0) {
113113

114114
if (node.attributes) {
115115
block += node.attributes.class ? `@apply ${node.attributes.class};` : '';
116+
117+
node.attributes.style = utils.addMissingSuffix(node.attributes.style, ';');
116118
block += node.attributes.style ? `\n${node.attributes.style}\n` : '';
117119
}
118120

@@ -143,7 +145,7 @@ module.exports = {
143145
*/
144146
convertToSass: function (html, options = null) {
145147
if (html && html.length) {
146-
const htmlJson = parse.parse(utils.utils.cleanText(html)),
148+
const htmlJson = parse.parse(utils.cleanText(html)),
147149
sassTreeResult = getSassTree(parseHtmlJson(htmlJson));
148150

149151
/* Default CSS formatter options */

‎src/utils.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
'use strict';
22

3-
// const fs = require('fs');
4-
5-
exports.utils = {
3+
module.exports = {
64
/**
75
* Clean new lines and duplicated whitespaces in string
86
*
@@ -22,4 +20,22 @@ exports.utils = {
2220

2321
return null;
2422
},
23+
24+
/**
25+
* Add missing suffix
26+
*
27+
* @param {string} string
28+
* @param {string} suffix
29+
*
30+
* @return string
31+
*/
32+
addMissingSuffix: function (string, suffix) {
33+
if (string && string.length) {
34+
if (!string.endsWith(suffix)) {
35+
return `${string}${suffix}`;
36+
}
37+
}
38+
39+
return string;
40+
}
2541
};

0 commit comments

Comments
 (0)