--mobile-min: 600px;
@custom-media --mobile-up (min-width: var(--mobile-min));
@media (--mobile-up) {
.Links {
margin-right: 280px;
}
}
module.exports = {
plugins: {
'postcss-preset-env': {
stage: 0,
browsers: ['ie > 10', 'last 2 versions'],
},
....
/* there is no syntax yet for declaring custom global variables like this */
--mobile-min: 600px;
postcss-preset-env
plugin inside of postcss.config.js
, like
plugins: [postcssPresetEnv()]
@import
the same file in each of my components is there a way I can set this file using the PostCSS webpack loader? I think I’ve seen this in other webpack loaders known as a ‘dependency'.
Hi, I can't remove comments. What is the problem?
// module.exports = {
// plugins: [
// require('postcss-import'),
// require('tailwindcss'),
// require('autoprefixer'),
// ]
// }
const cssNanoConfig = {
preset: [
'default',
{
discardComments: {
removeAll: true
}
}
]
}
const uncssConfig = {
html: [
// html/*.html,
'atasehir.html'
//'http://example.test'
// Your entire sitemap added manually
// or some other way if you’re clever (wget is handy for this).
]
}
module.exports = ctx => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
tailwindcss: true,
cssnano: ctx.env === 'production' ? cssNanoConfig : false,
autoprefixer: ctx.env === 'production' ? {} : false,
'postcss-uncss': ctx.env === 'production' ? uncssConfig : false,
'postcss-uncss': uncssConfig
}
})
Heya @ai, it’s been a while. I’ve had some questions on my mind that I’d love to chat with you about. A while back you mentioned the visitor-enabled PostCSS can be built locally. Is that right? And is that how you’d recommend I develop new versions of plugins for it?
Also, would you have any interest in producing “next” builds of it for npm? I imagine visitor rewrites will give me impressive performance gains and code simplicity.
Finally, can the visitor API be extended to funnel down into selectors or values? If so, is there an example of this somewhere?
It’s for scenarios where you have something like this:
.red {
color: red;
}
and you want to automatically create a prefix for each breakpoint in your design system
@media screen and (min-width: 480px) {
.red-sm {
color: red;
}
}
@media screen and (min-width: 768px) {
.red-md {
color: red;
}
}
@media screen and (min-width: 1024px) {
.red-lg {
color: red;
}
}
Ideally I feel like there should be something in th spec that allows you to do this natively but there isn’t. This is partly why I asked a while ago about binding classes dynamically using js.
@ShafiqSarwar8_twitter you can try this plugin https://github.com/TrySound/postcss-inline-svg
if not, you can write your own plugin (it i very easy) https://github.com/postcss/postcss/blob/master/docs/writing-a-plugin.md