Replacing importFrom with postcss-global-data in webpack config (for custom properties) #879

gpspake · 2023-02-27T16:56:57Z

gpspake
Feb 27, 2023

I'm using the importFrom option with postcss-preset-env to make css custom properties available globally. importFrom is removed in the latest version and postcss-global-data seems to be the recommended alternative. I'm trying to update my configuration to use it but it's not working for me and I'm having a hard time finding docs and examples.

Currently, all of my custom properties in a javascript file like this:
variables.js

'use strict';

var colors = {
  '--blue': '#1cbfff',
  '--dark-green': '#00c174',
  // ...
};

var thematicColors = {
  '--status-positive-hc': colors['--dark-green'],
  // ...
};

var settings = {
  '--gutter': '20px',
  '--container-width': '1200px',
  // ...
};

exports.colors = colors;
exports.thematicColors = thematicColors;
exports.settings = settings;
exports.all = Object.assign({}, colors, thematicColors, settings);

And I import them in my config using importFrom like this:
webpack.config.babel.js

const _customProperties = require('./variables');

const customProperties = _customProperties.all;

module.exports = {
  entry: {...},
  output: {...},
  resolve: {...},
  plugins: plugins.concat([...]),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader', ... },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  postcssImport,
                  postcssPresetEnv({
                    importFrom: [
                      {
                        customProperties
                      }
                    ],
                    stage: 0,
                    preserve: false
                  }),
                  postcssNested
                ]
              }
            }
          }
        ]
      },
      ...
    ]
  },
  devtool: 'cheap-module-source-map'
};

That makes the custom properties available as fallbacks, basically so if any of them are used in our css, they get resolved correctly.

So how do I replace this set up with postcss-global-data? Here's what I've tried based on the postcss-global-data docs
First I moved the custom properties in to a css file:
css-custom-properties.css

:root {
  /* colors */
  --blue: #1cbfff;
  --dark-green: #00c174;

  /*var thematicColors = {*/
  --status-positive-hc: --dark-green;

  /*var settings = {*/
  --gutter: 20px;
}

Then I changed my config to pass that file to postcss-global-data

webpack.config.babel.js

const postcssGlobalData = require('@csstools/postcss-global-data');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          ...
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  postcssImport,
                  postcssPresetEnv({
                    // importFrom: [
                    // {
                    //   customProperties
                    // }
                    // ],
                    stage: 0,
                    preserve: false
                  }),
                  postcssNested,
                  postcssGlobalData({
                    files: ['./css-custom-properties.css']
                  })
                ]
              }
            }
          }
        ]
      },
      ...
    ]
  },
  ...
};

I've also tried changing the plugin order in case that's the problem...
webpack.config.babel.js

const postcssGlobalData = require('@csstools/postcss-global-data');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          ...
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  postcssGlobalData({
                    files: ['./css-custom-properties.css']
                  }),
                  postcssImport,
                  postcssPresetEnv({
                    stage: 0,
                    preserve: false
                  }),
                  postcssNested
                ]

Note: In case the path could be a factor, the css file is in the same directory as the webpack config. The file structure looks like this

/
|__webpack.config.babel.js
|__css-custom-properties.css

Note: My IDE is showing this error which might be a clue. Maybe I'm misusing the plugin.

Other plugins aren't showing this error:

romainmenke · 2023-02-27T17:25:43Z

romainmenke
Feb 27, 2023
Maintainer

Hi @gpspake, thank you for starting this discussion!

Can you take a look at this example :
#880

When I run npm run build I see :

The plugins seem to work well in a Webpack context :

CSS :

.a {
	color: var(--color);
}

props :

:root {
	--color: pink;
}

Webpack config :

const path = require('path');
const postcssGlobalData = require('@csstools/postcss-global-data');

module.exports = {
	mode: 'production',
	entry: './index.js',
	target: 'node',
	optimization: {
		minimize: false,
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.cjs',
	},
	module: {
		rules: [
			// We document how to use our plugins together with Webpack.
			// This test validates this documentation.
			{
				test: /\.css$/i,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						options: { importLoaders: 1 },
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [
									postcssGlobalData({
										files: ['./props.css'],
									}),
									[
										'postcss-preset-env',
										{
											stage: 0,
											preserve: false,
										},
									],
								],
							},
						},
					},
				],
			},
		],
	},
};

Is there a difference with your setup that I am overlooking?

0 replies

gpspake · 2023-02-27T20:25:49Z

gpspake
Feb 27, 2023
Author

