andyjansson / postcss-functions Goto Github PK

Related to postcss/postcss#1139
webpack cannot build this due to it is critical dependency that cannot be solved in build-time
options.glob:

functions[name] = require(file);

After removing these code webpack is working correctly.

Add example that uses arguments/parameters to readme.

functions({
    functions: {
        'string-repeat': function(str, numTimesRepeat) {
            return str.repeat(parseInt(numTimesRepeat, 10));
        }
    }
})

I'd really like to be able to call a functions as part of a selector, something like this:

li:nth-child(getNextChild()) {
  // etc
}

Is this feasable?

Hi!

I'm using PostCSS functions with Astro (thus using Vite underneath the hood).

What I discovered is that PostCSS functions doesn't seem to update the returned value when we change the postcss.config.js file.

module.exports = {
  plugins: [
    require('postcss-functions')({
      functions: {
        test: function () {
          return 'blue' // When I change this from blue to red, the values doesn't get hot reloaded. 
        },
      },
    }),
  ],
}

Is supporting this hot-reloading possible within postcss-functions? If not, can you point me in the right direction on how to set up something like this?

Thank you!

Please Update postcss/postcss to the newest version (8.2.15).
postcss/postcss#1567

Hi,

In the example on the Readme you state how to call the function foobar()

body {
    prop: foobar();
}

But how do you define foobar() in css? I'm looking for a replacement of sass @function

https://github.com/postcss/postcss/blob/master/docs/guidelines/plugin.md#3-errors
How i can use this metod to send warn / error?

I'm pretty sure Stylus would have a meltdown if it came across color: foobar();

Is there a workaround for working with preprocessors AND postcss-functions? Does it work with PostCSS parsers like https://github.com/postcss/postcss-scss by chance??

Apparently even though the repo is using Postcss 8, the npm package is not updated. What is needed to update the npm package? Can I help out in some way?

Unable to convert a string to int and return it.

var options = {
    functions: {
        parseInt: function (value) {
		return parseInt(value);
        }
    }
};

.selector {
	XXXX: parseInt("12");
}

returns NaN in my sheet?

This is the error it returns:

Loading PostCSS Plugin failed: Cannot find module './style/fn/xx.js'

My .postcssrc.js file

module.exports = {
	parser: 'sugarss',
	plugins: {
		// ...
		'postcss-functions': {
			glob: './style/fn/*.js'
		},
		// ...
	}
}

I have a xx.js in style/fn dir. However it didn't work like in the guide. The options.functions still works well.

I'm having a really kooky problem with this simple getcolor style function

const colorMap = {
  white: "rgb(255, 255, 255)",
  red: "rgb(255, 0, 0)",
  green: "rgb(0, 255, 0)",
  blue: "rgb(0, 0, 255)",
  base: "rgb(0, 0, 0)",
};

module.exports = function getcolor(id, opacity = 1) {
  const hue = colorMap[id] || colorMap.base;
  return hue
};

now I try and call this in my css like this:

.element {
    background-color: getcolor("red");
}

but the color is always black.
I put some logging into my webpack build, and while the id is logging out correctly (i.e. "red") - the lookup on the colorMap always returns undefined, and so it always falls back to colorMap.base

here's my webpack configuration

  module: {
    rules: [
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: true,
              localIdentName: "[path]-[name]-[local]___[hash:base64:5]"
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins() {
                return [
                  require("postcss-functions")({ functions: myCssFunctions })
                ];
              }
            }
          }
        ]
      },
    ]
  }
};

and here's the content of myCssFunctions:

const getcolor = require("./postcss-functions/get-color.js");
module.exports = { getcolor };

are there any obvious errors you can see?

Just installing this project doesn't pull the latest code with walkDecls. This produces a warning, so I've been installing on master instead. Just to clean up output, I'd like to recommend version bumping to 1.0.1 with a new git tag and npm publish.

When processing at-rules, postcss-functions expect the node to have a "params" entry but not all at-rules have params. So node.params can be undefined and cause an error when passed to postcss-value-parser.

The transformString() function should check if a proper string is supplied and fallback to an empty string or avoid parsing if not.

I never had any troubles with PostCSS and font-face rules before. I only notice this bug after a recent update. Apparently my occurrence of the bug is triggered by postcss-font-magician which inject its own at-rules with no params entry (which is not a bug).

It would be great if there was a way of getting access to the CSS property that the value (function) e.g:

.foo {
    color: darken(#fff, 10%);
}

Where darken would give you access to 'color' as a string.

The use case for this is that I wish to be able to pass some of the arguments of the function (including the property) to JavaScript

Or can you use functions as properties, selectors, etc. (pretty much anywhere)?

Hello.

I have such functions:

function headings(from = 1, to = 6) {
	[...Array(to + 1).keys()].slice(from).map(number => `h${number}`).join(', ')
}

And trying to use them in this way:

headings() {
	text-align: center;
}

But getting:

Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.32, but postcss-functions uses 6.0.23. Perhaps this is the source of the error below.
TypeError: func.apply is not a function

How to use with postcss.config.js? Tried several variations like this but no luck.

const path = require('path');

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-apply": {},
"postcss-preset-env": {},
"postcss-functions": { option: { functions: { glob: path.join(__dirname, '/assets/css/functions', '*.js')} } },
"postcss-mixins": {},
"postcss-nested": {},
"postcss-custom-media": {},
"postcss-media-minmax": {},
"postcss-discard-comments": {},
"postcss-clean": {}
},
"preset" : {
"autoprefixer": {
"grid": true
}
}
}

here i defined a variable in setting.css
use just like below

:root { 
	--baseGap: 10;
}

the code below can work well

width: rem(750);

but the code below can not work

width:rem(var(--baseGap))

the param is var(--baseGap)? how can solve it ,and change var(--baseGap) to real value ?

I have a color function:

const COLORS = {
 blue: "#12121",
 orange: "#121212"
};

export default = {
 'fnc-color': (key) => COLORS[key]
};

Strange thing happens that when calling:

color: fnc-color(blue)

it works, but it will return undefined when below

color: fnc-color('blue')

So is there any difference when postcss or postcss-functions interpret blue and "blue"?

function lost alpha value of initial color
#32

Please Upgrade PostCSS dependency to v6 :)
CHANGELOG: https://github.com/postcss/postcss/blob/master/CHANGELOG.md

Please Upgrade PostCSS dependency to v7 :)

Upgrade PostCSS dependency to v5 and use new API calls.