メインコンテンツへスキップ

インストール

ランタイム​

StyleX の使用にはすべて、ランタイムパッケージのインストールが必要です。

npm install --save @stylexjs/stylex

コンパイラー​

開発および本番環境で StyleX を使用する推奨方法は、ビルド時コンパイラーを使用することです。

開発​

開発では、スタイルがコンパイル時に処理されるように Babel プラグインを設定するだけで済みます。プラグインはスタイルをコンパイルし、JavaScript モジュールにランタイムスタイルインジェクションコードを挿入します。

npm install --save-dev @stylexjs/babel-plugin
// babel.config.js
import styleXPlugin from '@stylexjs/babel-plugin';

const config = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        // Set this to true for snapshot testing
        // default: false
        test: false,
        // Required for CSS variable support
        unstable_moduleResolution: {
          // type: 'commonJS' | 'haste'
          // default: 'commonJS'
          type: 'commonJS',
          // The absolute path to the root directory of your project
          rootDir: __dirname,
        },
      },
    ],
  ],
};

export default config;

本番環境​

本番環境での StyleX の使用では、CSS を外部ファイルに抽出する必要があります。これは、StyleX プラグインによって生成されたメタデータを使用し、Babel をサポートする任意のバンドラーを使用して行うことができます。@stylexjs/babel-plugin API の詳細については、API リファレンスを参照してください。

一般的に使用されるパッケージおよびメタフレームワークでのこの作業を容易にするために、StyleX は Webpack、Rollup、Next.js、および esbuild 用の (実験的な) プラグインを提供しています。

Rollup
npm install --save-dev @stylexjs/rollup-plugin
rollup.config.js
import stylexPlugin from '@stylexjs/rollup-plugin';

const config = {
  input: './index.js',
  output: {
    file: './.build/bundle.js',
    format: 'es',
  },
  // Ensure that the stylex plugin is used before Babel
  plugins: [stylexPlugin({
    // Required. File path for the generated CSS file.
    fileName: './.build/stylex.css',
    // default: false
    dev: false,
    // prefix for all generated classNames
    classNamePrefix: 'x',
    // Required for CSS variable support
    unstable_moduleResolution: {
      // type: 'commonJS' | 'haste'
      // default: 'commonJS'
      type: 'commonJS',
      // The absolute path to the root directory of your project
      rootDir: __dirname,
    },
  })],
};

export default config;
Webpack
npm install --save-dev @stylexjs/webpack-plugin
webpack.config.js
const StylexPlugin = require('@stylexjs/webpack-plugin');
const path = require('path');

const config = (env, argv) => ({
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, '.build'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // Ensure that the stylex plugin is used before Babel
    new StylexPlugin({
      filename: 'styles.[contenthash].css',
      // get webpack mode and set value for dev
      dev: argv.mode === 'development',
      // Use statically generated CSS files and not runtime injected CSS.
      // Even in development.
      runtimeInjection: false,
      // optional. default: 'x'
      classNamePrefix: 'x',
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root directory of your project
        rootDir: __dirname,
      },
    }),
  ],
  cache: true,
});

module.exports = config;
Next.js
npm install --save-dev @stylexjs/nextjs-plugin @stylexjs/babel-plugin rimraf
package.json
{
  "scripts": {
    ...,
    "predev": "rimraf .next",
    "prebuild": "rimraf .next"
  }
}
.babelrc.js
module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: __dirname,
        },
      },
    ],
  ],
};
next.config.mjs
/** @type {import('next').NextConfig} */
import stylexPlugin from "@stylexjs/nextjs-plugin";

const nextConfig = {};

const __dirname = new URL(".", import.meta.url).pathname;
export default stylexPlugin({
  rootDir: __dirname,
})(nextConfig);
esbuild
npm install --save-dev @stylexjs/esbuild-plugin
build.mjs
import esbuild from 'esbuild';
import stylexPlugin from '@stylexjs/esbuild-plugin';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: './build/bundle.js',
  minify: true,
  plugins: [
    stylexPlugin({
      // If set to 'true', bundler will inject styles in-line
      // Do not use in production
      dev: false,
      // Required. File path for the generated CSS file
      generatedCSSFileName: path.resolve(__dirname, 'build/stylex.css'),
      // Aliases for StyleX package imports
      // default: '@stylexjs/stylex'
      stylexImports: ['@stylexjs/stylex'],
      // Required for CSS variable support
      unstable_moduleResolution: {
        // type: 'commonJS' | 'haste'
        // default: 'commonJS'
        type: 'commonJS',
        // The absolute path to the root of your project
        rootDir: __dirname,
      },
    }),
  ],
})

これらの各プラグインの使用方法のデモンストレーションについては、StyleX のサンプルアプリを参照してください。

ローカル開発専用​

本番環境では使用しないでください

本番環境では @stylexjs/dev-runtime を使用しないでください。これはパフォーマンスコストが大きく、コンパイラーなしのローカル開発でのみ使用する必要があります。このランタイムには、コンパイラーを使用する場合に利用できる機能がありません。

コンパイラーとビルドプロセスを設定せずに StyleX を使い始めるには、ローカル開発ランタイムをインストールできます。

npm install --save-dev @stylexjs/dev-runtime

開発ランタイムは、アプリの JavaScript エントリポイントでインポートして設定する必要があります。

import inject from '@stylexjs/dev-runtime';

inject({
  classNamePrefix: 'x',
  dev: true,
  test: false,
});

これが完了すると、本番環境にデプロイする準備ができるまで、追加の設定なしで @stylexjs/stylex をインポートして使用できます。

ESLint でミスを検出​

StyleX コンパイラーはスタイルを検証せず、多くの無効なスタイルをコンパイルします。スタイルを作成するときにこれらのミスを検出するには、ESLint プラグインを使用する必要があります。

npm install --save-dev @stylexjs/eslint-plugin
.eslintrc.js
module.exports = {
  plugins: ["@stylexjs"],
  rules: {
    "@stylexjs/valid-styles": "error",
  },
};