Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 02 17:15
    ai commented #1814
  • Feb 01 11:56
    karlhorky commented #1814
  • Feb 01 11:53
    karlhorky commented #1814
  • Feb 01 11:35
    karlhorky commented #1814
  • Jan 30 01:05
    andrewbranch commented #1814
  • Jan 29 20:31
    karlhorky commented #1814
  • Jan 29 20:08
    ai commented #1814
  • Jan 29 17:39
    karlhorky edited #1814
  • Jan 29 17:38
    karlhorky opened #1814
  • Jan 28 19:31
    GrimeyPickle commented #1773
  • Jan 21 08:06
    romainmenke commented #1349
  • Jan 20 09:42
    romainmenke closed #1812
  • Jan 20 09:42
    romainmenke commented #1145
  • Jan 20 08:57
    ai commented #1145
  • Jan 20 08:55
    ai commented #1145
  • Jan 20 07:10
    romainmenke commented #1145
  • Jan 19 17:47
    romainmenke synchronize #1812
  • Jan 19 07:05
    romainmenke commented #1812
  • Jan 19 00:08
    ai commented #1812
  • Jan 18 21:59
    romainmenke commented #1812
Ryan Zimmerman
@RyanZim
Advice from someone who's better informed about CSS @layer would be appreciated: https://github.com/postcss/postcss-import/pull/496#issuecomment-1214216740
1 reply
torres-developer
@torres-developer
Hello! I want to create a plugin for PostCSS and I need a dependency but it comes as an ES6 module. I'm using the postcss/postcss-plugin-boilerplate repo to help me starting the project. Is there a way to create a plugin using the ES6 modules?
4 replies
kanekekoa
@kanekekoa:matrix.org
[m]

TLDR: I'm trying to use postcss-scss to resolve a SyntaxError related to // backslash comments, but it doesn't seem to be working.

Here's my postcss.config.js

module.exports = {
  syntax: 'postcss-scss',
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

When I run yarn run tailwindcss -i ./app/assets/packs/styles/application.scss -o ./tailwind-output.css, I get the following error:

/Users/me/Workspace/project/node_modules/postcss/lib/input.js:148
      result = new CssSyntaxError(
               ^

CssSyntaxError: /Users/me/Workspace/project/app/assets/packs/styles/application.scss:8:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

The line it's referring to is a // comment.

2 replies
kanekekoa
@kanekekoa:matrix.org
[m]
Is there a way to check?
Well, it looks like tailwind doesn't look at it. I just added a bunch of non-sense code that would produce an error and it wasnt reported
kanekekoa
@kanekekoa:matrix.org
[m]
Got it. I had to specify the --postcss option on the command line and point directly to the config file
Ryan Zimmerman
@RyanZim
In case you haven't noticed, https://github.com/RyanZim/postcss-repl hasn't gotten much love for the past few years. Is there any one who would be interested in picking this up? I hardly have bandwidth to give it the time and attention it needs.
andry900
@andry900
Does anyone know how to solve this problem? italia/design-react-kit#862, I'm facing the same issue
snkj
@kolodziejczak-sz

hey, I'm trying to write a custom plugin to rename any class, but I can't see any changes when I'm looking at the result.css property. This is my code:

  const postcss = require('postcss');
  const selectorParser = require('postcss-selector-parser');

  const cssContent = readFileSync(cssFileName, 'utf-8');

  const transform = (selectors) => {
    selectors.walkClasses((node) => {
      node.value = `foo_${node.value}`
    })
  };
  const selectorProcessor = selectorParser(transform);
  const postCssPlugin = () => ({
    postcssPlugin: 'bar',
    Rule (rule) {
      selectorProcessor.processSync(rule);
    },
  });
  postCssPlugin.postcss = true;
  const result = postcss([postCssPlugin()]).process(cssContent, { from: undefined }).css;

Does anyone knows why my plugin does nothing?

3 replies
Ryan Zimmerman
@RyanZim
https://github.com/RyanZim/postcss-repl is archived, and the site has been taken down. If anyone wants to pick this project up, contact me, I'd be happy to transfer ownership
若如
@ruoru
where find the old version aip document?
Lucas Gonze
@lucasgonze
Ryan, thank you for making this available all this time. I appreciate what you did there.
andry900
@andry900

Does anyone know how to solve this problem? italia/design-react-kit#862, I'm facing the same issue

Anyone can help me? I'm still stuck here

Dejan Stosic
@dejan7
Can i somehow set a watch option with JS API https://github.com/postcss/postcss#js-api ? Or i'd have to build it manually with node fs functions? Thanks
1 reply
Galen Weber
@galenweber
Is it possible with PostCSS to prefix all classes?
3 replies
Jiří Thiemel
@thiemeljiri

Hi, for last 2 days I'm struggling with Storybook, trying to run the PostCss plugins the same way as I do in webpack. I've found very little comments about this.
This one seems to be close to what I need, but sadly, it doesn't work as well https://github.com/storybookjs/addon-postcss/issues/27#issuecomment-1015781423

Has any of you experienced similar problems?

package.json

...
"@storybook/addon-postcss": "^2.0.0",
"@storybook/builder-webpack5": "^6.5.13",
"@storybook/preset-scss": "^1.0.3",
...
"postcss": "^8.4.18",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.2",
...
"sass": "^1.32.5",
"sass-loader": "^13.1.0",
...
"webpack": "^5.17.0",
...

postcss.config.js

const postcssGenerateBreakpoints = require('./styles/global/config/breakpoints.postcss') // custom plugin
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  plugins: [
    postcssGenerateBreakpoints,
    postcssPresetEnv({
      autoprefixer: { grid: 'no-autoplace' },
      features: {
        'focus-within-pseudo-class': false
      }
    })
  ]
}

.storybook/main.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const postcssGenerateBreakpoints = require('../styles/global/config/breakpoints.postcss')
const postcssPresetEnv = require('postcss-preset-env')

module.exports = {
  "stories": ["../app/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../styles/**/*.stories.@(mdx)"],
  "addons": [
    "@storybook/preset-scss",
    // TODO - This doesn't work :( the plugins aren't loaded
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions: {
            plugins: [
              postcssGenerateBreakpoints,
              postcssPresetEnv({
                autoprefixer: { grid: 'no-autoplace' },
                features: {
                  'focus-within-pseudo-class': false
                }
              })
            ],
          },
        },
        cssLoaderOptions: { importLoaders: 2 },
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "webpack5"
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  }
};

