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
str.chatCodeAt(i) === 30) and “jumps” (when we found initial " we use C++ based indexOf or Regexp to find next " instead of going symbol by symbol)
Speaking of fast. I'm setting up webpack dev environment with CSS HMR, and I have single CSS file (200Kb, ~11k LoC). Adding PostCSS to the pipeline adding 500-600 ms to the build time during development. Not much but it adds up to other tasks and the overall time starts to feel slow (currently I'm trying to optimize everything I can to make development rebuild faster).
I didn't evaluate the project completely and didn't decide what PostCSS plugins to use, but overall it looks like it might be possible to use PostCSS only for production build, because the majority of plugins are for optimisation/fixing, which is not mandatory in development.
Could you give a general advise — does this idea (using PostCSS only for production) seems feasible or I should just include PostCSS into development pipeline? Also, what development rebuild times are accepted as “normal” these days (maybe I just had false expectations of what time dev rebuild should take in a usual project)? I was quite surprised to find out I need to wait ~2 seconds for rebuild/HMR to update my CSS (1 second is acceptable, more starts to feel awkward)… I already turned off sourcemaps and stylelint (which BTW adds another ~second).
Hi @RyanZim can I check with you. If I have a npm package and I want to let user’s import multiple stylesheets from it can I write the following in package.json?
{
"style": ["dist/karamel/index.css”, "dist/karamel/reset.css", “dist/karamel/typography.css"],
}Then users should be able to use them like such
@import ‘karamel’;
@import ‘karamel/reset’;
@import ‘karamel/typography’;