Configuration items
You can set transcoding and image-related configurations on the configuration page.
| Configuration item | Description | Type definition |
|---|---|---|
| Transform mode | Different style framework, scss, tailwind or emotion. After tailwind is turned on, you will not be able to preview in CodeSandbox | 'jsx+scss' | 'jsx+tailwind' | 'jsx+emotion' |
| Transform optimization | Optional Scss repeated styles are extracted into Mixin, redundant nodes are removed, layer structure is corrected, and rectangular background is corrected. Documentation | |
| BoxSizing | affects the calculation of width and height and needs to be consistent with your project settings. In Tailwind projects, it is generally necessary to enable | 'content-box' | 'border-box ' |
| Color format | Optional hex or rgb. When hex has no transparency, the last two digits are not added. The syntax used by rgb is rgb(R G B[ / A]) | |
| Transform scale 更新 | Used to proportionally scale CSS size when outputting code, suitable for scenarios where the design draft is 2 times the draft or n times the draft. Documentation | number |
| Use margin instead of gap | Use margin to replace column-gap or row-gap when outputting | |
| Copy code mode | Affects the content copied when the copy button is clicked. The entire file contains components and references, JSX only contains template code | 'file' | 'template' |
| Image interface | Select custom when customizing the image upload interface | 'default' | 'extranet' | 'custom' |
Tailwind configuration
After the transcoding mode is selected as jsx+tailwind, the style will match the default class of tailwind.
After tailwind is opened, Tailwind's config.js file can be configured in the plug-in. During the D2C process, the actual values of color and size are automatically mapped to the theme of tailwindcss.
The following figure shows the difference between using the Tailwind configuration file and the default generated class. After using the configuration file, it will match the preset class name and css variables in the project.
Click D2C supports tailwindcss theme configuration to see how to use it.
Custom image interface
The image upload interface is used to upload images, js, css, and json files during transcoding. Files uploaded through the default interface of the community version plug-in will only be saved for 3 hours. If you need to store them for a longer period of time, you need to customize the image upload service.
The D2C plug-in will directly request your image address and will not store your image config information.
Authentication method
You can choose the following methods for authentication. After configuration, it will be transparently transmitted to the interface you requested:
- Query: Splice the authentication token directly into the URL
- header: Pass the authentication token through the header
- body: Pass the authentication token through the body
If you do not configure authentication, please be careful not to expose your image interface to the outside world.
return value
The interface return value needs to contain the URL of the image, the type is as follows.
Type definition
Notice
- Note that the request body is encoded by multipart/form-data, so you need to have the corresponding library to parse the request body
- When processing files, please note that the key of the file is file. Other fields in the request body are customized by you
- Configure Cross-domain response header
- Access-Control-Allow-Origin: https://semi.design
- Access-Control-Allow-Methods: POST, GET, OPTIONS
- The interface must be
httpsprotocol. The browser does not have this restriction on localhost during debugging.