Thank you! 🙏

2 replies
matrixwolf
@matrixwolf:matrix.org
[m]

Hey guys,

I've got a Meteor ReactJS project.
I'm running https://atmospherejs.com/juliancwirko/postcss

So inside my package.json I have

  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "postcss-easy-import": "^4.0.0",
    "postcss-load-config": "^4.0.1"
  },
  "postcss": {
        "plugins": {
          "postcss-easy-import": {},
          "postcss-meteor-root-url": {},
          "autoprefixer": {}
        }
  },

My page is at
example.com/foo/bar
and I need the image (in the compiled CSS) to say
.foo { background-image: url(../../images/icons/error.svg) !important; }

The most basic thing ever right? Go to the root URL then images.

But nomatter what I put in the .scss (any of these)
.foo { background-image: url(../../images/icons/error.svg) !important; }
.foo { background-image: url('../../images/icons/error.svg') !important; }
.foo { background-image: url("../../images/icons/error.svg") !important; }
.foo { background-image: url("/../../images/icons/error.svg") !important; }
.foo { background-image: url(/../../images/icons/error.svg) !important; }
.foo { background-image: url(../../../../../../../../../../images/icons/error.svg) !important; }
.foo { background-image: url("../../../../../../../../../../images/icons/error.svg") !important; }

It always gets compiled as
.foo { background-image: url("images/icons/error.svg") !important; }

And even in my plugin, if I do this

    Declaration: {
      'background-image': (decl, postcss) => decl.value = 'url(dog.svg)'
    }

That works, it comes out in the browser as
.foo { background-image: url("dog.svg") !important; }

But if I do this
decl.value = 'url(../images/icons/dog.svg)';

It comes out in the browser as
.foo { background-image: url("images/icons/dog.svg") !important; }

I've tried setting my plugin postcss-meteor-root-url as the last plugin in package.json

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {},
      "postcss-meteor-root-url": {}
    }
  },

===================================

Obviously if I can make it work without a plugin, with the fastest most efficient compilation possible that is preferable.

I'm more than happy to make my plugin correct the relative paths.

The problem I'm having is postcss destroys the relative path prefix ../ regardless of my plugins returned value, and it's making postcss completely unusable.

Any help will be much appreciated.

===================

PS.1:
By the way, can I somehow specify the path to my local (not public) plugin?
Do I need to specify how to find my plugin somehow inside package.json?
Currently I put my plugin at server/imports/postcss-meteor-root-url and them I symlinked to that dir from inside node_modules
(just temporarily while testing my plugin and postcss finds and runs my plugin fine)
Of course npm destroys my symlink any time NPM adds/removes etc any package, so the symlink from inside node_modules is obviously not a permanent solution.

========================

PS.2: I'd probably prefer to use my own plugin rather than using the complicated postcss-url plugin.
But in an attempt to get it working, I have tried installing postcss-url (without changing my .scss) and it didn't have any noticable effect whatsoever.
Maybe I'm doing it wrong.

I tried running postcss-url without any options, and I also tried putting these options inside the package.json postcss.plugins object, like this

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {},
    }
  },

========================

Anyway, any help will be much appreciated!!!

matrixwolf
@matrixwolf:matrix.org
[m]

Hmm, I found this page where people thought (totally unrelated) postcss-loader was changing the URL paths.
webpack-contrib/postcss-loader#500

