`@import` rule does not work with `workspaceDir`

[u1f992]

vivliostyle.config.jsにて、workspaceDirを設定したうえでthemeに@importルールを含むCSSを指定した場合、インポートされたCSSがworkspaceDirにコピーされません。

$ vivliostyle --version
cli: 8.14.1
core: 2.30.4

$ tree .
.
├── css
│   ├── style.css
│   └── sub.css
├── manuscript.md
└── vivliostyle.config.js

2 directories, 4 files

$ tree .vivliostyle/
.vivliostyle/
├── css
│   └── style.css
├── manuscript.html
└── publication.json

2 directories, 3 files

vivliostyle.config.js

const vivliostyleConfig = {
  title: '_',
  author: '_',
  theme: 'css/style.css',
  entry: ['manuscript.md'],
  output: "output.pdf",

  workspaceDir: '.vivliostyle',
};

module.exports = vivliostyleConfig;

manuscript.md

# foo

css/style.css

@import url('sub.css');

@page {
    size: A4;
}

css/sub.css

:root {
    background-color: red;
}

css/style.cssのページサイズは反映されていますが、css/sub.cssの背景色は反映されていません。コンソールではファイルが存在しない旨が表示されています（省略されていますが…style/css/sub.cssからworkspaceDir以下から読み込みを試みたことがわかります）。

[spring-raining]

Vivliostyle CLIでは、CSSファイルとして theme を指定した場合は単一のCSSファイルであることを前提として動作します。そのため、指定したCSSファイル内で @import を使って外部のファイルを参照した際の動作は保証していません。 複数のCSSファイルをテーマとして使用したい場合は、CSSファイルとしてではなく、ローカルのnpm packageとしてインポートさせてください。例えば、css/package.json に以下のようなファイルを配置します。

{
  "name": "my-theme",
  "main": "style.css"
}

これで、css ディレクトリがnpm packageとして認識されるので、vivliostyle.config.js で theme: 'css' 指定すると css ディレクトリ内のすべてのCSSを参照できる状態でテーマが適用されます。

[u1f992]

ご回答ありがとうございます。既知の挙動ということで承知しました。