Импорт таблиц стилей с помощью скриптов модулей CSS

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

Dan Clark

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

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

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

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

Требования

Использование скриптов модулей 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.