Thanks for the quick response @romainmenke 🙂
That looks to be the same as what I have but I'm not seeing what you posted in that screenshot in my bundle 😕.

The css variables and the other css files they're used in are actually (mostly) in another library I'm importing which adds a layer of confusion. I'll try to dig in to my configuration some more and compare some things.

3 replies

romainmenke Feb 28, 2023
Maintainer

Forgot to ask, but are you seeing any error messages?

I would expect postcss-global-data to throw an exception when it has a file path but is unable to locate the file.

Maybe also good to test this with a bogus path to make sure that errors are reported to you.

gpspake Feb 28, 2023
Author

Good call. Changing the path to a non-existent file (abc.css) throws an error (Well a bunch of errors) like:

ERROR in ./src/views/reports/reports.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open '/Users/.../client/abc.css'

So that confirms that the plugin is installed properly, working and finding the file, I think.

Here's a sample of what css-custom-properties looks like:

:root {
  /* colors */
  --dark-blue: #0077c3;
  --dark-green: #00c174;

  /* thematicColors */
  --status-positive-hc: var(--dark-green);
  --anchor-color: var(--dark-blue);

  /* typography */
  --sans: "HCo Gotham SSm; sans-serif";
  --gauge: "Gauge; HCo Gotham SSm; sans-serif";
  --mono: "Source Code Pro; monospace";
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-light: 100;
}

Based on our config, webpack just outputs a single css file. If I run yarn build with the original importFrom config, I can see that all of the custom properties have been replaced with their values:

