Skip to content

Commit 77a278b

Browse files
afkvidoafkvido
committed
[v0.4.0] SASS/SCSS Support
1 parent 22bd8d2 commit 77a278b

File tree

16 files changed

+376
-640
lines changed

16 files changed

+376
-640
lines changed

‎.github/workflows/npm-publish.yml

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎.gitignore

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
node_modules
22
test/out.js
33
test/out.js.map
4-
index.js
5-
index.js.map
4+
# index.js
5+
# index.js.map
6+
7+
pnpm-lock.yaml

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
# 0.4.0
4+
5+
- Introducing esbuild-inline-sass!
6+
- You can now inline SCSS/SASS with just one plugin!
7+
- by afkvido
8+
39
## 0.3.5
410

511
- Use the esbuild instance from plugin args instead of global require.

‎LICENSE.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2021 hyrious
3+
Copyright (c) 2021 hyrious, ProdigyPXP
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,52 @@
1-
# @hyrious/esbuild-plugin-style
1+
# esbuild-inline-sass
22

3-
The missing style-loader for esbuild.
3+
The missing inline SASS/SCSS loader for esbuild.
44

55
## Usage
66

77
```js
8-
const { style } = require("@hyrious/esbuild-plugin-style");
8+
const { inlineScss } = require("esbuild-inline-sass");
99

1010
require("esbuild").build({
1111
entryPoints: ["app.js"],
1212
bundle: true,
1313
outfile: "out.js",
14-
plugins: [style()],
14+
plugins: [inlineScss()],
1515
}).catch(() => process.exit(1));
1616
```
1717

1818
Given such app.js and style.css:
1919

2020
```js
21-
import "./style.css";
21+
import "./style.scss";
2222
console.log(1);
2323
```
2424

25-
```css
26-
body { color: red; }
25+
```scss
26+
@import "https://cdn.jsdelivr.net/npm/modern-normalize";
27+
28+
div#game-wrapper {
29+
font-family: "Sen", sans-serif;
30+
31+
div#pxpo-menu-wrapper {
32+
height: 465px;
33+
background-color: #eeeb;
34+
padding: 2px;
35+
position: absolute;
36+
}
37+
}
2738
```
2839

2940
Outputs (things like):
3041

3142
```js
3243
let style = document.createElement("style");
33-
style.append("body { color: red }");
44+
style.append('@import"https://cdn.jsdelivr.net/npm/modern-normalize";div#game-wrapper{font-family:Sen,sans-serif}div#game-wrapper div#pxpo-menu-wrapper{height:465px;background-color:#eeeb;padding:2px;position:absolute}');
3445
document.head.append(style);
3546
console.log(1);
3647
```
3748

3849
### Options
39-
4050
```ts
4151
export function style({ minify = true, charset = "utf8" }): Plugin;
42-
```
43-
44-
## License
45-
46-
MIT @ [hyrious](https://github.com/hyrious)
52+
```

‎index.js

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

‎index.js.map

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

‎index.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { BuildOptions, Charset, Plugin } from "esbuild";
2+
import sassPlugin from "esbuild-sass-plugin";
23

34
export interface StylePluginOptions {
45
/**
@@ -15,18 +16,19 @@ export interface StylePluginOptions {
1516
}
1617

1718
// https://github.com/evanw/esbuild/issues/20#issuecomment-802269745
18-
export function style({ minify = true, charset = "utf8" }: StylePluginOptions = {}): Plugin {
19+
export function inlineSass({ minify = true, charset = "utf8" }: StylePluginOptions = {}): Plugin {
1920
let esbuild_shim: typeof import("esbuild") | undefined;
2021

2122
return {
22-
name: "style",
23+
name: "inlineSass",
2324
setup({ onResolve, onLoad, esbuild }) {
2425
const opt: BuildOptions = { logLevel: "silent", bundle: true, write: false, charset, minify };
2526
const require_esbuild = () => esbuild || (esbuild_shim ||= require("esbuild"));
2627

27-
onLoad({ filter: /\.css$/ }, async args => {
28+
onLoad({ filter: /\.s[a|c]ss$/ }, async args => {
2829
const { errors, warnings, outputFiles } = await require_esbuild().build({
2930
entryPoints: [args.path],
31+
plugins: [sassPlugin()],
3032
...opt,
3133
});
3234
const css = outputFiles![0].text.trimEnd();
@@ -56,4 +58,7 @@ export function style({ minify = true, charset = "utf8" }: StylePluginOptions =
5658
};
5759
}
5860

59-
export default style;
61+
export const inlineScss = inlineSass;
62+
63+
export default inlineSass;
64+

0 commit comments

Comments
 (0)