Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stencil-community/stencil-postcss
Autoprefixer plugin for Stencil
https://github.com/stencil-community/stencil-postcss
autoprefixer autoprefixer-plugin postcss postcss-plugins stencil stenciljs
Last synced: about 2 hours ago
JSON representation
Autoprefixer plugin for Stencil
- Host: GitHub
- URL: https://github.com/stencil-community/stencil-postcss
- Owner: stencil-community
- License: other
- Created: 2018-02-14T15:59:38.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-31T14:54:57.000Z (about 1 year ago)
- Last Synced: 2024-10-30T15:21:14.785Z (16 days ago)
- Topics: autoprefixer, autoprefixer-plugin, postcss, postcss-plugins, stencil, stenciljs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@stencil-community/postcss
- Size: 110 KB
- Stars: 30
- Watchers: 11
- Forks: 24
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stencil - stencil-postcss - Autoprefixer plugin for Stencil. (Plugins / Community)
- awesome-stencil - stencil-postcss - Autoprefixer plugin for Stencil. (Plugins / Community)
README
# @stencil-community/postcss
This package is used in order to integrate with postcss and all of its plugins.
First, npm install within the project:
```
npm install @stencil-community/postcss --save-dev
```
Next, within the project's `stencil.config.ts` file, import the plugin and add
it to the `plugins` config. In the example below we're using the `autoprefixer` postcss plugin, so you'll also have to run:
```
npm install autoprefixer @types/autoprefixer --save-dev
```
This plugin requires Node.js 14 or higher. For older Node versions, see the 1.x release.
#### stencil.config.ts
```ts
import { Config } from '@stencil/core';
import { postcss } from '@stencil-community/postcss';
import autoprefixer from 'autoprefixer';
export const config: Config = {
plugins: [
postcss({
plugins: [autoprefixer()]
})
]
};
```
During development, this plugin will use postcss to process any plugins you may
have passed along.
## Options
Postcss has an ecosystem of plugins itself (a plugin for a plugin if you will).
For our example, we're using the autoprefixer plugin, and configuring its
options. Note, you can pass any valid autoprefixer option.
```js
exports.config = {
plugins: [
postcss({
plugins: [
autoprefixer({
browsers: ['last 6 versions'],
cascade: false
})
]
})
]
};
```
### Inject Globals Paths
The `injectGlobalPaths` config is an array of paths that automatically get added as `@import` declarations to all components. This can be useful to inject variables, mixins and functions to override defaults of external collections. Relative paths within `injectGlobalPaths` should be relative to the `stencil.config.js` file.
```js
exports.config = {
plugins: [
postcss({
injectGlobalPaths: [
'src/globals/variables.pcss',
'src/globals/mixins.pcss'
]
})
]
};
```
Note that each of these files are always added to each component, so in most cases they shouldn't contain CSS because it'll get duplicated in each component. Instead, `injectGlobalPaths` should only be used for Sass variables, mixins and functions, but not contain any CSS.
## Valid file extensions
This plugin will only transpile files whose extensions are `.css`, `.pcss`, or `.postcss`.
## Related
* [postcss](https://github.com/postcss/postcss)
* [autoprefixer](https://github.com/postcss/autoprefixer)
* [Stencil](https://stenciljs.com/)
* [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
* [Ionic Components](https://www.npmjs.com/package/@ionic/core)
* [Ionicons](http://ionicons.com/)
## Contributing
Please see our [Contributor Code of
Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for
information on our rules of conduct.