The Stencil CSS in TS Plugin
Last updated a month ago by schadenn .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install stencil-plugin-tss 
SYNC missed versions from official npm registry.


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:


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.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.code, {
        inMemoryOnly: true
      .catch((err: any) => {
        loadDiagnostic(context, err, fileName);
        results.code = `/**  ts-style error${
          err && err.message ? ': ' + err.message : ''
        }  **/`;
        return results;
  return Promise.resolve();

Code Highlighting

For better usability install styled component plugin within your IDE:

You can then use: import { styled } from "stencil-plugin-tss"

And prefix all your template literal CSS strings with styled to get CSS highlighting and IntelliSense.


For better hot-module-reloading currently the stencil compiler has to be modified slightly.

Run: node node_modules/stencil-plugin-tss/rewriteStencil.js

This will do the necessary modifications. I will open a feature-request in the official Stencil project to make this configurable.


Current Tags

  • 2.0.1                                ...           latest (a month ago)

13 Versions

  • 2.0.1                                ...           a month ago
  • 2.0.0                                ...           a month ago
  • 1.2.0                                ...           a month ago
  • 1.1.1                                ...           a month ago
  • 1.1.0                                ...           a month ago
  • 1.0.2                                ...           6 months ago
  • 1.0.1                                ...           7 months ago
  • 1.0.0                                ...           9 months ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
Maintainers (1)
Today 0
This Week 0
This Month 21
Last Day 0
Last Week 13
Last Month 83
Dependencies (14)
Dev Dependencies (8)
Dependents (0)

Copyright 2014 - 2016 © |