Как использовать autoprefixer с веб-компонентами (litElement)? - PullRequest
Новая
       19

Как использовать autoprefixer с веб-компонентами (litElement)?

0 голосов
/ 12 мая 2019

В 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" непосредственно в компонент, упаковщики могут использовать авторефиксатор таким образом, но они не могут встроить мой стиль с префиксами для компонента (они просто объединяют все стили в 1 (или более) выходной файл).

Я знаю о StencilJS, но не хочу переписывать весь мой код LitElement.

Буду рад услышать любые решения или предложения о том, как его решить.)

1 Ответ

0 голосов
/ 17 мая 2019

Использование упаковщиков

упаковщики [...] просто объединяют все стили в 1 (или более) выходной файл

Это на самом деле зависит от того, как вы сконфигурировали свой пакет и какие загрузчики / процессоры вы используете. Например, это простая конфигурация 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 .

Принятие импортированных таблиц стилей

упаковщики могут использовать autoprefixer таким образом, но они не могут встроить мой стиль с помощью префиксов для компонента

Полагаю, вы имеете в виду, что LitElement ожидает CSSResult s в свойстве styles, а не обычный текст 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 к освещению, так что у вас нет вручную преобразовать их в 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: ${...};
    }
  `];
}
...