less-plugin-dls

Less plugin for Baidu DLS.

🚧 less-plugin-dls is a work in progress. 🚧

Installation

npm i --save-dev less-plugin-dls

Usage

Autoinject with Less plugin

import less from 'less'
import dls from 'less-plugin-dls'

less
  .render('a { color: @dls-link-font-color-normal; }', {
    plugins: [dls()]
  })
  .then(result => {
    // handle result
  })

Import from stylesheets

With less-loader:

@import "~less-plugin-dls/tokens/index.less";

a { color: @dls-link-font-color-normal; }

Use CLI argument

lessc style.less --dls

Custom functions

dls-contextual(@color, @type)

To generate contextual colors according to the given brand color.

Params:

• @color: Color - the brand color.
• @type: info | success | warning | error - the color context.

Return value:

Color - the generated contextual color.

@color: dls-contextual(#3d88f2, success); // → #39bf45

dls-shade(@color, @level)

To generate a specific shade level of the given base color.

Params:

• @color: Color - the base color.
• @level: Number - the shade level.

Return value:

Color - the generated shaded color.

@color: dls-shade(#3d88f2, 3); // → #b3cfff

dls-sum(...@dimensions)

To get the sum of the given dimensions or calc expressions.

Params:

• @dimensions: List<Dimension | Calc> - A list of length values.

Return value:

Dimension | Calc - the total value of the given list.

@width: dls-sum(1px, 30%); // → calc(1px + 30%)
@height: dls-sum(1px, 10px, 100px); // → 100px
@top: dls-sum(calc(1px + 5em), -1px); // → 5em
@left: dls-sum(calc(1px + 5em), -1px, calc(-5em)); // → 0

dls-line-height(@line-height, @font-size): Dimension

To calculate the absolute line-height from the given line-height and font-size value.

Will return @line-height directly if it is an absolute length (eg. 15px, 2em). Will return the product of @line-height and @font-size for relative lengths (eg. 1.5, 200%).

Params:

• @line-height: Dimension - the line-height value.
• @font-size: Dimension - the font-size value.

Return value:

The absolute length of the line-height.

@h1: dls-line-height(1.5, 16px); // → 24px
@h2: dls-line-height(120%, 15px); // → 18px
@h3: dls-line-height(2em, 1.2em); // → 2em

Options

reduceCalc: boolean

Indicates whether to reduce calc expression to the simplest form or not.

Default value: true.

Tooling

CLI checker

npx dls check -c -o result.log

Commands

check

To check which variables are not used inside a directory. The current strategy is plain text search so that doesn't cover the case of Less's variable name interpolation.

Options

• --dir / -d

  The target directory to check.

  Default: ..

• --exclude / -x

  Comma-separated glob expression, indicates which files should be ignored.

  Default: node_modules,test.

  npx dls check -x node_modules,test,dist # or --exclude=node_modules,test,dist

• --components / -c

  Comma-separated component names to specify which component-level variables will be checked. --components=all will check all component-level variables.

  Variables can be ignored if you put a .dlsignore file under the project root directory, with each variable (should be prefixed by @) on a single line. Lines led by # will be treated as comments.

  npx dls check -c button,select # or --components=button,select
  npx dls check -c all # or --components=all

• --output / -o

  The output file for the check result.

  npx dls check -o result.log # or --output=result.log

Editor Extensions

• Baidu DLS (VS Code)

  Marketplace / GitHub

License

MIT