And people were saying it's not that, it's some minifier.

So I did this

$ meteor remove standard-minifier-css
Changes to your project's package version selections:
minifier-css           removed from your project
standard-minifier-css  removed from your project
standard-minifier-css: removed dependency

And magically it's working now... but now the image has been inline'd into the CSS, which I don't want.
Haha, anyway, just sharing the update. I'm still investigating.

matrixwolf
@matrixwolf:matrix.org
[m]
Oops, I thought removing standard-minifier-css was solving something, but then postcss isn't running at all.
Because running postcss is one of the functions of standard-minifier-css So I've had to re-add standard-minifier-css so the problem is back.
https://docs.meteor.com/packages/standard-minifier-css.html
matrixwolf
@matrixwolf:matrix.org
[m]
I'm still stuck at step 1 if anyone can help please :)
matrixwolf
@matrixwolf:matrix.org
[m]
I successfully found a way to "hack it" I made my own plugin that looks for images/ and not // and then it replaces the /images with https://example.com/images/ and postcss or the minifier or whatever doesn't butcher that absolute URL.
But the nice thing is I'm not hard-coding the absolute URL into the scss. my plugin gets it and puts it in when the SCSS is compiled.
Ryan Zimmerman
@RyanZim
Whatever you're dealing with looks like a webpack problem, not a postcss problem.
Postcss doesn't change anything, unless you have a plugin that's changing something.
matrixwolf
@matrixwolf:matrix.org
[m]
@RyanZim: thanks bud. Ok
mirz
@mir3z

Hello, I need help with processing sass with post css. I'm using gulp and gulp-sass this way:

            postcss([require("postcss-modules"), require("postcss-nested")], {
                parser: require("postcss-scss"),
            })

but I'm still getting this error:

CssSyntaxError: typography.module.scss:3:1: Unexpected '/'. Escaping special characters with \ may help.

9 replies
Line 3 is indeed inline comment (// inline) but this is perfectly valid comment in sass files
Zak
@ZakisM

Hi, i'm trying to write a plugin that will run before postcss-nested. I want the plugin to find each rule and wrap it like below:

Before:

.item {
color: red;
}

After:

.item {
&& {
color: red;
}
}

I was able to get this working by modifying rule.nodes[0].raws.before and rule.nodes[0].parent.raws.after, however it doesn't seem to be working with postcss-nested. It inserts the CSS correctly, but postcss-nested doesn't translate it to:

.item.item.item {
color: red;
}

1 reply
devLeopar
@devLeopar
package.json

"autoprefixer": "^9.8.6",
"tailwindcss": "^1.6.2",
"postcss": "^7.0.32",
"postcss-params": "^1.0.2",
"postcss-safe-parser": "^4.0.2",
"postcss-selector-parser": "^6.0.2",

const postCssTailwind = require('tailwindcss');
const postCssAutoprefixer = require('autoprefixer');   

 const { css: tailwindCss } = await postCss([
        postCssTailwind(TAILWIND_CONFIG || undefined),
        postCssAutoprefixer,
    ]).process(PREPROCESSOR_INPUT, { from: 'tailwind.css' });

This code works with the versions above and even there isn't any tailwind.css file on the root folder. However, if I upgrade the files like below, the variable is assigned like tailwindCss = '\*'

New package.json

    "postcss": "^8.4.20",
    "postcss-params": "^1.0.2",
    "postcss-safe-parser": "^6.0.0",
    "postcss-selector-parser": "^6.0.11",
    "tailwindcss": "^3.2.4",
    "autoprefixer": "^10.4.13",

What should be the correct way to return the latest tailwindcss from that postcss call?

devLeopar
@devLeopar
I also tried to pass TAILWIND_CONFIG manually as a bare minumum;
    const TAILWIND_CONFIG = {
        content: [],
        theme: {
          extend: {},
        },
        plugins: [],
      }
devLeopar
@devLeopar
PREPROCESSOR_INPUT: '@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;'
Kirsten Cassidy
@mantismamita

Hello, does anyone know how how I can use postcss-custom-media with postcss-design-tokens ? We were using importFrom previously.

@tokens url('../../lib/assets/tokens/viewport.json') format('style-dictionary3');

@custom-media --xxs-min-viewport (min-width: token("viewport.px.xxs"));
@custom-media --xs-min-viewport (min-width: token("viewport.px.xs"));
@custom-media --small-min-viewport (min-width: token("viewport.px.small"));
@custom-media --medium-min-viewport (min-width: token("viewport.px.medium"));
@custom-media --large-min-viewport (min-width: token("viewport.px.large"));
@custom-media --xl-min-viewport (min-width: token("viewport.px.xl"));
@custom-media --xxl-min-viewport (min-width: token("viewport.px.xxl"));

Thanks for your help. If this is documented somewhere please let me know. I couldn't find anything

2 replies