Использование сценариев модуля CSS для импорта таблиц стилей

Узнайте, как использовать сценарии модулей CSS для импорта таблиц стилей CSS, используя тот же синтаксис, что и модули JavaScript.

Dan Clark

Благодаря новой функции сценариев модулей CSS вы можете загружать таблицы стилей CSS с операторами import , как и модули JavaScript . Таблицы стилей затем можно применять к документам или теневым корням таким же образом, как и конструируемые таблицы стилей . Это может быть удобнее и эффективнее, чем другие способы импорта и применения CSS.

Поддержка браузера

Скрипты модулей CSS доступны по умолчанию в Chrome и Edge версии 93.

Поддержка в Firefox и Safari пока недоступна. Прогресс реализации можно отслеживать по ошибке Gecko и ошибке WebKit соответственно.

Предварительные условия

• Знакомство с модулями JavaScript .
• Знакомство с конструируемыми таблицами стилей .

Использование скриптов модуля CSS

Импортируйте скрипт модуля CSS и примените его к документу или теневому корню следующим образом:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

По умолчанию экспорт скрипта модуля CSS представляет собой конструируемую таблицу стилей , содержимое которой соответствует импортируемому файлу. Как и любая другая конструируемая таблица стилей, она применяется к документам или теневым корням с помощью adoptedStyleSheets .

В отличие от других способов применения CSS из JavaScript, нет необходимости создавать элементы <style> или возиться со строками JavaScript текста CSS.

Модули CSS также имеют некоторые преимущества, что и модули JavaScript.

• Дедупликация: если один и тот же файл CSS импортируется из нескольких мест приложения, он все равно будет выбран, создан и проанализирован только один раз.
• Последовательный порядок оценки: когда выполняется импортирующий JavaScript, он может полагаться на импортируемую таблицу стилей, которая уже была получена и проанализирована.
• Безопасность: модули извлекаются с помощью CORS и используют строгую проверку типа MIME.

Импортировать утверждения (что за « assert »?)

Часть assert { type: 'css' } оператора import является утверждением импорта . Это необходимо; без него import рассматривается как обычный импорт модуля JavaScript и завершится ошибкой, если импортируемый файл имеет MIME-тип, отличный от JavaScript.

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

Динамически импортированные таблицы стилей

Вы также можете импортировать модуль CSS с помощью динамического импорта с новым вторым параметром для type: 'css' :

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

Правила @import пока не разрешены

В настоящее время правила CSS @import не работают в конструируемых таблицах стилей, включая сценарии модулей CSS. Если правила @import присутствуют в конструируемой таблице стилей, эти правила будут игнорироваться.

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

В спецификацию может быть добавлена ​​поддержка @import в сценариях модулей CSS. Отслеживайте обсуждение этой спецификации в выпуске GitHub .