.modal__overlay__uqT4u.modal__dark__VMuUe {
    background-color: color(#000000 alpha(90%));
  }

If I switch to the postcss-global-data config, it just shows the var() statements

.modal__overlay__uqT4u.modal__dark__VMuUe {
    background-color: color(var(--black) alpha(90%));
  }

romainmenke Feb 28, 2023
Maintainer

Are you importing css-custom-properties somewhere in the regular way?

@import 'css-custom-properties.css';

or

import 'css-custom-properties.css';

From the readme

Please note that PostCSS Global Data does not add anything to the output of your CSS. It only injects data into PostCSS so that other plugins can actually use it.

So either you need to configure postcss-preset-env to replace all var()'s or you need to also import css-custom-properties so that it becomes part of your bundle.

postcss-global-data does not aim to replace @import or import.

What is your browserslist?

Or alternatively, what is the output of running postcss-preset-env with the debug flag?

But will give us an indication of which plugins are active.

gpspake · 2023-02-28T20:24:29Z

gpspake
Feb 28, 2023
Author

So either you need to configure postcss-preset-env to replace all var()'s or you need to also import css-custom-properties so that it becomes part of your bundle.
Hmm... one of these might be it...

We have this legacy component/style library we use internally. Classic: It was written a while ago and we're migrating away from it but we need to support it a little longer. I think I'm starting to see that it's just organized a little unusually which might be why this is weird. The library is installed as an npm package but it doesn't have any build so the dist is just the whole source and the consuming app is responsible for building.

It's a react component lib so, for example:

Button.jsx imports a local css file:

import buttonStyles from './button.local.css';

In button.local.css, we reference some of those custom properties:

.base {
  transition: var(--button-hover-transition);
}

there are no explicit imports where the variables come from, instead, the library exports a variables js object which I mentioned in the first example...

So:

the parent app imports a react component from the ui library
the component imports a css file (also in the library) using a relative path
currently the javascript object is imported and used in the webpack config and passed to the importFrom option in the postcss-preset-env plugin config which makes the variables available as custom properties when webpack the component.

I guess the original idea was that the variables could be reused but I think if it were just a css file (instead of a js object) and the file was imported in the local component css files, that might be the right way to fix this and everything might just work...
That would kind of be the:

import css-custom-properties so that it becomes part of your bundle
approach but at the source in the ui library...

Assuming we want to skip that, though, avoid having to touch the external lib, and:

configure postcss-preset-env to replace all var()'s
would that mean there's a way to kind of mimic the importFrom functionality of making those variables available to all var() usages for the time being?

4 replies

romainmenke Feb 28, 2023
Maintainer

would that mean there's a way to kind of mimic the importFrom functionality of making those variables available to all var() usages for the time being?

That is what postcss-global-data is supposed to do together with postcss-preset-env (or postcss-custom-properties which is part of postcss-preset-env).

So I am first trying to figure out why it isn't doing that in your case.

Many things can go wrong :

postcss-global-data is not working
postcss-custom-properties is not running
your stack/framework is different from what we are expecting.

We already established that postcss-global-data can throw errors, so it is at least being executed.

So next step would be to verify that postcss-custom-properties is running.

Two ways to check that :

add :root { --color: green } .foo { color: var(--color); } somewhere in your main styles. Is it being replaced?
run postcss-preset-env with the debug flag

                  postcssPresetEnv({
                    // importFrom: [
                    // {
                    //   customProperties
                    // }
                    // ],
                    stage: 0,
                    preserve: false,
                    debug: true
                  }),

gpspake Feb 28, 2023
Author

Ok, I confirmed postcss-custom-properties is working by testing it out in an existing css file in the parent app. I'm going to play around with debug: true and I'll let you know what I see.

gpspake Feb 28, 2023
Author

Here's a sample of what I get when I enable debug for postcss-preset-env:

...
asset app.css 527 KiB [emitted] (name: app) 1 related asset
...
WARNING in ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css (./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

postcss-preset-env:   all-property
 @ ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css
 @ ./src/main.jsx 17:0-53

WARNING in ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css (./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

postcss-preset-env:   any-link-pseudo-class
 @ ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css
 @ ./src/main.jsx 17:0-53

WARNING in ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css (./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

postcss-preset-env:   blank-pseudo-class
 @ ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css
 @ ./src/main.jsx 17:0-53

WARNING in ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css (./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

postcss-preset-env:   break-properties
 @ ./node_modules/@abc/shared-ui-library/lib/styles/fonts.local.css
 @ ./src/main.jsx 17:0-53
...

romainmenke Feb 28, 2023
Maintainer

Here's a sample of what I get when I enable debug for postcss-preset-env:

Does it contain postcss-custom-properties?

that is truly unreadable when coming from Webpack, I think we can improve that

Ok, I confirmed postcss-custom-properties is working by testing it out in an existing css file in the parent app.

🤔 In that case I think you might need to try and setup a minimal repro.

All the plugins are working, our example as an e2e test is working but there is some detail that is different. Something I can not guess :)

Also important to note that you do not need to update postcss-custom-properties.
You can just keep using the old version.

gpspake · 2023-03-01T19:10:35Z

gpspake
Mar 1, 2023
Author

Ok, @romainmenke - first of all, thanks so much for all the help!
We've figured it out. 🎉 It was just an obvious typo. Someone else on my team got this working and everything looked exactly the same so I diffed our changes.
The problem that stuck out was actually in the CSS:

  /* typography */
  --sans: "HCo Gotham SSm; sans-serif";
  --gauge: "Gauge; HCo Gotham SSm; sans-serif"

Which should be...

  --sans: 'HCo Gotham SSm', sans-serif;
  --gauge: Gauge, 'HCo Gotham SSm', sans-serif;

When I migrated the js variables over to CSS, I replaced the commas with semicolons and didn't realize the font strings were affected too. As we've been working on this, the fonts in the UI have been our immediate indicator that our config wasn't working so it's likely this has been working the whole time 🤦

So there it is... still a good discussion, I think 🙂

1 reply

romainmenke Mar 2, 2023
Maintainer

Hehe, good that the issue has been found 🎉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replacing importFrom with postcss-global-data in webpack config (for custom properties) #879

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 8 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Replacing importFrom with postcss-global-data in webpack config (for custom properties) #879

gpspake Feb 27, 2023

Replies: 4 comments · 8 replies

romainmenke Feb 27, 2023 Maintainer

gpspake Feb 27, 2023 Author

romainmenke Feb 28, 2023 Maintainer

gpspake Feb 28, 2023 Author

romainmenke Feb 28, 2023 Maintainer

gpspake Feb 28, 2023 Author

romainmenke Feb 28, 2023 Maintainer

gpspake Feb 28, 2023 Author

gpspake Feb 28, 2023 Author

romainmenke Feb 28, 2023 Maintainer

gpspake Mar 1, 2023 Author

romainmenke Mar 2, 2023 Maintainer

gpspake
Feb 27, 2023

Replies: 4 comments 8 replies

romainmenke
Feb 27, 2023
Maintainer

gpspake
Feb 27, 2023
Author

romainmenke Feb 28, 2023
Maintainer

gpspake Feb 28, 2023
Author

romainmenke Feb 28, 2023
Maintainer

gpspake
Feb 28, 2023
Author

romainmenke Feb 28, 2023
Maintainer

gpspake Feb 28, 2023
Author

gpspake Feb 28, 2023
Author

romainmenke Feb 28, 2023
Maintainer

gpspake
Mar 1, 2023
Author

romainmenke Mar 2, 2023
Maintainer