postcss-antd-fixes

PostCSS plugin tries to fix all issues about antd with any others global CSS reset

Features

Note

If your antd version >=5, you can use @layer to fix. Also you may have a quesion: Can I use @layer?

• support antd + TailwindCSS preflight.css
  • fix button style conflict, ref: ant-design/ant-design#38794
  • support anchor tags with colorPrimary under any antd components

Usage

// postcss.config.js
module.exports = {
  plugins: {
    'tailwindcss': {},
    'autoprefixer': {},
    'postcss-antd-fixes': {
      // Support multiple prefixes, if you do not custom antd class name prefix, it's not necessary option.
      prefixes: ['vp-antd', 'ant'],
    },
  },
}

Transforms

Transform button styles

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/* => */

button:where(:not([class^='ant'])),
[type='button']:where(:not([class^='ant'])),
[type='reset']:where(:not([class^='ant'])),
[type='submit']:where(:not([class^='ant'])) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

Add anchor styles

:where([class^='ant']) a {
  /* colorPrimary */
  color: #1677ff;
  text-decoration: none;
}

Build & Publish

• npm run build
• npx changeset
• npx changeset version
• git commit
• npx changeset publish
• git push --follow-tags

changeset prerelease doc

License

MIT License © 2023 Yuns