Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

esbuild-sass-plugin

Package Overview
Dependencies
Maintainers
1
Versions
90
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

esbuild-sass-plugin - npm Package Compare versions

Comparing version 2.16.1 to 3.0.0

4

lib/index.d.ts
import { OnLoadResult } from 'esbuild';
import { StringOptions } from 'sass';
import { StringOptions } from 'sass-embedded';
import { sassPlugin } from './plugin';
export type Type = 'css' | 'style' | 'css-text' | 'lit-css';
export type SassPluginOptions = StringOptions<'sync'> & {
export type SassPluginOptions = StringOptions<'async'> & {
filter?: RegExp;

@@ -7,0 +7,0 @@ importMapper?: (url: string) => string;

9

lib/plugin.js

@@ -8,2 +8,3 @@ "use strict";

const render_1 = require("./render");
const sass_embedded_1 = require("sass-embedded");
const DEFAULT_FILTER = /\.(s[ac]ss|css)$/;

@@ -25,3 +26,3 @@ function sassPlugin(options = {}) {

name: 'sass-plugin',
setup({ initialOptions, onResolve, onLoad, resolve, onStart }) {
async setup({ initialOptions, onResolve, onLoad, resolve, onStart, onDispose }) {
var _a, _b;

@@ -55,7 +56,9 @@ options.loadPaths = Array.from(new Set([

}
const renderSync = (0, render_1.createRenderer)(options, (_a = options.sourceMap) !== null && _a !== void 0 ? _a : sourcemap);
const compiler = await (0, sass_embedded_1.initAsyncCompiler)();
onDispose(() => compiler.dispose());
const renderAsync = (0, render_1.createRenderer)(compiler, options, (_a = options.sourceMap) !== null && _a !== void 0 ? _a : sourcemap);
onLoad({ filter: (_b = options.filter) !== null && _b !== void 0 ? _b : DEFAULT_FILTER }, (0, cache_1.useCache)(options, fsStatCache, async (path) => {
var _a;
try {
let { cssText, watchFiles, warnings } = renderSync(path);
let { cssText, watchFiles, warnings } = await renderAsync(path);
if (!warnings) {

@@ -62,0 +65,0 @@ warnings = [];

5

lib/render.d.ts
import { PartialMessage } from 'esbuild';
import { SassPluginOptions } from './index';
export type RenderSync = (path: string) => RenderResult;
import { AsyncCompiler } from 'sass-embedded/dist/types/compile';
export type RenderAsync = (path: string) => Promise<RenderResult>;
export type RenderResult = {

@@ -9,2 +10,2 @@ cssText: string;

};
export declare function createRenderer(options: SassPluginOptions | undefined, sourcemap: boolean): RenderSync;
export declare function createRenderer(compiler: AsyncCompiler, options: SassPluginOptions | undefined, sourcemap: boolean): RenderAsync;

7

lib/render.js

@@ -30,5 +30,4 @@ "use strict";

const utils_1 = require("./utils");
const sass = __importStar(require("sass"));
const url_1 = require("url");
function createRenderer(options = {}, sourcemap) {
function createRenderer(compiler, options = {}, sourcemap) {
const loadPaths = options.loadPaths;

@@ -70,3 +69,3 @@ const resolveModule = (0, utils_1.createResolver)(options, loadPaths);

const sepTilde = `${path_1.sep}~`;
return function (path) {
return async function (path) {
var _a;

@@ -111,3 +110,3 @@ const basedir = (0, path_1.dirname)(path);

};
const { css, loadedUrls, sourceMap } = sass.compileString(source, {
const { css, loadedUrls, sourceMap } = await compiler.compileStringAsync(source, {
sourceMapIncludeSources: true,

@@ -114,0 +113,0 @@ ...options,

2

lib/utils.d.ts

@@ -5,3 +5,3 @@ import { SassPluginOptions, Type } from './index';

import { BuildOptions, OnLoadResult } from 'esbuild';
import { Syntax } from 'sass';
import { Syntax } from 'sass-embedded';
export declare const posixRelative: (path: string) => string;

@@ -8,0 +8,0 @@ export declare function modulesPaths(absWorkingDir?: string): string[];

16

package.json
{
"name": "esbuild-sass-plugin",
"version": "2.16.1",
"version": "3.0.0",
"description": "esbuild plugin for sass/scss files supporting both css loader and css result import (lit-element)",

@@ -45,8 +45,8 @@ "main": "lib/index.js",

"resolve": "^1.22.6",
"sass": "^1.7.3"
"sass-embedded": "^1.70.0"
},
"devDependencies": {
"@types/node": "^18.15.12",
"@types/resolve": "^1.20.2",
"esbuild": "^0.19.4",
"@types/node": "^20.11.10",
"@types/resolve": "^1.20.6",
"esbuild": "^0.20.0",
"mocha-toolkit": "^1.0.7",

@@ -57,8 +57,8 @@ "postcss": "^8.4.31",

"source-map": "^0.7.4",
"ts-node": "^10.9.1",
"typescript": "^5.0.4"
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
},
"peerDependencies": {
"esbuild": "^0.19.4"
"esbuild": "^0.20.0"
}
}

31

README.md
![cooltext394785080075403](https://user-images.githubusercontent.com/160981/136289874-26ce7269-ea08-47dd-be31-9bf0ef7a0b8d.png)
![image](https://user-images.githubusercontent.com/160981/150880682-4915c4dd-726b-4fea-8f3b-597d191f05bc.png)
![image](https://github.com/glromeo/esbuild-sass-plugin/assets/160981/6a686a7c-ddd0-499f-b98d-03e607aac0a7)

@@ -11,3 +11,3 @@ [![Build Status][travis-image]][travis-url]

* support for **constructable stylesheet** to be used in custom elements or `dynamic style` to be added to the html page
* uses the **new [Dart Sass](https://www.npmjs.com/package/sass) Js API**.
* **[Sass Embedded](https://github.com/sass/sass/issues/3296) Async API**. (thanks to @NathanBeddoeWebDev)
* caching

@@ -17,10 +17,4 @@ * **url rewriting**

### Breaking Changes
* `type` has been simplified and now accepts only a string. If you need different types in a project [you can use more
than one instance](https://github.com/glromeo/esbuild-sass-plugin/issues/60) of the plugin.
You can have a look at the [**multiple** fixture](https://github.com/glromeo/esbuild-sass-plugin/blob/main/test/fixture/multiple)
for an example where **lit CSS** and **CSS modules** are both used in the same app
* The support for [node-sass](https://github.com/sass/node-sass) has been removed and for good.
Sadly, node-sass is at a dead end and so it's 1.x.
* `transform` now is expected to send back the CSS text in contents and anything that has to be default exported in `pluginData`.
### Breaking Changes (...maybe)
* upgraded to esbuild 0.20

@@ -358,17 +352,16 @@ ### Install

### Benchmarks
**Windows 10** Pro - **i7-4770K** CPU @ **3.50**GHz - RAM **24**GB - SSD **500**GB
**Windows 11** Pro - **i7-490K** CPU @ **4.00**GHz - RAM **32**GB - SSD **500**GB
Given 24 × 24 = 576 lit-element files & 576 imported CSS styles plus the import of the full bootstrap 5.1
| | dart sass | dart sass (no cache) | node-sass* | node-sass (no cache) |
|------------------------|-----------|-----------------------|-------------|----------------------|
| **initial build** | 2.750s | 2.750s | 1.903s | 1.858s |
| rebuild (.ts change) | 285.959ms | 1.950s | 797.098ms | 1.689s |
| rebuild (.ts change) | 260.791ms | 1.799s | 768.213ms | 1.790s |
| rebuild (.scss change) | 234.152ms | 1.801s | 770.619ms | 1.652s |
| rebuild (.scss change) | 267.857ms | 1.738s | 750.743ms | 1.682s |
| | sass-embedded | sass-embedded (no cache) | dart sass | dart sass (no cache) |
|------------------------|----------------|--------------------------|-----------|----------------------|
| **initial build** | 731.312ms | 779.363ms | 2.450s | 2.450s |
| rebuild (.ts change) | 170.35ms | 188.861ms | 179.125ms | 1.710s |
| rebuild (.ts change) | 155.802ms | 167.413ms | 176.849ms | 1.576s |
| rebuild (.scss change) | 203.746ms | 160.601ms | 188.164ms | 1.575s |
| rebuild (.scss change) | 152.733ms | 144.754ms | 145.835ms | 1.520s |
(*) node-sass is here just to give a term of comparison ...those samples were taken from 1.8.x
[travis-url]: https://app.travis-ci.com/glromeo/esbuild-sass-plugin
[travis-image]: https://app.travis-ci.com/glromeo/esbuild-sass-plugin.svg?branch=main

4

src/index.ts
import {OnLoadResult} from 'esbuild'
import {StringOptions} from 'sass'
import {StringOptions} from 'sass-embedded'
import {sassPlugin} from './plugin'

@@ -7,3 +7,3 @@

export type SassPluginOptions = StringOptions<'sync'> & {
export type SassPluginOptions = StringOptions<'async'> & {

@@ -10,0 +10,0 @@ /**

11

src/plugin.ts

@@ -7,2 +7,3 @@ import {OnLoadResult, Plugin} from 'esbuild'

import {createRenderer} from './render'
import {initAsyncCompiler} from 'sass-embedded'

@@ -35,3 +36,3 @@ const DEFAULT_FILTER = /\.(s[ac]ss|css)$/

name: 'sass-plugin',
setup({initialOptions, onResolve, onLoad, resolve, onStart}) {
async setup({initialOptions, onResolve, onLoad, resolve, onStart, onDispose}) {

@@ -77,7 +78,11 @@ options.loadPaths = Array.from(new Set([

const renderSync = createRenderer(options, options.sourceMap ?? sourcemap)
const compiler = await initAsyncCompiler();
onDispose(()=> compiler.dispose())
const renderAsync = createRenderer(compiler, options, options.sourceMap ?? sourcemap)
onLoad({filter: options.filter ?? DEFAULT_FILTER}, useCache(options, fsStatCache, async path => {
try {
let {cssText, watchFiles, warnings} = renderSync(path)
let {cssText, watchFiles, warnings} = await renderAsync(path)
if (!warnings) {

@@ -84,0 +89,0 @@ warnings = []

15

src/render.ts

@@ -5,8 +5,9 @@ import {dirname, parse, relative, resolve, sep} from 'path'

import {PartialMessage} from 'esbuild'
import * as sass from 'sass'
import {ImporterResult} from 'sass'
import * as sass from 'sass-embedded'
import {ImporterResult, initAsyncCompiler} from 'sass-embedded'
import {fileURLToPath, pathToFileURL} from 'url'
import {SassPluginOptions} from './index'
import {AsyncCompiler} from 'sass-embedded/dist/types/compile'
export type RenderSync = (path: string) => RenderResult
export type RenderAsync = (path: string) => Promise<RenderResult>

@@ -19,3 +20,3 @@ export type RenderResult = {

export function createRenderer(options: SassPluginOptions = {}, sourcemap: boolean): RenderSync {
export function createRenderer(compiler: AsyncCompiler, options: SassPluginOptions = {}, sourcemap: boolean): RenderAsync {

@@ -67,5 +68,5 @@ const loadPaths = options.loadPaths!

/**
* renderSync
* renderAsync
*/
return function (path: string): RenderResult {
return async function (path: string): Promise<RenderResult> {

@@ -118,3 +119,3 @@ const basedir = dirname(path)

sourceMap
} = sass.compileString(source, {
} = await compiler.compileStringAsync(source, {
sourceMapIncludeSources: true,

@@ -121,0 +122,0 @@ ...options,

2

src/utils.ts

@@ -5,3 +5,3 @@ import {SassPluginOptions, Type} from './index'

import {BuildOptions, OnLoadResult} from 'esbuild'
import {Syntax} from 'sass'
import {Syntax} from 'sass-embedded'
import {parse, relative, resolve} from 'path'

@@ -8,0 +8,0 @@ import {existsSync} from 'fs'

lib/cache.js.map

Sorry, the diff of this file is not supported yet

lib/plugin.js.map

Sorry, the diff of this file is not supported yet

lib/render.js.map

Sorry, the diff of this file is not supported yet

lib/utils.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc