The Stencil CSS in TS Plugin
npm install stencil-plugin-tssThis 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
`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.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 isgenerateBundle
not the final output of the plugin and will be deleted in the 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
Context will be the stencil context object passed to the transform hook.
Default function looks like this:
`/** ts-style error${
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 =
err && err.message ? ': ' + err.message : ''
} **/;`
return results;
});
}
return Promise.resolve();
}
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.
- Stencil
- Stencil Worldwide Slack
- Ionic Components
- Ionicons