Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 23 08:10
    ai closed #1534
  • Feb 23 08:10
    ai commented #1534
  • Feb 23 06:54
    Semigradsky commented #1534
  • Feb 23 02:30
    CarlVitasa opened #1534
  • Feb 22 18:46
    Somesa commented #1533
  • Feb 22 18:45
    ai commented #1533
  • Feb 22 18:44
    ai closed #1533
  • Feb 22 18:44
    ai commented #1533
  • Feb 22 18:42
    Somesa opened #1533
  • Feb 22 17:33
    ai closed #1532
  • Feb 22 17:33
    ai commented #1532
  • Feb 22 17:25
    dirad opened #1532
  • Feb 21 06:49
    ai closed #1531
  • Feb 21 06:49
    ai commented #1531
  • Feb 21 05:40
    sabelapaulo edited #1531
  • Feb 21 05:40
    sabelapaulo opened #1531
  • Feb 19 15:22
    www-chique commented #1455
  • Feb 18 14:56
    ai closed #1530
  • Feb 18 14:56
    ai commented #1530
  • Feb 18 14:51
    popov-tensor opened #1530
John Winston
@winston0410

I am trying to use postcss-mixins, but I got the following errors when I try to run postcss:

Undefined variable $class

> 1 | @define-mixin validation $class $color {
    | ^
  2 |   border: 2px solid $color
  3 | }

This is my css file:

@define-mixin validation $class $color {
  border: 2px solid $color
}

.invalid{
  @mixin validation invalid #be132d;
}

And this is my postcss.config.js

module.exports = {
  plugins: [
    require('postcss-mixins'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('tailwindcss')
  ]
}
7 replies
Iryna Zaletko
@IrochkaZ
image.png
How to fix mistake?
2 replies
amitkaplan14
@amitkaplan14
Hi, is it possible to pass custom params to config?
module.exports = (config) => {}
1 reply
Niklas Mischkulnig
@mischnic
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
philipimperato
@philipimperato
is postcss8 compatible with angular 11?
6 replies
Noahdo
@Noahdo
hello
1 reply
John Winston
@winston0410

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
      })
16 replies
Andrey Sitnik
@ai
@RyanZim can we accept this PR? postcss/postcss-cli#362
kyle henson
@kyle_hensoon_twitter
hi guys
is anyone here ?
22 replies
alexgagnon
@alexgagnon

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
LithinkHQ
@lithinkhq_gitlab
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?
Adi Sahar
@adi518
Hi, I'm writing a plugin. How do I hash the content of the processed the file? I want to hash it and prepend the hash as a comment to the beginning of the file.
Aravind Raj Mahadevan
@aravind_hashout_gitlab
Hi. I'm going through a tutorial on using postcss-mixins with postcss-calc. I'm getting the an error when using the mixin variable inside of calc like so: font-size: calc($size / 16) rem
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.
Andrey Sitnik
@ai
@aravind_hashout_gitlab what variables do you talk about? You do not have postcss-simple-vars and I do not see Sass in the gulpefile
postcss-css-variables do not support this syntax too
Aravind Raj Mahadevan
@aravind_hashout_gitlab
@ai Hi. I'm using postcss-css-variables, postcss-mixins, and postcss-calc.
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.
Adi Sahar
@adi518
2 replies
Mehmet Eyüpoğlu
@mehmeteyupoglu
How guys! I have a problem with postcss-nested plugin. When I try to run storybook, it throws me an error referring to that I should be using postcss 8, which I've already installed in my app.
9 replies
What could be the problem and the possible solution?
sachin M. nishad
@sachinMnishad_twitter
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css" whats wrong here?
James Garbutt
@43081j
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
James Garbutt
@43081j
maybe it would be just as painful having two build steps though tbh. as in, two pass.. passing it through rollup then passing the result through postcss (or vice versa). so maybe it does belong in a rollup plugin
Fehmi Özüseven
@fehmi
image.png
i can't get it to work. syntax highlighting is not working as expected please help
15 replies
Derek Owusu Bekoe
@derekowusubekoe
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
Israil Abdulaev
@nosferatu-id
how to include multiple files in postcss? i have mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
1 reply
夜空
@Desu_yo_ne_twitter
Hi everyone, I'm having problems with setting the parser to sugarss for postcss in nuxt.config.js. Has anyone have an experience in setting the parser property in nuxt? thanks
1 reply
Kerry Snyder
@krry
Just poppin in to say thanks! I've switched all of my web apps over from Sass to PostCSS in the past few weeks and I'm loving the versatility and the rich ecosystem of plugins and libraries.
1 reply
Kerry Snyder
@krry
What do you all use to adjust colors, by hue for example?
I'm seeing some recent insight about lab() being adjusted to our eyes, looking into it more now