Is there some "offical" way of getting the AST (the object returned by
postcss.parse) into a serializeable format and also back again? For example input.fromOffset sets a function on an object and causes v8.serialize to fail. (For comparison, the Babel AST is just a plain JSON object without prototypes/functions.)
3 replies
Hi, how can I return the value of a @font-face atRule out from the callback? I do not want to transform the CSS, I just need to get that value for my other application.
This is my current attempt:
const root = postcss.parse(styling,
{
from: styleSheets[0],
to: null
}).walkAtRules(/font-face/, rule => {
console.log(rule)
return rule
})
is anyone here ?
22 replies
Hi. Let's say I'm trying to do something like the following (the source doesn't have to be JS, I'm just using it as an example).
{
h1: {
font-family: monospace,
font-size: '20px'
},
h2: {
font-family: 'OpenSans',
font-size: '14px'
}
}.<some-class> {
font-family: <some-font>;
font-size: <some-size>;
}A basic example, but I'd like post-processing to have the blocks
.h1 {
font-family: monospace;
font-size: 20px;
}
.h2 {
...
}Is this something postcss can/should handle? I found postcss-each and postcss-for plugins, but they don't seem maintned. Or is this better suited to first passing it through something like sass, and then postcss?
1 reply
I'm trying to use utopia generated fluid typography css snippet but when processing my styles with
postcss it complains about ParseError. The offending css uses custom properties and clamp, like so:
4 replies
/* @link https://utopia.fyi/generator-mk-ii?c=320,21,1.333,1140,24,1.333,6,2, */
:root {
--step--2: clamp(0.7388rem, 0.6975rem + 0.2061vw, 0.8444rem);
--step--1: clamp(0.9844rem, 0.9295rem + 0.2744vw, 1.125rem);
--step-0: clamp(1.3125rem, 1.2393rem + 0.3659vw, 1.5rem);
--step-1: clamp(1.7494rem, 1.6518rem + 0.4878vw, 1.9994rem);
--step-2: clamp(2.3319rem, 2.2016rem + 0.6512vw, 2.6656rem);
--step-3: clamp(3.1088rem, 2.9353rem + 0.8671vw, 3.5531rem);
--step-4: clamp(4.1438rem, 3.9125rem + 1.1561vw, 4.7363rem);
--step-5: clamp(5.5238rem, 5.2157rem + 1.5402vw, 6.3131rem);
--step-6: clamp(7.3631rem, 6.9524rem + 2.0537vw, 8.4156rem);
}
Here's my
postcss.config.js:const { isProd } = require("./src/utils");
const config = {
plugins: [
require("postcss-import")({ path: "src/assets/css/" }),
require("postcss-preset-env")({
stage: 1,
features: {
"nesting-rules": true,
},
}),
],
};
if (isProd) {
config.plugins.push(
require("autoprefixer"),
require("cssnano")({
preset: ["default", { calc: false }],
})
);
}
module.exports = config;
Any idea what am I missing?
The error is:
Lexical error on line 1: Unrecognized text.
Erroneous area:
1: $size/16
My gulp file:
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const sourcemaps = require("gulp-sourcemaps");
const rename = require("gulp-rename");
const cssnano = require("cssnano");
const stylelint = require("stylelint");
const reporter = require("postcss-reporter");
const cssVariables = require("postcss-css-variables");
const cssMixins = require("postcss-mixins");
const calc = require("postcss-calc");
gulp.task("autoprefixer", () =>
gulp
.src("src/*.css")
.pipe(postcss([autoprefixer, cssnano, cssVariables(), cssMixins(), calc()]))
.pipe(gulp.dest("dest/"))
);
gulp.task("rename", () =>
gulp
.src("dest/*.css")
.pipe(rename("style.min.css"))
.pipe(sourcemaps.init())
.pipe(sourcemaps.write("maps/"))
.pipe(gulp.dest("dest/"))
);
gulp.task("lint-styles", () =>
gulp.src("src/*.css").pipe(
postcss([
stylelint({
rules: {
"color-no-invalid-hex": true,
"declaration-colon-space-before": "never",
indentation: 2,
"number-leading-zero": "always",
},
}),
reporter({ clearMessages: true }),
])
)
);
gulp.task("default", gulp.series("lint-styles", "autoprefixer", "rename"));
gulp.watch("src/*.css", gulp.series("default")).on("change", (file) => {
console.log(`File ${file} was changed, running tasks...`);
});
My dev dependencies:
"devDependencies": {
"autoprefixer": "^10.1.0",
"cssnano": "^4.1.10",
"gulp": "^4.0.2",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^3.0.0",
"postcss": "^8.2.1",
"postcss-calc": "^7.0.5",
"postcss-css-variables": "^0.17.0",
"postcss-each": "^0.10.0",
"postcss-mixins": "^7.0.2",
"postcss-nested": "^5.0.3",
"postcss-reporter": "^7.0.2",
"stylelint": "^13.8.0"
}
If someone can help, I'd be grateful. I've been at this since morning.
The fix I could find was to wrap the variable inside
#{}. Like #{$size}.
But that doesn't work either.
postcss-css-variables do not support this syntax too
I'm trying to use
calc in a mixin.
Like so:
@define-mixin fontstyle $size, $color {
font-size: $(size) px;
font-size: calc($size/16) rem;
color: $color;
}
I'm not able to use
$size inside calc().
I searched on Stackoverflow and Github extensively.
Everyone suggests to wrap the variable inside
#{}.
11 replies
Like so:
#{$size}.
But that doesn't work.
For context, I'm trying to follow the tutorial in the book "Mastering Postcss for web design" By Alex Libby.
Second chapter.
Do you have to return root? https://gist.github.com/adi518/c6fc67e6d5b29c792da8ff50034df1e3
2 replies
What could be the problem and the possible solution?
hello :wave: i've been investigating solutions recently for processing css templates with postcss. don't suppose anyone's active around here that can point me in the right direction? i'd like to extract CSS from tagged template expressions in JS files, pass it through postcss, then replace the original. is this a job for postcss, or would you rather pass responsibility to another build tool? (e.g. babel, rollup, etc) i know its doable in rollup via a plugin (yet to exist) but was hoping there'd be a solution everyone can use, not tied into a specific bundler
9 replies
i can't get it to work. syntax highlighting is not working as expected please help
15 replies
Hello, I am learning how to code for some time now. I am happy to join a community of coders who are willing to support each other in their coding journey. CSS has been a problem and I hope to get some concepts and ideas from the group. Happy New Year to everyone.
2 replies
I'm seeing some recent insight about lab() being adjusted to our eyes, looking into it more now
