1 | # @stencil/postcss
|
2 |
|
3 | This package is used in order to integrate with postcss and all of its plugins.
|
4 |
|
5 | First, npm install within the project:
|
6 |
|
7 | ```
|
8 | npm install @stencil/postcss --save-dev
|
9 | ```
|
10 |
|
11 | Next, within the project's `stencil.config.ts` file, import the plugin and add
|
12 | it to the `plugins` config. In the example below we're using the `autoprefixer` postcss plugin, so you'll also have to run:
|
13 |
|
14 | ```
|
15 | npm install autoprefixer @types/autoprefixer --save-dev
|
16 | ```
|
17 |
|
18 | This plugin requires Node.js 14 or higher. For older Node versions, see the 1.x release.
|
19 |
|
20 | #### stencil.config.ts
|
21 | ```ts
|
22 | import { Config } from '@stencil/core';
|
23 | import { postcss } from '@stencil/postcss';
|
24 | import autoprefixer from 'autoprefixer';
|
25 |
|
26 | export const config: Config = {
|
27 | plugins: [
|
28 | postcss({
|
29 | plugins: [autoprefixer()]
|
30 | })
|
31 | ]
|
32 | };
|
33 | ```
|
34 |
|
35 | During development, this plugin will use postcss to process any plugins you may
|
36 | have passed along.
|
37 |
|
38 | ## Options
|
39 |
|
40 | Postcss has an ecosystem of plugins itself (a plugin for a plugin if you will).
|
41 | For our example, we're using the autoprefixer plugin, and configuring its
|
42 | options. Note, you can pass any valid autoprefixer option.
|
43 |
|
44 | ```js
|
45 | exports.config = {
|
46 | plugins: [
|
47 | postcss({
|
48 | plugins: [
|
49 | autoprefixer({
|
50 | browsers: ['last 6 versions'],
|
51 | cascade: false
|
52 | })
|
53 | ]
|
54 | })
|
55 | ]
|
56 | };
|
57 | ```
|
58 |
|
59 | ### Inject Globals Paths
|
60 |
|
61 | 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.
|
62 |
|
63 | ```js
|
64 | exports.config = {
|
65 | plugins: [
|
66 | postcss({
|
67 | injectGlobalPaths: [
|
68 | 'src/globals/variables.pcss',
|
69 | 'src/globals/mixins.pcss'
|
70 | ]
|
71 | })
|
72 | ]
|
73 | };
|
74 | ```
|
75 |
|
76 | 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.
|
77 |
|
78 | ## Valid file extensions
|
79 |
|
80 | This plugin will only transpile files whose extensions are `.css`, `.pcss`, or `.postcss`.
|
81 |
|
82 | ## Related
|
83 |
|
84 | * [postcss](https://github.com/postcss/postcss)
|
85 | * [autoprefixer](https://github.com/postcss/autoprefixer)
|
86 | * [Stencil](https://stenciljs.com/)
|
87 | * [Stencil Worldwide Slack](https://stencil-worldwide.slack.com)
|
88 | * [Ionic Components](https://www.npmjs.com/package/@ionic/core)
|
89 | * [Ionicons](http://ionicons.com/)
|
90 |
|
91 | ## Contributing
|
92 |
|
93 | Please see our [Contributor Code of
|
94 | Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for
|
95 | information on our rules of conduct.
|