Skip to content

Commit 9f16c16

Browse files
committed
Initial commit
0 parents  commit 9f16c16

File tree

1 file changed

+136
-0
lines changed

1 file changed

+136
-0
lines changed

README.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# PostCSS - Polymer Loader
2+
3+
[![GitHub release](https://img.shields.io/github/release/PolymerX/postcss-html-loader.svg?style=flat-square)](https://github.com/PolymerX/postcss-html-loader)
4+
[![Build Status](https://travis-ci.org/PolymerX/postcss-html-loader.svg?branch=master&style=flat-square)](https://travis-ci.org/PolymerX/postcss-html-loader)
5+
[![Coverage Status](https://coveralls.io/repos/github/PolymerX/postcss-html-loader/badge.svg?branch=master&style=flat-square)](https://coveralls.io/github/PolymerX/postcss-html-loader?branch=master)
6+
[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)
7+
[![postcss-html-loader](https://img.shields.io/badge/polymerX-postcss--polymer--loader-%23435877.svg?style=flat-square)](https://github.com/PolymerX/postcss-html-loader)
8+
9+
> PostCSS Webpack loader for HTML templates (usually for Polymer 3.x). Works in combination with the [text-loader](https://www.npmjs.com/package/text-loader).
10+
11+
# Install
12+
13+
yarn add --dev postcss-html-loader
14+
15+
# Setup configurations
16+
17+
Add the `postcss` configuration file:
18+
19+
#### postcss.config.js
20+
21+
> NOTE: you need to add these (or other) plugins as project dependencies.
22+
23+
```js
24+
module.exports = {
25+
parser: 'sugarss',
26+
plugins: {
27+
'postcss-import': {},
28+
'postcss-cssnext': {},
29+
'autoprefixer': {},
30+
'cssnano': {}
31+
}
32+
}
33+
```
34+
35+
Add the loader to your `webpack` config:
36+
37+
#### webpack.config.js
38+
39+
```js
40+
41+
module.exports = {
42+
module: {
43+
44+
...
45+
46+
rules: [
47+
48+
...
49+
50+
{
51+
test: /\.html$/,
52+
use: ['text-loader', 'postcss-html-loader']
53+
}
54+
]
55+
56+
...
57+
58+
}
59+
}
60+
61+
```
62+
63+
64+
# Setup project
65+
66+
As stated, this loader needs an text loader to load the HTML template, like the [text-loader](https://www.npmjs.com/package/text-loader). More specifically you can load an `HTML` template from and external file and use it within a Polymer 3.x `template`.
67+
68+
## Folder structure (example)
69+
70+
|– src
71+
| |– awesome-component
72+
| | |– index.js
73+
| | |- template.html
74+
| | |- style.postcss
75+
| |
76+
| |- global-style.postcss
77+
| |- main-entry.js
78+
|
79+
|– postcss.config.js
80+
|– webpack.config.js
81+
82+
## `awesome-component/template.html` (example)
83+
84+
```html
85+
<postcss src="./../global-style.postcss"></postcss>
86+
<postcss src="./style.postcss"></postcss>
87+
88+
<div>
89+
<div class="TestDivOne"></div>
90+
<div class="TestDivTwo"></div>
91+
</div>
92+
```
93+
94+
## `awesome-component/index.js` (example)
95+
96+
```js
97+
// import Polymer from 'polymer'; Aaaaaaaah if we could...!
98+
99+
import {Element as PolymerElement} from '@polymer/polymer/polymer-element';
100+
import template from './template.html';
101+
102+
class AwesomeComponent extends PolymerElement {
103+
static get properties() {
104+
return {
105+
prop1: {
106+
type: String,
107+
value: 'This is awesome!'
108+
}
109+
}
110+
};
111+
112+
static get template() {
113+
return template;
114+
};
115+
};
116+
117+
window.customElements.define('awesome-component', AwesomeComponent);
118+
119+
```
120+
121+
## `main-entry.js` (example)
122+
123+
```js
124+
125+
import './src/awesome-component';
126+
127+
```
128+
129+
130+
## Contribute
131+
132+
This is currently a POC, so if you have some ideas or better solutions just open an issue and let's talk! :+1:
133+
134+
## License
135+
136+
MIT © LasaleFamine

0 commit comments

Comments
 (0)