Compare commits
9 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
|
7a39d520dd
|
|||
|
e4d9075ebe
|
|||
|
b8286098ff
|
|||
|
27a16018f3
|
|||
|
5c773895cb
|
|||
|
12c14e8eb5
|
|||
|
8c7e9aa5e0
|
|||
|
cdb33bd6f5
|
|||
|
708eb1fd3c
|
@@ -1,70 +0,0 @@
|
|||||||
# babel-plugin-nunjucks
|
|
||||||
|
|
||||||
Плагин для [babel-loader](https://github.com/babel/babel-loader), позволяющий использовать шаблонизатор [Nunjucks](https://mozilla.github.io/nunjucks/) внутри JS-файлов.
|
|
||||||
|
|
||||||
## Установка
|
|
||||||
|
|
||||||
```bash
|
|
||||||
yarn add -D @advdominion/babel-plugin-nunjucks
|
|
||||||
```
|
|
||||||
|
|
||||||
## Использование
|
|
||||||
|
|
||||||
Используются [Tagged templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) с тегом `njk`:
|
|
||||||
|
|
||||||
```js
|
|
||||||
njk`
|
|
||||||
{% from "./item.njk" import item as item %}
|
|
||||||
|
|
||||||
<div class="items">
|
|
||||||
{% for n in range(0, 10) %}
|
|
||||||
{{item()}}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
```
|
|
||||||
|
|
||||||
Пример конфигурации Webpack:
|
|
||||||
|
|
||||||
```js
|
|
||||||
[
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
exclude: [/mocks\.js$/],
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: {
|
|
||||||
cacheDirectory: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /mocks\.js$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: {
|
|
||||||
compact: false,
|
|
||||||
plugins: [
|
|
||||||
[
|
|
||||||
'@advdominion/babel-plugin-nunjucks',
|
|
||||||
{
|
|
||||||
templatesFolder: 'src/templates/',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
```
|
|
||||||
|
|
||||||
## Опции
|
|
||||||
|
|
||||||
- `templatesFolder` - строка, обязательный параметр. Путь до папки с файлами шаблонов
|
|
||||||
- `globals` - массив, необязательный параметр. Глобальные переменные для Nunjucks (например, `[{name: "message", value: "Hello, world!"}]`)
|
|
||||||
|
|
||||||
**Важно:** Параметр `cacheDirectory` в опциях babel-loader должен быть отключён.
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import nunjucks from 'nunjucks';
|
|
||||||
|
|
||||||
const babelPluginNunjucks = ({ types: t }) => {
|
|
||||||
return {
|
|
||||||
pre(state) {
|
|
||||||
const options = state.opts.plugins[0].options;
|
|
||||||
this.njkenv = new nunjucks.Environment(new nunjucks.FileSystemLoader(options.templatesFolder));
|
|
||||||
if (options.globals) {
|
|
||||||
for (const { name, value } of options.globals) {
|
|
||||||
this.njkenv.addGlobal(name, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
visitor: {
|
|
||||||
TaggedTemplateExpression(path) {
|
|
||||||
if (path.get('tag').isIdentifier({ name: 'njk' })) {
|
|
||||||
const render = this.njkenv.renderString(path.node.quasi.quasis[0].value.raw);
|
|
||||||
path.replaceWith(t.stringLiteral(render));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default babelPluginNunjucks;
|
|
||||||
47
packages/browserslist-to-targets/README.md
Normal file
47
packages/browserslist-to-targets/README.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# @advdominion/browserslist-to-targets
|
||||||
|
|
||||||
|
Преобразует конфиг [browserslist](https://github.com/browserslist/browserslist) в массив target-строк, совместимый с [esbuild](https://esbuild.github.io) и [Oxc](https://oxc.rs).
|
||||||
|
|
||||||
|
## Зачем
|
||||||
|
|
||||||
|
Оба инструмента (esbuild и Oxc) понимают ограниченный набор целевых браузеров, который отличается от browserslist. Пакет приводит результат `browserslist()` к короткому esbuild-формату: `["chrome109", "ios18.5"]`, а всё, что esbuild/Oxc не поддерживает (`and_chr`, `kaios`, `samsung` и т.д.) — отбрасывает.
|
||||||
|
|
||||||
|
## Установка
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add -D @advdominion/browserslist-to-targets
|
||||||
|
```
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```js
|
||||||
|
import browserslist from 'browserslist';
|
||||||
|
import { browserslistToTargets } from '@advdominion/browserslist-to-targets';
|
||||||
|
|
||||||
|
const targets = browserslistToTargets(browserslist());
|
||||||
|
// ["chrome109", "edge149", "firefox140", "ios18.5", "opera127", "safari26.5"]
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### `browserslistToTargets(browsers): string[]`
|
||||||
|
|
||||||
|
- `browsers` — массив строк от `browserslist()`, например `["chrome 151", "ios_saf 26.6"]`.
|
||||||
|
- Возвращает массив target-строк без пробела: `["chrome151", "ios26.5"]`.
|
||||||
|
|
||||||
|
## Правила преобразования
|
||||||
|
|
||||||
|
| browserslist | esbuild/Oxc | Примечание |
|
||||||
|
| ------------------------------------------------- | --------------- | ------------------------------------------ |
|
||||||
|
| `chrome 151` | `chrome151` | версия становится «приклеенной» к имени |
|
||||||
|
| `ios_saf 26.6` | `ios26.5` | `ios_saf → ios`, остаётся самая старая |
|
||||||
|
| `ios_saf 25-26.5` | `ios25` | `ios_saf → ios`, диапазон → нижняя граница |
|
||||||
|
| `android 151` | `chrome151` | `android → chrome` |
|
||||||
|
| `ios 26.0` | `ios26` | убирает завершающий `.0` |
|
||||||
|
| `and_chr`, `kaios`, `samsung`, `op_mob`, `and_ff` | — отбрасывается | нет в esbuild/Oxc |
|
||||||
|
|
||||||
|
Для каждого браузера остаётся самая старая версия — трансформации покрывают самую консервативную цель.
|
||||||
|
|
||||||
|
## Лицензия
|
||||||
|
|
||||||
|
MIT
|
||||||
65
packages/browserslist-to-targets/index.js
Normal file
65
packages/browserslist-to-targets/index.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* Браузеры, поддерживаемые esbuild/Oxc.
|
||||||
|
*
|
||||||
|
* Зачем: browserslist как входной конфиг должен быть приведён к целевому
|
||||||
|
* формату, который понимает минификатор/трансформер. У esbuild и Oxc
|
||||||
|
* список целевых браузеров жёстко ограничен и отличается от browserslist.
|
||||||
|
* Поэтому мы транслируем браузеры из browserslist в короткий esbuild-формат,
|
||||||
|
* а всё, чего в нём нет — отбрасываем.
|
||||||
|
*/
|
||||||
|
const SUPPORTED_TARGETS = new Set(['es', 'chrome', 'edge', 'firefox', 'ios', 'node', 'safari', 'opera', 'ie']);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Соответствие идентификаторов браузеров browserslist тем, что знает esbuild.
|
||||||
|
*
|
||||||
|
* Browserslist различает `ios_saf` (Safari на iOS) и `android` (Chrome на
|
||||||
|
* Android), тогда как esbuild знает общее `ios` и `chrome`.
|
||||||
|
*/
|
||||||
|
const REPLACES = {
|
||||||
|
ios_saf: 'ios',
|
||||||
|
android: 'chrome',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Преобразует результат `browserslist()` в массив target-строк для esbuild/Oxc.
|
||||||
|
*
|
||||||
|
* Вход — массив записей вида `"chrome 109"`, `"ios_saf 18.5-18.7"`.
|
||||||
|
* Выход — массив вида `["chrome109", "ios18.5"]`.
|
||||||
|
*
|
||||||
|
* Шаги:
|
||||||
|
* 1. Режем запись на имя и версию.
|
||||||
|
* 2. Подменяем идентификаторы (`ios_saf → ios`, `android → chrome`).
|
||||||
|
* 3. Диапазоны версий сводим к нижней границе (`18.5-18.7 → 18.5`).
|
||||||
|
* 4. Приводим `18.0` к `18` (убираем хвостовой `.0`).
|
||||||
|
* 5. Отбрасываем версии, не проходящие regex (ломают esbuild), и браузеры,
|
||||||
|
* которых нет в `SUPPORTED_TARGETS` (`and_chr`, `kaios`, `samsung` и т.д.).
|
||||||
|
* 6. Для каждого браузера оставляем самую старую версию — esbuild применяет
|
||||||
|
* трансформации, покрывающие самую консервативную цель.
|
||||||
|
* 7. Собираем целевые строки без пробела: `chrome109`.
|
||||||
|
*
|
||||||
|
* @param {string[]} browsers - массив строк браузеров от `browserslist()`.
|
||||||
|
* @returns {string[]} массив target-строк совместимый с esbuild/Oxc.
|
||||||
|
*/
|
||||||
|
export const browserslistToTargets = (browsers) => {
|
||||||
|
const result = new Map();
|
||||||
|
|
||||||
|
for (const browser of browsers) {
|
||||||
|
// Шаг 1: ['chrome', '109'].
|
||||||
|
let [name, version] = browser.split(' ');
|
||||||
|
// Шаг 2: подмена идентификаторов.
|
||||||
|
name = REPLACES[name] ?? name;
|
||||||
|
// Шаг 3: диапазон → нижняя граница.
|
||||||
|
version = version.includes('-') ? version.slice(0, version.indexOf('-')) : version;
|
||||||
|
// Шаг 4: `18.0` → `18`, но `18.5` не должно трогаться.
|
||||||
|
version = version.endsWith('.0') ? version.slice(0, -2) : version;
|
||||||
|
|
||||||
|
// Шаг 5: валидная версия + поддерживаемый браузер.
|
||||||
|
if (/^\d+(\.\d+)*$/.test(version) && SUPPORTED_TARGETS.has(name)) {
|
||||||
|
// Шаг 6: самая старая версия (последняя в списке) перезатирает предыдущую.
|
||||||
|
result.set(name, version);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Шаг 7: собираем без пробела.
|
||||||
|
return [...result].map(([name, version]) => `${name}${version}`);
|
||||||
|
};
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/babel-plugin-nunjucks",
|
"name": "@advdominion/browserslist-to-targets",
|
||||||
"version": "4.0.0",
|
"version": "1.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -10,9 +10,5 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@babel/core": "^8.0.0",
|
|
||||||
"nunjucks": "^3.0.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
# lightningcss-loader
|
|
||||||
|
|
||||||
[Lightning CSS](https://lightningcss.dev) loader for [Webpack](https://webpack.js.org)
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { transform } from 'lightningcss';
|
|
||||||
|
|
||||||
return {
|
|
||||||
...,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: '@advdominion/lightningcss-loader',
|
|
||||||
options: {
|
|
||||||
implementation: transform,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Passing options to Lightning CSS
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { transform } from 'lightningcss';
|
|
||||||
|
|
||||||
return {
|
|
||||||
...,
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: '@advdominion/lightningcss-loader',
|
|
||||||
options: {
|
|
||||||
implementation: transform,
|
|
||||||
drafts: {
|
|
||||||
customMedia: true,
|
|
||||||
},
|
|
||||||
minify: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
```
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
const lightningcssLoader = function (source, sourceMap) {
|
|
||||||
const { implementation, ...options } = this.getOptions();
|
|
||||||
const callback = this.async();
|
|
||||||
|
|
||||||
if (typeof implementation !== 'function') {
|
|
||||||
throw new TypeError(
|
|
||||||
`[lightningcss-loader]: The "implementation" option is required and must provide "transform" function of the LightningCSS`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const { code, map } = implementation({
|
|
||||||
filename: this.resourcePath,
|
|
||||||
code: Buffer.from(source),
|
|
||||||
sourceMap: this.sourceMap,
|
|
||||||
inputSourceMap: this.sourceMap && sourceMap ? JSON.stringify(sourceMap) : undefined,
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
|
|
||||||
callback(undefined, code.toString(), map && JSON.parse(map.toString()));
|
|
||||||
};
|
|
||||||
|
|
||||||
export default lightningcssLoader;
|
|
||||||
71
packages/sass-importer/README.md
Normal file
71
packages/sass-importer/README.md
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
# @advdominion/sass-importer
|
||||||
|
|
||||||
|
Кастомный импортёр для [sass-embedded](https://github.com/sass/dart-sass-embedded), который берёт резолв `@use`/`@forward`-импортов на себя и читает файлы через `node:fs`.
|
||||||
|
|
||||||
|
## Зачем
|
||||||
|
|
||||||
|
В проектах на **Yarn PnP** пакеты лежат не в `node_modules`, а внутри `.zip` по виртуальным путям:
|
||||||
|
|
||||||
|
```
|
||||||
|
.yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
|
||||||
|
```
|
||||||
|
|
||||||
|
`.zip`-путь может открыть только код, читающий файлы через `node:fs` (в нём есть PnP-хуки). А `sass-embedded` читает файлы своим отдельным кодом, `node:fs` не использует, поэтому импорты внутри пакетов не резолвятся. Этот импортёр обходит проблему: он сам превращает импорт в существующий файл (`canonicalize`) и отдаёт его содержимое через `readFileSync` (`load`).
|
||||||
|
|
||||||
|
Работает и в `node-modules`-проектах — там `require` без PnP-хуков, но тот же резолв остаётся корректным.
|
||||||
|
|
||||||
|
## Установка
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add -D @advdominion/sass-importer
|
||||||
|
```
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createRequire } from 'node:module';
|
||||||
|
import { createImporter } from '@advdominion/sass-importer';
|
||||||
|
|
||||||
|
const require = createRequire(import.meta.url);
|
||||||
|
const importer = createImporter(require);
|
||||||
|
|
||||||
|
const { css } = compiler.compileString(source, {
|
||||||
|
importers: [importer],
|
||||||
|
loadPaths: ['src/styles'],
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
Импортёр принимает `require` из `createRequire(import.meta.url)`: в PnP он несёт PnP-хуки, в `node-modules` — обычный `require`. Это позволяет резолвить и пакеты, и их внутренние относительные импорты одинаково надёжно.
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### `createImporter(require): Importer`
|
||||||
|
|
||||||
|
- `require` — функция резолва (обычно `createRequire(import.meta.url)`), используется для ветки `pkg:`.
|
||||||
|
- Возвращает объект из двух колбэков для `sass-embedded`: `canonicalize` и `load`.
|
||||||
|
|
||||||
|
`canonicalize(url, ctx)` превращает импорт в канонический `file://` URL или возвращает `null` («я не знаю такой файл» — тогда Sass перебирает следующие импортёры/`loadPaths`).
|
||||||
|
|
||||||
|
`load(canonicalUrl)` отдаёт содержимое файла и его синтаксис (`syntax: 'scss'`). Если файла нет — бросает `Error: Stylesheet not found: <путь>`.
|
||||||
|
|
||||||
|
## Правила резолва
|
||||||
|
|
||||||
|
| Приоритет | Вариант | Пример |
|
||||||
|
| --------- | ------------------ | --------------------------------------- |
|
||||||
|
| 1 | Точное совпадение | `@use 'variables'` → `variables` (файл) |
|
||||||
|
| 2 | Файл с расширением | `@use 'variables'` → `variables.scss` |
|
||||||
|
| 3 | Каталог с `_index` | `@use './lib'` → `./lib/_index.scss` |
|
||||||
|
| 4 | Каталог с `index` | `@use './lib'` → `./lib/index.scss` |
|
||||||
|
|
||||||
|
Для каталогов берутся `_index` и `index` как с `.scss`, так и с `.css`. Порядок проверок соответствует порядку перебора Sass, поэтому первая найденная запись — приоритетная.
|
||||||
|
|
||||||
|
## Виды импортов
|
||||||
|
|
||||||
|
- `pkg:@scope/pkg/path/to/file` → `require.resolve` + резолв кандидата.
|
||||||
|
- `file:///abs/path` → кандидат по файловому пути.
|
||||||
|
- относительные (`../../variables`) → склейка с каталогом содержащего файла (берётся из `ctx.containingUrl`), затем резолв кандидата.
|
||||||
|
- абсолютные (`/...`) и незнакомые схемы (`http:`, `data:`) → отдаёт `null`, резолв остаётся на Sass.
|
||||||
|
|
||||||
|
## Лицензия
|
||||||
|
|
||||||
|
MIT
|
||||||
150
packages/sass-importer/index.js
Normal file
150
packages/sass-importer/index.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
import { existsSync, readFileSync, statSync } from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
|
||||||
|
const isFile = (filePath) => existsSync(filePath) && statSync(filePath).isFile();
|
||||||
|
const toFileUrl = (filePath) => new URL(`file://${encodeURI(path.normalize(filePath))}`);
|
||||||
|
const EXTENSIONS = ['.scss', '.css'];
|
||||||
|
|
||||||
|
/*
|
||||||
|
resolveCandidate(lookupPath) — по пути импорта находит существующий SCSS-файл
|
||||||
|
и возвращает его file:// URL.
|
||||||
|
|
||||||
|
Мы сами эмулируем правила резолва Sass, потому что (см. комментарий над importer) взяли резолв на себя,
|
||||||
|
а не отдали его Sass. Sass при обычной работе умеет подбирать: файл без расширения, файл с расширением,
|
||||||
|
_index.scss внутри папки, index.scss внутри папки. Всё это воспроизводим здесь. Порядок проверок
|
||||||
|
соответствует порядку, в котором Sass перебирает варианты, поэтому первая найденная запись — приоритетная.
|
||||||
|
|
||||||
|
Возвращает null, если ни один вариант не существует: для импортёра это сигнал «я не знаю такой файл»,
|
||||||
|
и Sass переберёт другие импортеры/loadPaths.
|
||||||
|
*/
|
||||||
|
const resolveCandidate = (lookupPath) => {
|
||||||
|
/* 1. Точное совпадение: переданный путь уже указывает на существующий файл. */
|
||||||
|
if (isFile(lookupPath)) {
|
||||||
|
return toFileUrl(lookupPath);
|
||||||
|
}
|
||||||
|
/* 2. «Файл с расширением»: path + .scss/.css. Покрывает @use 'variables' -> variables.scss. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
if (isFile(lookupPath + ext)) {
|
||||||
|
return toFileUrl(lookupPath + ext);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 3. «Директория с partial»: <lookupPath>/_index.scss и т.п. — то, что Sass подставляет при импорте папки/фичи. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
const candidate = path.join(lookupPath, `_index${ext}`);
|
||||||
|
if (isFile(candidate)) {
|
||||||
|
return toFileUrl(candidate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 4. «Директория с index»: <lookupPath>/index.scss — обычный fallback, если _index нет. */
|
||||||
|
for (const ext of EXTENSIONS) {
|
||||||
|
const candidate = path.join(lookupPath, `index${ext}`);
|
||||||
|
if (isFile(candidate)) {
|
||||||
|
return toFileUrl(candidate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
Импортер для sass-embedded.
|
||||||
|
|
||||||
|
Проект собирается через Yarn PnP, поэтому пакеты лежат не в node_modules,
|
||||||
|
а внутри .zip по виртуальным путям:
|
||||||
|
.yarn/__virtual__/@example-example-virtual-.../cache/@example-example-....zip/node_modules/@example/example/...
|
||||||
|
.zip-путь может открыть только код, читающий файлы через node:fs (в нём есть PnP-хуки).
|
||||||
|
А sass-embedded читает файлы своим отдельным кодом, node:fs не использует, поэтому мы
|
||||||
|
резолв импортов берём на себя через readFileSync. `require` передаётся извне: в PnP это
|
||||||
|
createRequire(import.meta.url) с PnP-хуками, в node-modules — обычный require.
|
||||||
|
|
||||||
|
Сюда попадают импорты трёх видов: пути с префиксом pkg:, file:// и относительные
|
||||||
|
(в том числе вложенные @use '../../variables' внутри пакета). Все они проходят через
|
||||||
|
resolveCandidate, а содержимое читается через readFileSync, поэтому и пакеты, и их внутренние
|
||||||
|
относительные импорты открываются одинаково надёжно.
|
||||||
|
*/
|
||||||
|
export const createImporter = (require) => ({
|
||||||
|
/*
|
||||||
|
canonicalize(url, ctx) — Sass спрашивает «во что превратить этот импорт, чтобы я мог его прочитать?».
|
||||||
|
На вход приходит строка url (в оригинальном виде из @use/@forward) и контекст ctx с containingUrl —
|
||||||
|
файлом, из которого сделан импорт. Возвращаем канонический file:// URL или null («не знаю»).
|
||||||
|
*/
|
||||||
|
canonicalize(url, ctx) {
|
||||||
|
/*
|
||||||
|
Ветка 1: импорт пакета вида «pkg:@scope/pkg/path/to/file».
|
||||||
|
url.slice(4) убирает префикс «pkg:», остаётся «@example/example/...». require.resolve превращает
|
||||||
|
это имя в абсолютный путь внутри пакета (благодаря PnP-хукам). Затем resolveCandidate
|
||||||
|
подбирает реальный SCSS-файл и возвращает file:// URL.
|
||||||
|
*/
|
||||||
|
if (url.startsWith('pkg:')) {
|
||||||
|
try {
|
||||||
|
return resolveCandidate(require.resolve(url.slice(4)));
|
||||||
|
} catch {
|
||||||
|
/*
|
||||||
|
Пакет не резолвится (нет в зависимостях) — отдаём null, пусть Sass пробует дальше.
|
||||||
|
*/
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 2: Sass уже сам превратил что-то в file:// и спрашивает нас «подтверди/уточни путь».
|
||||||
|
Извлекаем файловый путь через .pathname (декодируем процент-эскейпы) и подбираем кандидата.
|
||||||
|
*/
|
||||||
|
if (url.startsWith('file://')) {
|
||||||
|
return resolveCandidate(decodeURI(new URL(url).pathname));
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 3: абсолютный путь («/...») или URI с незнакомой схемой («http:», «data:» и т.п.).
|
||||||
|
Здесь мы в резолве не участвуем — отдаём null и позволяем Sass/loadPaths обработать самим.
|
||||||
|
*/
|
||||||
|
if (url.includes(':') || url.startsWith('/')) {
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Ветка 4: относительный импорт («../../variables», «../link»).
|
||||||
|
Это именно тот случай, который ломает сборку в PnP: путь ведёт внутрь .zip.
|
||||||
|
Чтобы его открыть, нужен базовый файл, из которого сделан импорт, — его даёт ctx.containingUrl.
|
||||||
|
Склеиваем относительный путь с каталогом содержащего файла через path.resolve и резолвим через
|
||||||
|
resolveCandidate.
|
||||||
|
*/
|
||||||
|
const containingUrl = ctx?.containingUrl;
|
||||||
|
if (containingUrl) {
|
||||||
|
const abs = path.resolve(path.dirname(decodeURI(containingUrl.pathname)), url);
|
||||||
|
return resolveCandidate(abs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Если контекста нет (чего в норме не бывает) — «не знаю», идём к следующему импортеру/loadPaths.
|
||||||
|
*/
|
||||||
|
return null; // oxlint-disable-line unicorn/no-null
|
||||||
|
},
|
||||||
|
|
||||||
|
/*
|
||||||
|
load(canonicalUrl) — Sass просит содержимое файла по каноническому URL, который мы вернули в canonicalize.
|
||||||
|
Возвращаем текст файла и его синтаксис, чтобы Sass не гадал.
|
||||||
|
*/
|
||||||
|
load(canonicalUrl) {
|
||||||
|
/*
|
||||||
|
file:// URL извлекаем как путь: .pathname уже декодирован, но для надёжности декодируем явно.
|
||||||
|
*/
|
||||||
|
const filePath = decodeURI(canonicalUrl.pathname);
|
||||||
|
if (!isFile(filePath)) {
|
||||||
|
/*
|
||||||
|
Файла нет или это каталог — кидаем понятную ошибку с путём, чтобы в логе было видно, чего не хватает.
|
||||||
|
*/
|
||||||
|
throw new Error(`Stylesheet not found: ${filePath}`);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
/*
|
||||||
|
readFileSync — синхронно читаем. Для PnP важен именно node:fs (см. док над importer):
|
||||||
|
только читаемый через него файл открывается внутри .zip.
|
||||||
|
*/
|
||||||
|
contents: readFileSync(filePath, 'utf8'),
|
||||||
|
/*
|
||||||
|
Говорим Sass, что это SCSS-файл (иначе он пытается угадать по расширению, что для .zip-пути ненадёжно).
|
||||||
|
*/
|
||||||
|
syntax: 'scss',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/lightningcss-loader",
|
"name": "@advdominion/sass-importer",
|
||||||
"version": "1.0.2",
|
"version": "1.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable unicorn/no-null */
|
/* eslint-disable unicorn/no-null */
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
extends: ['stylelint-config-standard-scss'],
|
extends: ['stylelint-config-recommended-scss'],
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['**/*.vue'],
|
files: ['**/*.vue'],
|
||||||
@@ -13,6 +13,7 @@ export default {
|
|||||||
'block-no-empty': null,
|
'block-no-empty': null,
|
||||||
'no-invalid-double-slash-comments': null,
|
'no-invalid-double-slash-comments': null,
|
||||||
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
||||||
|
'length-zero-no-unit': true,
|
||||||
'property-disallowed-list': [
|
'property-disallowed-list': [
|
||||||
['animation', 'background', 'border', 'flex', 'font', 'grid', 'margin', 'padding', 'transition'],
|
['animation', 'background', 'border', 'flex', 'font', 'grid', 'margin', 'padding', 'transition'],
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/stylelint-config",
|
"name": "@advdominion/stylelint-config",
|
||||||
"version": "2.0.0",
|
"version": "2.1.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|||||||
19
yarn.lock
19
yarn.lock
@@ -5,12 +5,9 @@ __metadata:
|
|||||||
version: 10
|
version: 10
|
||||||
cacheKey: 10c0
|
cacheKey: 10c0
|
||||||
|
|
||||||
"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
|
"@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
|
resolution: "@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets"
|
||||||
peerDependencies:
|
|
||||||
"@babel/core": ^8.0.0
|
|
||||||
nunjucks: ^3.0.0
|
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
@@ -36,18 +33,18 @@ __metadata:
|
|||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
"@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader":
|
|
||||||
version: 0.0.0-use.local
|
|
||||||
resolution: "@advdominion/lightningcss-loader@workspace:packages/lightningcss-loader"
|
|
||||||
languageName: unknown
|
|
||||||
linkType: soft
|
|
||||||
|
|
||||||
"@advdominion/pluralize@workspace:packages/pluralize":
|
"@advdominion/pluralize@workspace:packages/pluralize":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/pluralize@workspace:packages/pluralize"
|
resolution: "@advdominion/pluralize@workspace:packages/pluralize"
|
||||||
languageName: unknown
|
languageName: unknown
|
||||||
linkType: soft
|
linkType: soft
|
||||||
|
|
||||||
|
"@advdominion/sass-importer@workspace:packages/sass-importer":
|
||||||
|
version: 0.0.0-use.local
|
||||||
|
resolution: "@advdominion/sass-importer@workspace:packages/sass-importer"
|
||||||
|
languageName: unknown
|
||||||
|
linkType: soft
|
||||||
|
|
||||||
"@advdominion/scroll-to@workspace:packages/scroll-to":
|
"@advdominion/scroll-to@workspace:packages/scroll-to":
|
||||||
version: 0.0.0-use.local
|
version: 0.0.0-use.local
|
||||||
resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
|
resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
|
||||||
|
|||||||
Reference in New Issue
Block a user