コメント募集: パッケージ インポーター

2023年9月26日 ジェームス・スタッキー ウェバー投稿

Sassユーザーは、既存のテーマをカスタマイズしたり、スタイリングユーティリティにアクセスするために、依存関係にあるスタイルを使用する必要があることがよくあります。これまで、Sassは依存関係からのパッケージを使用するための標準的な方法を規定していませんでした。これにより、Webpackの~プレフィックスや、loadPathsにnode_modulesを追加するなど、さまざまなドメイン固有のソリューションが生まれました。

これは共通の課題であり、依存関係に頼ることを困難にする可能性があります。また、プロジェクトを新しいビルド プロセスに移行することも難しくなる可能性があります。

パッケージインポーターパッケージインポーターのパーマリンク

pkg: URLスキームを使用して、特定の環境の解決標準と規則を使用して依存関係のURLを解決するようにSassに指示できる、新しいタイプのインポーターを提案しています。

最大のユースケースに対処するために、Nodeエコシステム用の組み込みパッケージインポーターを提案しています。パッケージの作成者は、配布されたpackage.jsonで、パッケージのエントリポイントに対してsass 条件付きエクスポートを定義することを推奨します。たとえば、次のようなpackage.jsonがあるとします。

{
  "exports": {
    ".": {
      "sass": "./src/scss/index.scss",
      "import": "./dist/js/index.mjs",
      "default": "./dist/js/index.js"
    },
    "./utils": {
      "sass": "./src/scss/_utils.scss",
      "default": "./dist/js/utils.js"
    }
  }
}

これにより、パッケージの利用者は以下のように記述できるようになります 。

@use "pkg:library";
@use "pkg:library/utils";

Sassのパッケージ利用者が、パッケージ作成者による変更を必要とせずに、pkg: URLの使用を開始できるようにしたかったのです。多くのSassパッケージは、すでにさまざまな方法でエントリポイントを定義しているため、Nodeパッケージインポーターは、観測された実装の大部分をカバーする、エントリポイントを定義する他のいくつかの方法もサポートしています。これらは以下の順序で解決され ます。

  1. package.json exportsのsass、style、またはdefault条件で、SassまたはCSS ファイルに解決されるもの。

  2. サブパスがない場合は、ルート エクスポートを見つけます

    1. package.json ルートのsassキー。

    2. package.json ルートのstyleキー。

    3. パッケージルートのindexファイル。ファイル拡張子と パーシャルが解決されます。

  3. サブパスがある場合は、パッケージルートを基準にそのパスを解決し、ファイル拡張子と パーシャルを解決します。

推奨されるアルゴリズムをより深く理解し、テストできるように、アルゴリズムの基本的な実装を備えたSass pkg: テストリポジトリが作成されました 。

詳細詳細のパーマリンク

Nodeエコシステムは主にJavaScriptの配布に関心があるため、パッケージ作成者がSassを配布できるようにする方法を見つける必要がありました。多くの点で、最も近い類似点はTypeScriptの型であり、型定義ファイルはコンパイルされたコードとともに配布され、多くの場合、パッケージの主要なエクスポートではありません 。

デザインライブラリとフレームワークの400を超えるパッケージの分析に基づいて、パッケージの利用者は、パッケージの作成者が変更を加える必要なしに、多くのパッケージでpkg: URLを使用できるようになると予想しています。パッケージの作成者は、パッケージの利用方法をより適切に指定および文書化できるようになります 。

また、分析では、Sassを配布するパッケージは、ほとんどの場合、JavaScriptコードとともに配布していることがわかりました。一部のパッケージでは、package.jsonルートにsassキーとしてSassファイルを、またはstyleキーとしてCSSファイルを指定しており、どちらもNodeパッケージインポーターでサポートされます。mainキーまたはmoduleキーのCSSまたはSassでの使用はほとんど観測されておらず、サポートされません 。

SassおよびCSSファイルを指定するための条件付きエクスポートフィールドの現在の使用状況は少ないものの、パッケージ作成者が条件付きエクスポートを採用するにつれて、これは増加すると予想されます。さらに、Vite、Parcel、およびWebpack用Sassローダーなどのビルドツールはすべて、現在、sassおよびstyleカスタム条件を使用してSassパスを解決しています。

ユーザーは、sassからnodePackageImporterをインポートし、それをimportersリストに含めることによって、新しいパッケージインポーターをオプトインする必要があります。これはブラウザのSassでは利用できません 。

const sass = require('sass');

sass.compile('style.scss', {
    importers: [sass.nodePackageImporter]
})

次のステップ次のステップのパーマリンク

これはまだ提案段階であるため、フィードバックをお待ちしております。提案をGithubで確認し、懸念事項やご意見がございましたら、問題をオープンしてください 。