postcss import

Postcss-импорт

Плагин PostCSS для преобразования правил @import путем встраивания контента.

Этот плагин может использовать локальные файлы, модули узлов или web_modules. Чтобы определить путь правила @import , оно может просмотреть корневой каталог (по умолчаниюprocess.cwd process.cwd() ), web_modules , node_modules или локальные модули. При импорте модуля он будет искать index.css или файл, указанный в package.json в style или main полях. Вы также можете вручную указать несколько путей для просмотра.

Примечания:

• Этот плагин, вероятно, следует использовать в качестве первого плагина в вашем списке. Таким образом, другие плагины будут работать с AST так, как если бы обрабатывался только один файл, и, вероятно, будут работать так, как вы и ожидаете .

• Запуск postcss-url после postcss-import в вашей цепочке плагинов позволит вам настроить url() ресурсов (или даже встроить их) после встраивания импортированных файлов.

• Чтобы оптимизировать вывод, этот плагин импортирует файл только один раз в заданной области (корень, медиа-запрос...). Тесты проводятся на основе пути и содержимого импортированных файлов (с использованием хеш-таблицы). Если такое поведение не то, что вам нужно, обратите внимание на опцию skipDuplicates .

• Если вы ищете Glob Imports , вы можете использовать postcss-import-ext-glob для расширения postcss-import.

• Если вы хотите импортировать удаленные источники, вы можете использовать postcss-import-url с опцией плагина dataUrls для расширения postcss-import.

• Импорт, который не был изменен (с помощью options.filter или потому, что это удаленный импорт), перемещается в начало вывода.

• Этот плагин пытается следовать спецификации CSS @import ; Операторы @import должны предшествовать всем остальным операторам (кроме @charset ).

Установка

 $ npm install -D postcss-import

Использование

Если ваша таблица стилей не находится в том же месте, где вы запускаете postcss ( process.cwd() ), вам нужно будет использовать опцию from , чтобы относительный импорт работал.

 // зависимостиconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// css для обработкиconst css = fs.readFileSync("css/input.css" , "utf8")// обрабатываем csspostcss()
  .use(atImport())
  .process(css, {// здесь требуется опция `from`: "css/input.css"
  })
  .then((result) => {const output = result.cssconsole.log(output)
  })

css/input.css :

 /* удаленные URL-адреса сохраняются */@import "https://example.com/styles.css";/* могут использовать `node_modules`, `web_modules` или локальные модули */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* относительно css/ в соответствии с опцией `from` выше *//* поддерживаются все стандартные обозначения значения "url" */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (минимальная ширина: 25em);@import 'baz.css' Layer(baz-layer);body {background: black;
}

даст вам:

 @import "https://example.com/styles.css";/* ... содержимое ../node_modules/cssrecipes-defaults/index.css *//* ... содержимое ../node_modules/normalize .css/normalize.css *//* ... содержимое css/foo.css *//* ... содержимое css/foo-1.css *//* ... содержимое css/foo-2.css */@media (min-width: 25em) {/* ... содержимое css/bar.css */@layer baz-layer {/* ... содержимое css /baz.css */}body { фон: черный;
}

Ознакомьтесь с тестами, чтобы увидеть больше примеров.

Параметры

filter

Тип: Function
По умолчанию: () => true

Преобразуйте только тот импорт, для которого тестовая функция возвращает true . Импорты, для которых тестовая функция возвращает false будут оставлены как есть. Функция получает путь для импорта в качестве аргумента и должна возвращать логическое значение.

root

Тип: String
По умолчанию: process.cwd() или имя файла postcss from

Определите корень, где разрешить путь (например: место, где находятся node_modules ). Не следует использовать так много.
Примечание. Вложенный @import дополнительно будет использовать относительное имя каталога импортируемых файлов.

path

Тип: String|Array
По умолчанию: []

Строка или массив путей поиска файлов.

plugins

Тип: Array
По умолчанию: undefined

Массив плагинов, которые будут применяться к каждому импортированному файлу.

resolve

Тип: Function
По умолчанию: null

С помощью этой опции вы можете предоставить собственный преобразователь путей. Эта функция получает аргументы (id, basedir, importOptions, astNode) и должна возвращать путь, массив путей или обещание, разрешающее путь(и). Если вы не вернете абсолютный путь, ваш путь будет преобразован в абсолютный путь с использованием преобразователя по умолчанию. Для этого вы можете использовать решение.

load

Тип: Function
По умолчанию: ноль

Вы можете перезаписать способ загрузки по умолчанию, установив эту опцию. Эта функция получает аргументы (filename, importOptions) и возвращает содержимое или обещанное содержимое.

skipDuplicates

Тип: Boolean
По умолчанию: true

По умолчанию похожие файлы (основанные на том же содержимом) пропускаются. Это необходимо для оптимизации вывода и пропуска подобных файлов, таких как, например, normalize.css . Если такое поведение вам не нравится, просто установите для этой опции false чтобы отключить его.

addModulesDirectories

Тип: Array
По умолчанию: []

Массив имен папок для добавления в преобразователь Node. Значения будут добавлены в каталоги разрешения по умолчанию: ["node_modules", "web_modules"] .

Эта опция предназначена только для добавления дополнительных каталогов в преобразователь по умолчанию. Если вы предоставляете свой собственный преобразователь с помощью параметра конфигурации resolve выше, это значение будет игнорироваться.

warnOnEmpty

Тип: Boolean
По умолчанию: true

По умолчанию postcss-import предупреждает об импорте пустого файла.
Установите для этой опции значение false чтобы отключить это предупреждение.

Пример с некоторыми опциями

 const postcss = require("postcss")const atImport = require("postcss-import")postcss()
  .use(atImport({путь: ["src/css"],
  }))
  .process(cssString)
  .then((result) => {const { css } = результат
  })

Поддержка сообщений dependency

postcss-import добавляет сообщение в result.messages для каждого @import . Сообщения имеют следующий формат:

{
  type: 'dependency',
  file: absoluteFilePath,
  parent: fileContainingTheImport
}

В основном это используется исполнителями postcss, которые реализуют просмотр файлов.

---

ВКЛАД

• ⇄ Запросы на включение и ★ Звезды всегда приветствуются.

• Для ошибок и запросов функций, пожалуйста, создайте проблему.

• Запросы на включение должны сопровождаться прохождением автоматических тестов ( $ npm test ).

Журнал изменений

Лицензия