Compare commits
6 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
7a39d520dd
|
|||
|
e4d9075ebe
|
|||
|
b8286098ff
|
|||
|
27a16018f3
|
|||
|
5c773895cb
|
|||
|
12c14e8eb5
|
@@ -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;
|
||||
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"name": "@advdominion/babel-plugin-nunjucks",
|
||||
"version": "4.0.0",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^8.0.0",
|
||||
"nunjucks": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
# @advdominion/browserslist-to-targets
|
||||
|
||||
Преобразует конфиг [browserslist](https://github.com/browserslist/browserslist) в массив target-строк, совместимый с [esbuild](https://esbuild.github.io) и [Oxc](https://oxc-project.github.io).
|
||||
Преобразует конфиг [browserslist](https://github.com/browserslist/browserslist) в массив target-строк, совместимый с [esbuild](https://esbuild.github.io) и [Oxc](https://oxc.rs).
|
||||
|
||||
## Зачем
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@advdominion/browserslist-to-targets",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
|
||||
@@ -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",
|
||||
"version": "1.0.2",
|
||||
"name": "@advdominion/sass-importer",
|
||||
"version": "1.0.1",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
@@ -13,6 +13,7 @@ export default {
|
||||
'block-no-empty': null,
|
||||
'no-invalid-double-slash-comments': null,
|
||||
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
||||
'length-zero-no-unit': true,
|
||||
'property-disallowed-list': [
|
||||
['animation', 'background', 'border', 'flex', 'font', 'grid', 'margin', 'padding', 'transition'],
|
||||
{
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@advdominion/stylelint-config",
|
||||
"version": "2.0.1",
|
||||
"version": "2.1.0",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
|
||||
21
yarn.lock
21
yarn.lock
@@ -5,15 +5,6 @@ __metadata:
|
||||
version: 10
|
||||
cacheKey: 10c0
|
||||
|
||||
"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
|
||||
peerDependencies:
|
||||
"@babel/core": ^8.0.0
|
||||
nunjucks: ^3.0.0
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@advdominion/browserslist-to-targets@workspace:packages/browserslist-to-targets"
|
||||
@@ -42,18 +33,18 @@ __metadata:
|
||||
languageName: unknown
|
||||
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":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@advdominion/pluralize@workspace:packages/pluralize"
|
||||
languageName: unknown
|
||||
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":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
|
||||
|
||||
Reference in New Issue
Block a user