I feel overwhelemed with the amount of plugins to master, and config options examples mostly show to to support newer CSS, not degrade to older browsers.
Thanks in Advance.
doing a yarn eject yeilds this in webpack.config.js
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// facebook/create-react-app#2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// facebook/create-react-app#2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
:)
I’m always breaking all the things.
class Plugin {
get postcssPlugin() {
return 'to-red'
}
Declaration(decl) {
console.log(decl.toString())
decl.value = 'red'
}
static get postcss() {
return true
}
}
postcss([ Plugin ]).process('a { color: black }', { from: '!' }).then(({ css }) => console.log(css))postcss/lib/processor.js:40
i = i()
^
TypeError: Class constructor Plugin cannot be invoked without 'new'
23 replies
I have also tried br tag
but it is just going on the right
but I want to place them down with one divider
I’ve been keeping my Saturdays free of labor and coding; mostly spending time with the family, relaxing and playing games. Tomorrow, I’ll return to the upgrades. I tried taking on CSS Modules, yesterday, but perhaps that was too much to bite at first. Not that PostCSS Preset Env is less complicated. :)
Hi, folks, trying to add some declaration to each rule, isn't this considered as right usage?
module.exports = opts => ({
postcssPlugin: 'postcss-plugin',
Rule (rule) {
rule.prepend({ prop: 'background-image', value: `url('path/url')` });
}
});It goes through each rule but does not modify the results (rule.nodes after prepend() remain the same) :(
Is the only option to use Root () {} method and walk through each rule explicitly?
8 replies
Rule (rule, { Declaration }) {
let color = new Declaration({ prop: 'color', value: 'black' })
rule.append(color)
}
I’m on my phone, so I’m sorry about the formatting and lack of threading.
@jonathantneal Thank you for the response! Unfortunately, it does not matter how I pass Declaration to rule, it just does not adding it in result css
I’m really excited about the potential for class plugins, @ai. Another advantage I didn’t immediately realize for class components is the ability to extend other plugins using the native extends functionality of classes. I’ve updated my PR description with more details, and I will address the current responses after a short walk.
8 replies
It’s difficult that PostCSS Values Parser relies so heavily on PostCSS, which I know you have asked them not to do. I spent a lot of time getting a visitor system into that tool locally, but if the author rejects it (as my previous PRs have been, because they do not want to manage more complexity, which is also a fine maintainer choice) then I’m left to fork.
9 replies
A few alternatives included forking both PostCSS and PostCSS Values Parser and combining them. But I feel like that would be a nightmare to maintain. This is why I’m refocusing my efforts on the CSS Parser. I can use that to replace PostCSS Values Parser. I can then integrate a visitor system in a more maintainable project. Perhaps that tokenizer/parser can even get ported into PostCSS itself (which I think is a vision we both want?).
Good news. With permission, I quit my job this morning, so I can now commit to the PostCSS ecosystem full time this week! :tada: Background: Last month, some of us (including me) were told we were being laid off at my company, and our last day was going to be this Wednesday, but we no longer had any assignments. I’m sharing that so you don’t think I’m giving the middle finger to my friends at work. I have a new position starting next week, and my wife gave me permission to adjust the finances to make this happen.
am i right in thinking that something is up with postcss 8 plugins that's causing it to not pass modified AST to the next plugin? i'm experimenting with creating a simple plugin compatible with v8 but no matter what modifications i seem to make to the tree the output does not include said modifications.
7 replies
Hi I'm using the postcss-loader https://github.com/webpack-contrib/postcss-loader. My hope it compile out css custom props so my app will work on IE11. So far no luck. What is strange is despite having configured a plugin when I build webpack outputs that no plugins have been configured for postcss, but I feel I have
I have a configuration like :
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
stage: 4,
custom-properties: false
},
],
],
},
},
},
],
},Any help would be appreciate.
3 replies
Hi everyone. I'm currently trying to migrate postcss-grid-kiss to Postcss 8 and Visitor API. So far so good, but I wonder how do I remove postcss as devDependency if I need it for tests ? In https://github.com/postcss/postcss-mixins/blob/master/test/index.test.js @ai still imports PostCSS for testing purposes of the plugin
7 replies
I notice that postcss is declared both as devDependency and peerDependency for this plugin. It doesn't look right