ai on 8.2.7
ai on main
Release 8.2.7 version (compare)
ai on main
Update dependencies (compare)
ai on main
Ignore path module for browser … Merge pull request #1536 from m… (compare)
ai on main
More space (compare)
ai on main
Try to put separated between lo… (compare)
ai on main
Use same size for logos (compare)
ai on main
Add new sponsor (compare)
ai on main
Add postcss-add-root-selector t… Merge pull request #1535 from i… (compare)
@next
to test a new major update. Since we do not use Babel anymore, you can use master
from GitHub in dependencies and everything will work
publish
step anymore, it is so great!
Hi! I have a question concerning testing components with Jest that depend on values obtained from a css file (via postcss-modules-values @value variables).
In my configuration I am using identity-obj-proxy for .modules.css files, as recommended, but it also transforms @value
declarations to plain name strings with no way of recovering the actual values.
The solution I found was to mock the .module.css
file into the component tests, but this way I have to mock it for all the parents of said component as well.
Does this sound "appropriate"? Is there another way of resolving jest warnings that may appear when using @value
properties in JS?
postcss-loader
to new major release (update deps, drop node@6 and etc), will be great also update postcss
too, any ETA for next postcss
release?
Hi everyone! I can't use postcss-mixins
plugin with create react app
. Steps:
npm run eject
commandrequire('postcss-mixins', {
mixins: {
clearfix: {
'&::after': {
content: '""',
display: 'table',
clear: 'both'
}
}
}
})
Use mixin in css:
.App {
@mixin clearfix;
text-align: center;
}
Have error:
./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Syntax error: Undefined mixin clearfix (2:3)
1 | .App {
> 2 | @mixin clearfix;
| ^
3 |
4 | text-align: center;
Did anyone have this problem?
Hi, I writing my a design token preprocessor and I’m looking at PostCSS for some inspiration on how to handle plugins in my project. I’ve always thought PostCSS has an interesting plugin architecture.
export default postcss.plugin("postcss-border-align", (opts) => {
console.log('opts', opts);
return root => {
};
});
@ai are you able to explain any on how you thought of this format and briefly how it works? I presume that postcss.plugin()
sets a plugin to the postcss api and what the plugin returns is in the callback function.
postcss.plugin
callback accept options from user (from PostCSS plugins config like { plugins: [require('postcss-border-align')({ node: 'always' })] }
) and return plugin function
Are there any occurances in a plugin where you might want to return something other than root? If so how do you detect that, when root
is user defined? In my tool users can create data structures, or a rendered template or both and I’m struggling to think what the plugin should look like. At the moment I’m leaning towards being two completely separate things.
For example
mole.plugin('plugin-name', (opts) => {
return (model, template) => {
model.user.name = 'Gavin'
template = 'My name is {{user.name}}'
}
})
Vs
mole.model('model-name', (model) => {
return model.user.name = 'Gavin'
})
mole.template('template-name', () => {
return 'My name is {{user.name}}'
})
<link>
)