Блог

Главная - Вопросы по программированию - как использовать оба перед занятиями при удалении неиспользуемого класса?

как использовать оба перед занятиями при удалении неиспользуемого класса?

#javascript #reactjs #webpack #css-selectors #next.js

#javascript #reactjs #webpack #css-селекторы #next.js

Вопрос:

У меня есть проект nextjs.Я использую postcss-purgecss для удаления своих unused css классов, но я столкнулся с одной проблемой.В моем style.css файле есть два :before класса для одного и того же элемента.

Я беру помощь от https://purgecss.com/guides/next.html

  .f20 [class^="icn-"]:before,.f20 [class*=" icn-"]:before {
        font-family: 'icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

. но когда я компилирую и удаляю unused css файл, он удаляет один before class .Я хочу, чтобы оба они присутствовали в моем css-файле bundle.Как я этого добьюсь? текущий результат такой

 .f20 [class^="icn-"]:before {
        font-family: 'icons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

Вот мой postcss.config.js файл

 module.exports = {
  plugins: [
    'autoprefixer',
    'postcss-flexbugs-fixes'[
      // ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
      ('postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3,
        features: {
          'custom-properties': false
        }
      })
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        "content": [
          "./pages/**/*.{js,jsx,ts,tsx}",
         
],
        'whitelistPatterns': [/fb20/]
      }
    ]
  ]
};

какие-либо обновления .. ?

Комментарии:

1. В readme (также в документах ) говорится, что есть safelist вариант, который, похоже, касается соблюдения определенных правил независимо от того, что он мог бы сделать в противном случае. Однако я не уверен, как это работает.

2. но какое имя класса я добавлю ` ‘safelist’: [‘icn-‘], есть предположения? любое регулярное выражение? `

3. Я думаю, вы могли бы использовать specific selectors форму и просто поместить туда все свои селекторы, как в safelist: ['.f20 [class^="icn-"]:before', '.f20 [class*=" icn-"]:before'] .

4. Не работает ..:(