Skip to content

Commit 99230ad

Browse files
CITguyCITguy
authored
Merge pull request #63 from rackerlabs/webpack-loaders
chore(webpack): add loaders to use external files
2 parents b4403dc + 6529c41 commit 99230ad

File tree

12 files changed

+429
-286
lines changed

12 files changed

+429
-286
lines changed

‎bin/start.js‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,11 @@ browserSync.init({
2020
files: [ // (See 'watchEvents')
2121
// Reload browser if any file in public directory changes
2222
`${CONFIG.publicDir}/**/*`,
23-
24-
// Rebuild compiled JavaScript if any source JS file changes
25-
{
26-
match: `${CONFIG.sourceDir}/**/*.js`,
27-
fn: (evt, file) => {
28-
Build.scriptsSync();
29-
}
30-
},
31-
32-
// Rebuild compiled CSS if any source LESS file changes
33-
{
34-
match: `${CONFIG.sourceDir}/**/*.less`,
35-
fn: (evt, file) => {
36-
Build.stylesSync();
37-
}
38-
},
39-
40-
// Rebuild docs if any markup file changes
41-
{
42-
match: `${CONFIG.sourceDir}/**/*.html`,
43-
fn: (evt, file) => {
44-
Build.docsSync();
45-
}
46-
},
47-
48-
// Rebuild everything if anything else changes
23+
// Rebuild if anything changes in source directory
4924
{
50-
match: `${CONFIG.sourceDir}/**/!(*.js|*.less|*.html)`,
25+
match: [
26+
`${CONFIG.sourceDir}/**/*`
27+
],
5128
fn: (evt, file) => {
5229
Build.buildSync();
5330
}

‎lib/webpack.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,22 @@ const compiler = webpack({
2121
test: /\.svg$/,
2222
use: 'svg-inline-loader',
2323
},
24+
{
25+
test: /\.html$/,
26+
use: 'raw-loader'
27+
},
28+
{
29+
test: /\.less$/,
30+
use: [
31+
{ loader: 'raw-loader' },
32+
{
33+
loader: 'less-loader',
34+
options: {
35+
paths: CONFIG.less.paths
36+
}
37+
}
38+
]
39+
},
2440
{
2541
test: /\.js$/,
2642
exclude: /(node_modules|bower_components)/,
@@ -38,7 +54,7 @@ const compiler = webpack({
3854

3955
function compileSync () {
4056
compiler.run((err, stats) => {
41-
if (err || stats.hasErrors()) {
57+
if (err) {
4258
console.log('ERROR: running running webpack');
4359
console.log(err.message);
4460
}

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,12 @@
1818
"highlight.js": "^9.12.0",
1919
"js-yaml": "^3.9.1",
2020
"less": "2.x",
21+
"less-loader": "^4.0.5",
2122
"lodash": "^4.17.4",
2223
"moment": "^2.18.1",
2324
"nunjucks": "^3.0.1",
2425
"pkgcloud": "^1.4.0",
26+
"raw-loader": "^0.5.1",
2527
"svg-inline-loader": "^0.8.0",
2628
"webpack": "^3.5.5"
2729
},

‎source/components/checkbox/HxCheckbox.js‎

Lines changed: 4 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -4,123 +4,11 @@ const KEY = require('../../lib/KEY');
44
*/
55

66
window.addEventListener('WebComponentsReady', function () {
7+
const tagName = 'hx-checkbox';
78
const template = document.createElement('template');
89

910
template.innerHTML = `
10-
<style>
11-
:host {
12-
background-color: #ffffff;
13-
border-color: currentColor;
14-
border-radius: 2px;
15-
border-style: solid;
16-
border-width: 1px;
17-
color: #bdbdbd;
18-
display: inline-block;
19-
height: 1rem;
20-
vertical-align: middle;
21-
width: 1rem;
22-
}
23-
24-
:host([hidden]) { display: none; }
25-
26-
/* default unchecked */
27-
28-
:host(:hover) {
29-
background-color: #e4f9f9;
30-
color: #16b9d4;
31-
}
32-
33-
/* default checked */
34-
35-
:host([checked]) {
36-
color: #0c7c84;
37-
}
38-
39-
:host([checked]:hover) {
40-
background-color: #e4f9f9;
41-
color: #16b9d4;
42-
}
43-
44-
/* default indeterminate (checked or unchecked) */
45-
46-
:host([indeterminate]) {
47-
color: #0c7c84;
48-
}
49-
50-
:host([indeterminate]:hover) {
51-
color: #16b9d4;
52-
}
53-
54-
/* invalid unchecked */
55-
56-
:host([invalid]) {
57-
border-width: 2px;
58-
color: #d32f2f;
59-
}
60-
61-
:host([invalid]:hover) {
62-
background-color: #FFCDD2;
63-
color: #d32f2f;
64-
}
65-
66-
/* invalid checked */
67-
68-
/* invalid indeterminate (checked or unchecked) */
69-
70-
/* disabled unchecked */
71-
72-
:host([disabled]) {
73-
background-color: #eeeeee;
74-
color: #bdbdbd;
75-
cursor: not-allowed;
76-
}
77-
78-
:host([disabled]:hover) {
79-
background-color: #eeeeee;
80-
color: #bdbdbd;
81-
}
82-
83-
/* disabled checked */
84-
85-
/* disabled indeterminate (checked or unchecked) */
86-
:host([disabled][indeterminate]) {
87-
color: #bdbdbd;
88-
}
89-
90-
/* ^^ light dom overridable ^^ */
91-
#container {
92-
align-content: center;
93-
align-items: center;
94-
display: flex;
95-
font-size: 0.625em; /* ~10px */
96-
height: 100%;
97-
justify-content: center;
98-
width: 100%;
99-
}
100-
101-
#minus,
102-
#tick {
103-
display: none;
104-
height: 1em;
105-
line-height: 1;
106-
width: 1em;
107-
}
108-
109-
/* FIXME: redefine due to bug in hxIcon */
110-
hx-icon svg {
111-
fill: currentColor;
112-
stroke: none;
113-
}
114-
115-
:host([checked]:not([indeterminate])) #tick {
116-
display: block;
117-
}
118-
119-
:host([indeterminate]) #minus {
120-
display: block;
121-
}
122-
</style>
123-
11+
<style>${require('./HxCheckbox.less')}</style>
12412
<div id="container">
12513
<hx-icon type="checkmark" id="tick"></hx-icon>
12614
<hx-icon type="minus" id="minus"></hx-icon>
@@ -135,7 +23,7 @@ window.addEventListener('WebComponentsReady', function () {
13523

13624
class HxCheckbox extends HTMLElement {
13725
static get is () {
138-
return 'hx-checkbox';
26+
return tagName;
13927
}
14028

14129
static get observedAttributes () {
@@ -150,7 +38,7 @@ window.addEventListener('WebComponentsReady', function () {
15038
super();
15139
this.attachShadow({mode: 'open'});
15240
if (window.ShadyCSS) {
153-
ShadyCSS.prepareTemplate(template, 'hx-checkbox');
41+
ShadyCSS.prepareTemplate(template, tagName);
15442
ShadyCSS.styleElement(this);
15543
}
15644
this.shadowRoot.appendChild(template.content.cloneNode(true));

‎source/components/checkbox/HxCheckbox.less‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import 'vars';
2+
3+
:host {
4+
background-color: @gray-0;
5+
border-color: currentColor;
6+
border-radius: 2px;
7+
border-style: solid;
8+
border-width: 1px;
9+
color: @gray-500;
10+
display: inline-block;
11+
height: 1rem;
12+
vertical-align: middle;
13+
width: 1rem;
14+
15+
&([hidden]) {
16+
display: none;
17+
}
18+
19+
/* default unchecked */
20+
&(:hover) {
21+
background-color: @cyan-50;
22+
color: @cyan-500;
23+
}
24+
25+
/* default checked */
26+
&([checked]) {
27+
color: @cyan-900;
28+
}
29+
30+
&([checked]:hover) {
31+
background-color: @cyan-50;
32+
color: @cyan-500;
33+
}
34+
35+
/* default indeterminate (checked or unchecked) */
36+
&([indeterminate]) {
37+
color: @cyan-900;
38+
}
39+
40+
&([indeterminate]:hover) {
41+
color: @cyan-500;
42+
}
43+
44+
/* invalid unchecked */
45+
&([invalid]) {
46+
border-width: 2px;
47+
color: @red-900;
48+
}
49+
50+
&([invalid]:hover) {
51+
background-color: @red-500;
52+
color: @red-900;
53+
}
54+
55+
/* invalid checked */
56+
57+
/* invalid indeterminate (checked or unchecked) */
58+
59+
/* disabled unchecked */
60+
&([disabled]) {
61+
background-color: @gray-100;
62+
color: @gray-500;
63+
cursor: not-allowed;
64+
}
65+
66+
&([disabled]:hover) {
67+
background-color: @gray-100;
68+
color: @gray-500;
69+
}
70+
71+
/* disabled checked */
72+
73+
/* disabled indeterminate (checked or unchecked) */
74+
&([disabled][indeterminate]) {
75+
color: @gray-500;
76+
}
77+
}
78+
79+
#container {
80+
align-content: center;
81+
align-items: center;
82+
display: flex;
83+
font-size: 0.625em; /* ~10px */
84+
height: 100%;
85+
justify-content: center;
86+
width: 100%;
87+
}
88+
89+
#minus,
90+
#tick {
91+
display: none;
92+
height: 1em;
93+
line-height: 1;
94+
width: 1em;
95+
}
96+
97+
:host {
98+
&([checked]:not([indeterminate])) #tick {
99+
display: block;
100+
}
101+
102+
&([indeterminate]) #minus {
103+
display: block;
104+
}
105+
}

0 commit comments

Comments
 (0)