Skip to content

Commit 9959c5f

Browse files
committed
init
Signed-off-by: Mieszko Kycermann <[email protected]>
0 parents  commit 9959c5f

10 files changed

+448
-0
lines changed

.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

LICENCE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Mieszko Kycermann
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# rollup-plugin-import-css-classes
2+
3+
A Rollup plugin to import CSS classes in Javascript. Inspired by [rollup-plugin-import-css](https://github.com/jleeson/rollup-plugin-import-css) but that one returns a `CSSStyleSheet` and this one exports class names to use in your app.
4+
5+
For ideas or if the docs are unclear, you are welcome to [open an issue](https://github.com/Kycermann/rollup-plugin-import-css-classes/issues/new).
6+
7+
## Usage
8+
9+
Let's take these files:
10+
11+
`MyDiv.css`
12+
13+
```css
14+
.blue-colour { /* Correct Great British spelling 🇬🇧 */
15+
color: blue;
16+
}
17+
```
18+
19+
`MyDiv.tsx`
20+
21+
```tsx
22+
import { blueColour } from "./MyDiv.css" assert { type: "css" };
23+
24+
export const MyDiv = () => (
25+
<div className={blueColour}>
26+
Blue text
27+
</div>
28+
);
29+
```
30+
31+
It's OK to use the same class names in different `.css` files.
32+
33+
## Installation
34+
35+
### npm
36+
37+
```bash
38+
npm i rollup-plugin-import-css-classes
39+
```
40+
41+
### Deno
42+
43+
Use the specifier `npm:rollup-plugin-import-css-classes`.
44+
45+
### Config
46+
47+
Example `rollup.config.js`:
48+
49+
```js
50+
import css from "rollup-plugin-import-css-classes";
51+
52+
export default {
53+
input: "index.js",
54+
output: { file: "dist/index.js", format: "esm" },
55+
plugins: [ css() ]
56+
};
57+
```

package-lock.json

+237
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "rollup-plugin-import-css-classes",
3+
"type": "module",
4+
"version": "1.0.0",
5+
"description": "A Rollup plugin to import CSS classes in Javascript.",
6+
"main": "src/index.js",
7+
"scripts": {
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/Kycermann/rollup-plugin-import-css-classes.git"
13+
},
14+
"keywords": [
15+
"rollup-plugin",
16+
"css",
17+
"import",
18+
"javascript",
19+
"emcascript"
20+
],
21+
"author": "Mieszko Kycermann <[email protected]>",
22+
"license": "MIT",
23+
"bugs": {
24+
"url": "https://github.com/Kycermann/rollup-plugin-import-css-classes/issues"
25+
},
26+
"homepage": "https://github.com/Kycermann/rollup-plugin-import-css-classes#readme",
27+
"devDependencies": {
28+
"rollup": "^4.12.1"
29+
}
30+
}

0 commit comments

Comments
 (0)