Stencil-plugin-tss NPM

stencil-plugin-tss

Repo based on @stencil/sass

This package is used to transpile .ts files to css styles. It is optimized for a Stencil build, but may work in other environments too.

First, npm install within the project:

npm install stencil-plugin-tss --save-dev

Next, within the project's rollup.config.js or stencil.config.js file, import the plugin and add it to the config's plugins config:

stencil.config.ts

import { Config } from '@stencil/core';
import { tss } from 'stencil-plugin-tss';

export const config: Config = {
  plugins: [tss(options)]
};

The plugin will start transpiling .ts files as soon as it is initialized. The transpiled files will be read by the transform hook to generate css styles.

Options

options.logCssErrors `boolean, default: true`

This will toggle the output of debugging information. There'll be hints displayed in the console if the compiled styles are faulty.

options.tempFolder `string, default: "./node_modules/.tssTemp"`

Specify a folder in which to output transpiled .ts files. There'll be cjs modules generated into this folder - this is not the final output of the plugin and will be deleted in the generateBundle hook.

options.stylesGlob `string, default: "**/*.styles.ts"`

Pass a glob that resolves to every .ts file you want to use as styles.

options.rootDir `string, default: process.cwd()`

Will be used as root for globbing.

options.outputGenerator `function, default: output to stencil inMemory fs`

Pass a function to specify what to do with the transformation results. Function signature: (fileName: string, results: d.PluginTransformResults, context?: any) => Promise<any> Context will be the stencil context object passed to the transform hook. Default function looks like this:

async (fileName, results, context) => {
  if (context) {
    return context.fs
      .writeFile(results.id, results.code, {
        inMemoryOnly: true
      })
      .catch((err: any) => {
        console.error(err);
        loadDiagnostic(context, err, fileName);
        results.code = `/**  ts-style error${
          err && err.message ? ': ' + err.message : ''
        }  **/`;
        return results;
      });
  }
  return Promise.resolve();
}