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’;colors: [
red,
green,
blue
]style simply sets the path that @import "karamel" imports
style, and just have an index.css at the root of the npm module
@andreyvolokitin,
Adding PostCSS to the pipeline adding 500-600 ms
Is that with or without plugins?
@jonathantneal, I think it was the cost of simply adding PostCSS to the project with no plugins, but a few plugins (like autoprefixer, url-rewriting or media-queries grouping) didn't add much, though I didn't test plugins extensively yet, I'm in the process of project refactoring and can tell more after it is complete
(New to postcss. Having trouble with some plugins. Looking for advise.)
I'm looking for a set of plugin that can work like stylus:
- No brackets and semi-colon. (I use sugarss)
- Global variables (postcss-advanced-variables -> Work nicely with SSS)
- Import file like the old sass (postcss-easy-import -> Doesn't work well)
- Nested rule (postcss-nested -> Ok)
- Nested properties (postcss-nested-props -> Doesn't work well)
- Functions (postcss-functions -> partially work fine but still ok to me)
Do you have alternative set for this, plugins that can replace those doesn't work well?
I think there might be a problem in the Grunt section of the PostCSS Present Env documentation.
Currently it looks like this:
grunt.initConfig({
postcss: {
options: {
use: [
postcssPresetEnv(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});That doesn't work for me. postcssPresetEnv never fires. But if I switch grunt.initConfig.options.use to grunt.initConfig.options.processors it works
grunt.initConfig({
postcss: {
options: {
processors: [
postcssPresetEnv(/* pluginOptions */)
]
},
dist: {
src: '*.css'
}
}
});Are the docs wrong? Or am I Doing It Wrong™?