跳至主要內容

安裝

執行時期​

使用 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 萃取至外部檔案。這可以用任何支援 Babel 的套件管理器來完成，利用 StyleX 外掛程式產生的中繼資料。有關 @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",
  },
};