README.md

Static-Style-Extract

Provide a lib like @ant-design/static-style-extract to support generate static css for SSR usage to generate raw css file for caching.

Install

npm install @ant-design/static-style-extract

Usage

import { extractStyle } from `@ant-design/static-style-extract`;

const cssText = extractStyle(); // :where(.css-bAMboOo).ant-btn ...

use with custom theme

import { extractStyle } from `@ant-design/static-style-extract`;

const cssText = extractStyle(); // :where(.css-bAMboOo).ant-btn ...

const cssText = extractStyle((node) => (
  <ConfigProvider theme={theme}>
    {node}
  </ConfigProvider>
));

use command line

npx @ant-design/static-style-extract@latest -i your-theme.tsx

your-theme.tsx example

import * as React from 'react';
import { ConfigProvider } from 'antd';

const testGreenColor = '#008000';
const testRedColor = '#ff0000';

// Not a React component (Pure function)
export default (node) => (
  <>
    <ConfigProvider
      theme={{
        token: {
          colorBgBase: testGreenColor,
        },
      }}
    >
      {node}
    </ConfigProvider>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: testGreenColor,
        },
      }}
    >
      <ConfigProvider
        theme={{
          token: {
            colorBgBase: testRedColor,
          },
        }}
      >
        {node}
      </ConfigProvider>
    </ConfigProvider>
  </>
)

Example

http://localhost:8000

online example: http://react-component.github.io/static-style-extract/

Development

npm install
npm start

Test Case

npm test

Coverage

npm run coverage

open coverage/ dir

License

static-style-extract is released under the MIT license.