Skip to content

Commit 3fe8701

Browse files
sokrasokra
committed
update readme
1 parent 10c8ef3 commit 3fe8701

File tree

1 file changed

+147
-45
lines changed

1 file changed

+147
-45
lines changed

‎README.md‎

Lines changed: 147 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
[![chat][chat]][chat-url]
66

77
<div align="center">
8-
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
9-
<img width="200" height="200" src="https://cdn.worldvectorlogo.com/logos/javascript.svg">
8+
<img width="180" height="180" vspace="20"
9+
src="https://cdn.worldvectorlogo.com/logos/css-3.svg">
1010
<a href="https://webpack.js.org/">
1111
<img width="200" height="200" vspace="" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
1212
</a>
13-
<h1>css-loader</h1>
14-
<p>css loader module for webpack</p>
13+
<h1>CSS Loader</h1>
1514
</div>
1615

1716
<h2 align="center">Install</h2>
@@ -22,75 +21,178 @@ npm install --save-dev css-loader
2221

2322
<h2 align="center">Usage</h2>
2423

25-
### Lorem
24+
The `css-loader` converts ICSS into EcmaScript Modules.
2625

27-
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
26+
### ICSS
2827

29-
<h2 align="center">Examples</h2>
28+
ICSS allows to describe imports and exports in CSS. The following syntax is allowed:
29+
30+
#### Importing CSS
31+
32+
``` css
33+
@import url('./other-file.css');
34+
@import url('other-module/style.css');
35+
```
36+
37+
Imports other CSS files.
3038

31-
**webpack.config.js**
39+
#### Importing Symbols
3240

33-
```js
34-
// Loader/plugin setup here..
41+
``` css
42+
:import('./module') {
43+
local-alias: importedIdentifier;
44+
other-name: otherIdentifier;
45+
}
3546
```
3647

37-
**file.ext**
48+
Similar to
3849

39-
```js
40-
// Source code here...
50+
``` js
51+
import { importedIdentifier as localAlias, otherIdentifier as otherName } from './module';
4152
```
4253

43-
**bundle.js**
54+
The local alias can be used in the complete file and has the value of the export from the module.
55+
56+
The imported module could be another ICSS file or any other module.
4457

45-
```js
46-
require("css-loader!./file.EXT");
58+
#### Exporting Symbols
4759

48-
// Bundle code here...
60+
``` css
61+
:export {
62+
exportedName: hello world;
63+
otherExportedName: 5px 5px, red;
64+
}
4965
```
5066

51-
<h2 align="center">Maintainers</h2>
67+
Similar to
5268

53-
```bash
54-
https://api.github.com/users/MAINTAINER
69+
``` js
70+
export const exportedName = "hello world";
71+
export const otherExportedName = "5px 5px, red";
72+
```
73+
74+
Note that spacing is not significant.
75+
76+
77+
<h2 align="center">Examples</h2>
78+
79+
### Resolving `url()`
80+
81+
It's often needed to thread `url()`s in the CSS file as imports to other assets.
82+
You want to add all referenced assets into the dependency graph.
83+
84+
This can be achieved by a postcss plugin: postcss-plugin-url.
85+
86+
To enable postcss plugins in your CSS pipeline, chain css-loader with postcss-loader.
87+
Example configuration with style-loader:
88+
89+
``` js
90+
const urlPlugin = require("postcss-plugin-url")
91+
92+
rules: [
93+
{
94+
test: /\.css$/,
95+
rules: [
96+
{
97+
issuer: { not: /\.css$/ },
98+
use: "style-loader"
99+
},
100+
{
101+
use: [
102+
"css-loader",
103+
{
104+
loader: "postcss-loader",
105+
plugins: [
106+
urlPlugin({})
107+
]
108+
}
109+
]
110+
}
111+
]
112+
}
113+
]
114+
```
115+
116+
### Postprocessing CSS
117+
118+
It's often needed to use a preprocessor for CSS. Example: SASS.
119+
120+
``` js
121+
const urlPlugin = require("postcss-plugin-url")
122+
123+
rules: [
124+
{
125+
test: /\.css$/,
126+
rules: [
127+
{
128+
issuer: { not: /\.css$/ },
129+
use: "style-loader"
130+
},
131+
{
132+
use: [
133+
"css-loader",
134+
{
135+
loader: "postcss-loader",
136+
plugins: [
137+
urlPlugin({})
138+
]
139+
},
140+
"sass-loader"
141+
]
142+
}
143+
]
144+
}
145+
]
55146
```
56147

148+
<h2 align="center">Maintainers</h2>
149+
57150
<table>
58151
<tbody>
59152
<tr>
60153
<td align="center">
61-
<a href="https://github.com/">
62-
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
63-
</br>
64-
Name
65-
</a>
154+
<img width="150" height="150"
155+
src="https://github.com/bebraw.png?v=3&s=150">
156+
</br>
157+
<a href="https://github.com/bebraw">Juho Vepsäläinen</a>
66158
</td>
67159
<td align="center">
68-
<a href="https://github.com/">
69-
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
70-
</br>
71-
Name
72-
</a>
160+
<img width="150" height="150"
161+
src="https://github.com/d3viant0ne.png?v=3&s=150">
162+
</br>
163+
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
73164
</td>
74165
<td align="center">
75-
<a href="https://github.com/">
76-
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
77-
</br>
78-
Name
79-
</a>
166+
<img width="150" height="150"
167+
src="https://github.com/SpaceK33z.png?v=3&s=150">
168+
</br>
169+
<a href="https://github.com/SpaceK33z">Kees Kluskens</a>
170+
</td>
171+
<td align="center">
172+
<img width="150" height="150"
173+
src="https://github.com/TheLarkInn.png?v=3&s=150">
174+
</br>
175+
<a href="https://github.com/TheLarkInn">Sean Larkin</a>
176+
</td>
177+
</tr>
178+
<tr>
179+
<td align="center">
180+
<img width="150" height="150"
181+
src="https://github.com/michael-ciniawsky.png?v=3&s=150">
182+
</br>
183+
<a href="https://github.com/michael-ciniawsky">Michael Ciniawsky</a>
80184
</td>
81185
<td align="center">
82-
<a href="https://github.com/">
83-
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
84-
</br>
85-
Name
86-
</a>
186+
<img width="150" height="150"
187+
src="https://github.com/evilebottnawi.png?v=3&s=150">
188+
</br>
189+
<a href="https://github.com/evilebottnawi">Evilebot Tnawi</a>
87190
</td>
88191
<td align="center">
89-
<a href="https://github.com/">
90-
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/5419992?v=3&s=150">
91-
</br>
92-
Name
93-
</a>
192+
<img width="150" height="150"
193+
src="https://github.com/joscha.png?v=3&s=150">
194+
</br>
195+
<a href="https://github.com/joscha">Joscha Feth</a>
94196
</td>
95197
</tr>
96198
<tbody>

0 commit comments

Comments
 (0)