https://github.com/netlogix/stencil-styleguide-output-target
https://github.com/netlogix/stencil-styleguide-output-target
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/netlogix/stencil-styleguide-output-target
- Owner: netlogix
- License: mit
- Created: 2024-02-07T14:50:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-05T10:07:08.000Z (about 1 year ago)
- Last Synced: 2025-03-10T07:16:43.681Z (2 months ago)
- Language: TypeScript
- Size: 1.2 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @netlogix/stencil-styleguide-output-target
A stencil output target which also builds Pattern Lab and processes scss
## Usage
To use this output target, add it to your `stencil.config.ts`:
```typescript
import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { patternLabOutputTarget } from "@netlogix/stencil-styleguide-output-target";
import postcss from "rollup-plugin-postcss";
export const config: Config = {
namespace: 'stencil',
srcDir: 'source/script',
watchIgnoredRegex: /dependencyGraph.json/, // important for watching for changes in patternlab
outputTargets: [
// ... other output targets
patternLabOutputTarget({
rollupOptions:
{
input: 'source/css/style.scss',
plugins: [
postcss({
modules: true,
extract: true,
}),
],
},
}),
// ...
],
devServer: {
openBrowser: false,
reloadStrategy: "pageReload", // important for hot reload to work with patternlab
root: 'public',
},
plugins: [
sass(),
],
// ...
};
```
## Configuration
The PatternlabOutput function takes an optional configuration object with the following properties:
`rollupOptions`:
An object with rollup options to be merged with the default options.
Default:
```
rollupOptions: {
input: 'source/scss/style.scss',
plugins: [
postcss({
modules: true,
extract: true
})
]
},
```
#
`rollupOutputOptions`:
An object with rollup output options to be merged with the default options.
Default:
```
rollupOutputOptions: {
name: 'style',
dir: './public/css',
format: 'es'
},
```
#
`sourceDir`: the directory which will be watched. Default: `source/**/*`
## License
This package is licensed under the MIT license.