The flatjs plugin @flatjs/forge-plugin-styling

A plugin for compile less, sass, css for forge compiler. Note: the sass maybe will broken in macos node environment. we need to using node-sass.

Features

• A plugin for compile less, sass, css for @flatjs/forge.
• Use this plugin is suite for compile wechat miniprogram modular is better.
• If we need to modular build react UI components(with stylings) recommend use rollup-plugin-postcss enable CSS modules for .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less files.

Installation

$ npm i --save @flatjs/forge-plugin-styling

Configuration

export const testCompile = async (
  input: string | string[],
  options: forgePluginStylingOptions,
  distFolder?: string,
): Promise<boolean> => {
  // Note: `forgePluginStyling` is plugin of @flatjs/forge，
  // in most case we will use `ForgeBuildOptions` as build options.
  const stylingPlugin = forgePluginStyling(options);
  return startBuild(options.projectCwd, options.projectCwd, {
    input,
    output: {
      distFolder: distFolder || options.format,
      format: options.format,
      cleanDistFolder: false,
      // `@flatjs/forge` for javascript only.
      sourcemap: options.sourceMap,
      // we must set sourcemap: true, while sourcemapPathTransform
      sourcemapPathTransform(_relativeSourcePath: string, sourcemapPath: string) {
        return sourcemapPath;
      },
    },
    plugin: {
      extraPlugins: [stylingPlugin],
    },
  });
};

Usage

simple

const result = await testCompile('src/index.ts', {
  projectCwd,
  use: ['less', 'sass'],
  format: 'cjs',
  styleOutputExt: '.css',
});

See more

css

const result = await testCompile(['src/multi-entry-two.ts', 'src/multi-entry-one.ts'], {
  projectCwd,
  format: 'cjs',
});

See more

less

const result = await testCompile('src/index.ts', {
  projectCwd,
  use: ['less'],
  format: 'cjs',
});

See more

sass

const result = await testCompile('src/index.ts', {
  projectCwd,
  use: ['sass'],
  format: 'cjs',
  styleOutputExt: '.css',
});

See more

sourcemap

sourcemap.test.ts sourceMap:inline

// will generate inline sourcemap `css`.
const result = await testCompile('src/css/sourcemap.ts', {
  projectCwd,
  format: 'umd',
  sourceMap: 'inline',
});
// will generate inline sourcemap `less`.
const result1 = await testCompile('src/less/sourcemap.ts', {
  projectCwd,
  format: 'umd',
  sourceMap: 'inline',
});
// will generate inline sourcemap `sass`.
const result2 = await testCompile('src/sass/sourcemap.ts', {
  projectCwd,
  format: 'umd',
  sourceMap: 'inline',
});

sourcemap.test.ts sourceMap:true

// should generate sourcemap file `css`
const result = await testCompile('src/css/sourcemap-with-file.ts', {
  projectCwd,
  format: 'umd',
  sourceMap: true,
});

// should generate sourcemap file `less`
const lessOpt: Less.Options = {
  sourceMap: {
    sourceMapFileInline: true,
  },
};
const result = await testCompile('src/less/sourcemap-with-file.ts', {
  projectCwd,
  format: 'umd',
  // Note the final output sourceMap file.
  sourceMap: true,
  use: [['less', lessOpt]],
});

// should generate sourcemap file `sass`
const sassOpts: Options = {
  sourceMap: true,
};
const result = await testCompile('src/sass/sourcemap-with-file.ts', {
  projectCwd,
  format: 'umd',
  // Note the final output sourceMap file.
  sourceMap: true,
  use: [['sass', sassOpts]],
});

See more

wxss

const result = await testCompile(
  ['src/page1/index.ts', 'src/page2/index.ts'],
  {
    projectCwd,
    use: ['less'],
    format: 'cjs',
    autoAppendToModule: false,
    styleOutputExt: '.wxss',
  },
  'miniprogram',
);

See more

References

for sass processor

• npm i node-sass
• npm rebuild node-sass (if required(node-sass) failed)