Вложенный синтаксис с PostCSS для :hover и :focus

Я использую TailwindCSS и PostCSS, и у меня есть этот код CSS:

.btn {
  @apply py-1;
  @apply px-4;
  @apply border;
  @apply rounded;
}

.btn:hover {
  @apply bg-white text-black;
}

.btn:focus {
  @apply bg-black text-white;
}

Есть ли собственный способ в PostCSS (или с помощью плагина) написать этот код, как показано ниже?

.btn {
  @apply py-1;
  @apply px-4;
  @apply border;
  @apply rounded;

  &:hover {
    @apply bg-white text-black;
  }
  
  &:focus {
    @apply bg-black text-white;
  }
}

css tailwind-css postcss postcss-import
person Fred Hors    schedule 23.08.2020    source источник
comment
поиск как использовать postcss с sass   -  person David Nithael Torres Lima    schedule 23.08.2020
comment
что-то вроде этого npmjs.com/package/postcss-sass   -  person David Nithael Torres Lima    schedule 23.08.2020
comment
Я не использую SASS!   -  person Fred Hors    schedule 23.08.2020
comment
да, но вам нужно будет добавить плагин   -  person David Nithael Torres Lima    schedule 23.08.2020
comment
toptal.com/front-end/postcss-sass-new- play-date вот статья об этом, которая может помочь   -  person David Nithael Torres Lima    schedule 23.08.2020

Ответы (3)


arrow_upward
2
arrow_downward

Используйте postcss-preset-env.

Первая установка, npm install postcss-preset-env --save-dev.

Затем включите nesting-rules в файле postcss.config.js,

module.exports = {
  plugins: [
    "tailwindcss",
    [
      "postcss-preset-env",
      {
        stage: 3,
        features: {
          "nesting-rules": true,
        },
      },
    ],
  ],
};

Здесь вы можете найти список идентификаторов функций, которые можно включить

person frouo    schedule 14.09.2020

arrow_upward
0
arrow_downward

Вы также можете использовать плагин postcss-nested.

В вашем package.json:

{
  "dependencies": {
    "postcss": "^8.2.9",
    "tailwindcss": "^2.0.4",
    "postcss-nested": "^5.0.5"
  }
}

В вашем postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-nested'),
    require('tailwindcss'),
  ]
}
person xoryves    schedule 20.04.2021

arrow_upward
0
arrow_downward

Также работает, следуя обозначению объекта Reference

module.exports = {
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
        'postcss-preset-env': { stage: 2 },
    },
}
person Michael    schedule 26.07.2021