Hello, I am trying to change my postcss.config.js to use module syntax instead of commonjs for use in sveltekit (which requires module syntax). I thought I would just rewrite my postcss.config.js like so
import * as postcssPresetEnv from 'postcss-preset-env';
import * as postcssImport from 'postcss-import';
import * as autoprefixer from 'autoprefixer';
import * as postcssCustomProperties from 'postcss-custom-properties';
import * as postcssNested from 'postcss-nested';
import * as postcssGlobalNested from 'postcss-global-nested';
import * as postcssMixins from 'postcss-mixins';
import * as postcssCustomMedia from 'postcss-custom-media';
import * as cssnano from 'cssnano';
export default {
plugins: [
postcssImport(),
postcssMixins,
autoprefixer,
postcssCustomMedia({
importFrom: [
'./src/assets/styles/__customMedia.css',
]
}),
postcssCustomProperties(),
postcssPresetEnv({
stage: 3,
features: {
'custom-media-queries': true,
'nesting-rules': true,
},
}),
postcssNested(),
postcssGlobalNested(),
cssnano({
preset: 'default',
}),
],
};but I keep getting a ReferenceError: require is not defined when building. Presumably its because the individual plugins use require in turn. Is there an easy way around this that I'm missing ?
8 replies
.foo {
height: 10px;
}
.bar {
width: 15px;
}
div.myclass > .combined {
@include .foo
@include .bar
}
4 replies
style: {
height: "60px",
backgroundColor: "blue",
padding: "10px",
}, the components are client side rendered and the inline styles are that way injected, can I use postcss to grad that style object of each component and build the css? Thanks
3 replies
I want to change the params of an @import rule. My code looks like this:
const rebasePlugin = () => {
return {
postcssPlugin: "postcss-rebase",
AtRule: {
import: (atRule) => {
if (!atRule[processed]) {
atRule.params = `"${resolvePath(parseQuoted(atRule.params))}"`;
atRule[processed] = true;
console.log(atRule);
}
},
},
};
};
rebasePlugin.postcss = true;If I read the console.log output the params is correctly changed, but only in the final output. How do I do this that the following plugins take up the new value?
2 replies
@tailwind components;
@tailwind utilities; this is what I have in my index.css file
Set or something but that feels a little gross so I'm curious if there's a cleaner approach. Feels like something that must have an established pattern within the wider tree-walking world?
2 replies
I'm trying to use Tailwind with NextJS with postcss-nesting. NextJS requires that the postcss.config.js file not use "require" and the only example in Tailwind's docs I can find about how to set up postcss-nesting looks like this:
module.exports = {
plugins: [
require('tailwindcss/nesting')(require('postcss-nesting')),
require('tailwindcss'),
],
};I don't know how to write the tailwindcss/nesting(postcss-nesting) line in a way that that doesn't use "require".
Can somebody please show me how?
1 reply
Hi guys, I'm trying to compile bootstrap with my scss and apply then postcss. But the postcss part isn't working:
let sass = require('sass');
let fs = require('fs');
let path = require('path');
let autoprefixer = require('autoprefixer');
let postcss = require('postcss');
let cssOut = path.join(__dirname + '/../../public/css') + '/all.css';
let cssOutMap = path.join(__dirname + '/../../public/css') + '/all.map';
console.log('cssOut', cssOut);
if (fs.existsSync(path.join(__dirname + '/../../public/css'))) {
console.log('Directory exists!');
} else {
console.log('Directory not found.');
}
console.log('after return statement');
let retObj = sass.renderSync(
{
file: path.join(__dirname + '/scss') + '/all.scss',
includePaths: [
path.join(__dirname + '/node_modules/bootstrap/scss/bootstrap')
],
sourceMap: true,
outputStyle: 'compressed',
outFile: cssOut
}
);
if (retObj instanceof Error) {
console.warn(retObj.formatted);
} else {
fs.writeFileSync(cssOut, retObj.css.toString());
fs.writeFileSync(cssOutMap, retObj.map.toString());
let postcssPromise = postcss([autoprefixer({grid: 'autoplace', flexbox: false, remove: false})])
.process(cssOut, {from: undefined});
postcssPromise.then(result => {
result.warnings().forEach(warn => {
console.warn(warn.toString())
});
// TODO: Write to disc:
console.log(result.css)
}).catch(error => {
console.warn(error);
});
}But if I run:
node sass.js --trace-warningsIt always gives me errors like this:
cssOut /var/www/html/public/css/all.css
Directory exists!
after return statement
CssSyntaxError: <css input>:1:1: Unknown word
at Input.error (/var/www/html/templates/assets/node_modules/postcss/lib/input.js:123:16)
at Parser.unknownWord (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:518:22)
at Parser.other (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:149:12)
at Parser.parse (/var/www/html/templates/assets/node_modules/postcss/lib/parser.js:59:16)
at parse (/var/www/html/templates/assets/node_modules/postcss/lib/parse.js:11:12)
at new LazyResult (/var/www/html/templates/assets/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/var/www/html/templates/assets/node_modules/postcss/lib/processor.js:36:12)
at Object.<anonymous> (/var/www/html/templates/assets/sass.js:36:102)
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10) {
reason: 'Unknown word',
source: '/var/www/html/public/css/all.css',
line: 1,
column: 1,
input: { line: 1, column: 1, source: '/var/www/html/public/css/all.css' }
}Any idea why? Or do you know how could I maybe do it better? I like that nodejs style instead of putting console commands inside package.json in order to be more cross platform compatible
Or may you tell me please what's the difference between my script and this postcss-cli call?
./node_modules/postcss-cli/bin/postcss --replace ../../public/css/all.css --use autoprefixer --mapBecause the above postcss command works with the same produced css file
14 replies
Since Vite uses JavaScript modules it's preferable that dependencies use JavaScript modules as well. While most modern JS packages provide this, some older packages may only provide CommonJS modules. I would prefer therefore to use another config format for plugins rater than renaming the file to cjs and adding technical debt to the project. Preventing this is postcss-cli which has a dependancy in cjs. Can anyone think of another way around this than to create an issue for postcss-cli ?
postcss-mixins to build some css definitions, but for all I can see in the resulting css file, the @mixin calls aren't being expanded
So
@define-mixin secmet $fg $bg $highlight {
background-color: $bg;
a, a:link, a:visited {
color: $fg;
}
rect& {
fill: $bg;
stroke: $highlight
}
}
.hybrid {
@mixin secmet midnightblue, lightsteelblue, midnightblue;
}
.pks {
@mixin secmet purple sandybrown purple;
}basically ends up in the output css file unchanged.
7 replies
/*# sourceMappingURL=client-design-system.css.map) in my source to avoid the generation of a sourcemap for the minified version...I understood that postcss-discard-comments doesn't handle the sourcemap comment but it's seems postcss hasn't no way to remove it too. I tried to pass
--map false to the cli but it doesn't work. Can someone help me to solve my problem?Thank you.
3 replies
Hi everyone. I'm trying to use postcss-import, postcss-mixins and tailwindcss together (and called in this order) with Laravel Mix, but unfortunately I am unable to use mixin variables with @apply, as Tailwind will still error out with a message like The text-$(color)-700 class does not exist [...], meaning that Tailwind does not see the processed version where mixins were already handled. I found this issue https://github.com/tailwindlabs/tailwindcss/issues/3931#issuecomment-861411300 at their tracker where a fix was suggested by creating a custom plugin combining postcss-import and postcss-mixins. I applied this fix in my project and Tailwind no longer receives any unprocessed mixins as an input, so this does work per se.
This however causes file watching to no longer properly work in imported files, resulting in changes only being applied when fully restarting Laravel Mix. Is there any better way of grouping plugins together and ensuring that Tailwind always sees the preprocessed output of postcss-mixins where variables have been resolved?
2 replies
Hello, PostCSS experts. I have a PostCSS 7 plugin that I planned on updating to leverage PostCSS 8. I'm unsure of the best path forward, so I'm hoping someone can answer the following questions:
1) Does PostCSS v8 support v7 plugins? I assumed the answer was "no" given that I've had other v7 plugins fail when upgrading PostCSS to v8, but I was surprised to see that my plugin worked without issue after the upgrade. I'd much rather leave my plugin as-is and support both v7 and v8 if possible.
2) Is it possible to author a PostCSS plugin as an ES module instead of a CommonJS module? For example, instead of using the recommended boilerplate:
module.exports = (opts = {}) => {
return {
postcssPlugin: 'PLUGIN_NAME',
// ...
}
}
module.exports.postcss = trueMy plugin currently imports other ES6 modules and is then transpiled to ES5 using rollup.js, so I'd like to leave it as an ES6 module. If possible, I'm assuming it would look something like this:
import a from 'path/to/a';
import b from 'path/to/b';
export default (opts = {}) => {
return {
postcssPlugin: 'PLUGIN_NAME',
// ...
}
}
// ISSUE: How do I handle the next line?
// module.exports.postcss = true3) If the answer is "no" to the above, I can continue to use rollup.js to transpile my ES module to a CommonJS module, but I am unsure of how to get the following line from the boilerplate added to the output of rollup.js:
module.exports.postcss = true;Thanks!
3 replies
Hello!
Using postcss with rollup & css modules. I am having trouble to pass a style as props. For example:
MyComponent.jsx:
import styles from './MyComponent.module.css'
function MyComponent({ className, ...props }) {
return <div className={cn(styles.root, className)} />
}App.jsx:
import MyComponent from './MyComponent';
import generalStyles from './general.module.css';
function App(props) {
return <MyComponent className={generalStyles['spacing-md']} />;
}The class passed to MyComponent (generalStyles['spacing-md']) is simply ignored by the build and doesn't appear in the output. Any idea how I can pass a style down to other custom components?
My postcss plugin in rollup looks likes this:
postcss({
extract: 'index.css',
modules: { root: '.' },
plugins: [postcssPresetEnv({
stage: 2,
importFrom: './src/styles/theme.css'
}), values]
}),
Hi there,
I've been following https://dev.to/43081j/using-tailwind-at-build-time-with-web-components-1bhm but I've been running into a problem:
TypeError: Cannot read property 'append' of undefined
at Document.append (C:\workspace\Tailwind\node_modules\postcss-syntax\document.js:16:13)
at C:\workspace\Tailwind\node_modules\tailwindcss\lib\lib\substituteTailwindAtRules.js:91:11
at LazyResult.runOnRoot (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:339:16)
at LazyResult.runAsync (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:391:26)
at LazyResult.async (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:221:30)
at LazyResult.then (C:\workspace\Tailwind\node_modules\postcss\lib\lazy-result.js:206:17)
Now, I'm not sure where exactly the problem is and where to look.
Has anyone run into a similar problem or can point me in the right direction?
Ok, I figured it out, the problem was that esbuild is minifying my code, renaming the lit's css-function.
However, the function name is used in postcss-css-in-js to determine if it should work its magic or not.
That check is done against a string ("css" in my case), which obviously fails.
For now I'll see if I can convince esbuild to not rename the css-function
postcss-cli v9.0.0 is released, with support for postcss dir-dependency messages.
This release also drops Node v10 support and changes the way --use works with local plugins. Get the full CHANGELOG here: https://github.com/postcss/postcss-cli/blob/master/CHANGELOG.md#900--2021-09-24
module.exports = {
plugins: [
require('postcss-nesting').default,
require('postcss-import'),
require(`tailwindcss`)(`./src/styles/tailwind.config.js`),
require(`stylelint`),
require(`autoprefixer`),
]
};