如何将 autoprefixer 与网络组件（ litElement ）一起使用？

Question

在 LitElement 中，您可以将样式作为内联样式直接存储在 component.ts（或 .js）中：

@customElement('main-header')
export class MainHeader extends LitElement {
  static styles = css`
    p {
      background: red;
    }
  `;
}

或在单独的文件中，如 style.ts:

\* mainHeaderStyles.ts *\
export default css`
    p {
      background: red;
    }
`;

\* MainHeader.ts *\
import mainHeaderStyles from './main-header.ts';

@customElement('main-header')
export class MainHeader extends LitElement {
  static styles = mainHeaderStyles;

但不在“.css”中，因此打包工具（目前我使用的是 Parcel）无法找到我的样式并添加浏览器前缀。

我尝试使用 Webpack（然后是 Rollup）并将“.css”文件直接导出到组件，打包器可以通过这种方式使用 autoprefixer，但它们无法将我的样式与前缀内联到组件（他们只是将所有样式合并到 1（或更多）输出文件）。

我知道 StencilJS，但我不想重写我所有的 LitElement 代码。

很高兴听到任何解决方案或关于如何解决它的建议。）

Answer 1

使用捆绑器

bundlers [...] just merge all styles to 1(or more) output file

这实际上取决于您如何配置捆绑器以及 loaders/processors 您正在使用什么。例如，这是一个简单的 Rollup + Postcss + Autoprefixer 配置，可完美用于 lit:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default {
  // ...
  plugins: [
    resolve(),
    postcss({
      plugins: [autoprefixer()],
      inject: false, // By default postcss also injects the
                     // styles in <head> which is pretty useless
                     // with LitElement's style encapsulation
    }),
    typescript(),
  ],
}

这样处理后的 css 字符串可用作默认导出：

import style from './style.css';

使用 Parcel 或 Webpack + postcss-loader.

可以轻松完成同样的事情

采用导入的样式表

bundlers can use autoprefixer in this way, but they can't inline my style with prefixes to component

我猜你的意思是 LitElement 期望 styles 属性中的 CSSResult，而不是普通的 css 文本。不过，您可以做几件事来让它发挥作用：

import {css, unsafeCSS, LitElement, customElement} from 'lit-element';
import style from './style.css';

@customElement('my-component')
export class MyComponent extends LitElement {
  // Apply the css template tag to the style variable
  static styles = css([style]);
  // or use unsafeCSS
  static styles = unsafeCSS(style);
  // ...
}

如果您对 Rollup + Postcss 解决方案感兴趣：我构建了一个 Rollup 插件 (rollup-plugin-postcss-lit) 以适应 Postcss将样式导出为 lit，这样您就不必手动将它们转换为 CSSResults

import {customElement, LitElement, css} from 'lit-element';
import myStyles from './styles.css';
import otherStyles from './other-styles.scss';

@customElement('my-component')
export class MyComponent extends LitElement {
  static styles = [myStyles, otherStyles, css`
    .foo {
      padding: ${...};
    }
  `];
}

如何将 autoprefixer 与网络组件（ litElement ）一起使用？

How to use autoprefixer with web-components( litElement )?

web-component

typescript

autoprefixer

lit-element

使用捆绑器

采用导入的样式表