Hi everyone! I can't use postcss-mixins plugin with create react app. Steps:
- Run
npm run ejectcommand - Install postcss plugin and add configuration to webpack config:
require('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>)
I wonder if there is a chance that someone can help me with the issue that I'm already struggling for two days
I'm working on the project that is using the https://github.com/gajus/react-css-modules
We're having the app, but also separate repo for the components with pretty much the same webpack config
Due to the development of new additional app that will also use those components we decided to migrate from react-css-modules to recommended https://github.com/gajus/babel-plugin-react-css-modules (same author)
At the moment we're using BEM style with SCSS (so I have those sassy imports like _filename.scss)
Seems like I migrated more or less successfully, but some styles are missing, so it's actually those that are imported inside the SCSS files
They use as example this snippet
"plugins": [
["postcss-import-sync2", {
"path": ["src/styles", "shared/styles"]
}],
"postcss-nested"
]I tried to, updated path and etc, but it could not find the imported files
I already tried several import plugins, but it didn't work. It's either failing on the Use process(css).then(cb) to work with async plugins or on Error: Failed to find
.babelrc[
"react-css-modules",
{
"handleMissingStyleName": "warn",
"generateScopedName": "[local]___[hash:base64:5]",
"filetypes": {
".scss": {
"syntax": "postcss-scss",
"plugins": [
["postcss-import-sync2", {
"path": ["lib/scss"],
}],
[
"postcss-nested",
{ "preserveEmpty": true }
]
]
}
}
}],
I have these rules but for some reason it's still removing the items I've listed in ignore
rules: [
{
test : /\.scss$/,
loader : 'postcss-loader',
options: {
ident : 'postcss',
plugins: () => [
require('postcss-short')(),
require('postcss-uncss')({
report:true,
html: ['src/**/*.html'],
ignore: ['.scrubBar', '.active', '.locked', '.completed', '.activity-topics-item.active']
}),
]
}
}
]
