csstools/postcss-plugins

PostCSS Tools and Plugins

PostCSS Plugins

We are happy you're here!

This repository contains plugins, plugin-packs, utilities, CLI tools, ... to help you do more with CSS.

PostCSS Preset Env

Read more about PostCSS Preset Env or jump right in :

• Install postcss-preset-env from npm.
• Add postcss-preset-env to your configuration:

const postcssPresetEnv = require('postcss-preset-env');

const yourConfig = {
	plugins: [
		/* other plugins */
		/* remove autoprefixer if you had it here, it's part of postcss-preset-env */
		postcssPresetEnv({
			/* pluginOptions */
			features: {},
		})
	]
}

Overview

• packages
  • css tokenizers and parsers
  • common utilities
• PostCSS plugins
• PostCSS Preset Env
• Stylelint plugins
• cli's
• sites
• PostCSS recipes

Our current focus

Standard CSS transforms

We're trying to bring every reasonable CSS Spec into all the browsers.

First we keep track of new features through the CSSDB (see the repo). Then we do our best to create a PostCSS plugin that can convert that new syntax/function/rules so every browser can understand it.

While it's not always possible we're enabling over 50 features with these plugins!

Developer experience

We want it to be easier for you to be effective at writing CSS.
From time to time we will publish plugins that aren't related to a standard CSS spec but that we think will help developers.

Contributing

Thanks for being willing to contribute! Please read our contributing guide!

Acknowledgements

We could not do this work without the contributions of the community.
We appreciate all of you!

We want to thank:

• everyone who submits bug reports and feature requests
• everyone who contributes code
• everyone who contributes financially:
  • Open Collective
  • GitHub Sponsors
  • Thanks.dev
  • Stackaid

We also want to thank these organizations and people for making their tools available to Open Source maintainers:

• OrbStack
• GitHub Copilot

postcss-plugins's Issues

exportTo not running when used as plugin

I'm using the PostCSS CLI with a postcss.config.js and the exportTo option doesn't seem to be running at all. I get no error in the console. This is my config:

module.exports = (ctx) => ({
  map: ctx.options.map,
  plugins: [
    require('postcss-import')({
      path: ['src']
    }),
    require('postcss-custom-properties')(),
    require('postcss-responsive-type')(),
    require('postcss-selector-matches')(),
    require('postcss-custom-media')({
      exportTo: 'src/tokens/custom-media.js'
    }),
    require('postcss-color-function')(),
    require('postcss-object-fit-images')(),
    require('postcss-url')([
      { filter: '**/*.woff', url: 'inline' },
      { url: 'copy', useHash: true }
    ]),
    require('postcss-flexbugs-fixes')(),
    require('autoprefixer')({ browsers: [ 'last 2 versions', 'ie >= 10', 'Firefox ESR' ] }),
    require('postcss-clean')()
  ]
})

And the NPM Scripts command:

"build-css": "postcss src/components/app/index.css --no-map -c postcss.config.js -o static/build/css/site.min.css",```

Issue templates feedback

Maybe we need 2 flows for bugs?

1. general code bugs (something throws an exception)
2. for CSS where the output is unexpected.

1. Would ask for things like error logs, and place emphasis on reproduction

2. Would have extra fields :

• Actual Before
• Actual After
• Expected Before
• Expected After

We could also nudge reporters to open a PR with a small CSS snippet in the test suite of the affected plugin (e.g. a failing test).

---

I am wondering if we need to place Actual before Expected?
This is a more linear flow where reporters start with the bug description and behaviour.

---

Can you reproduce it with npx <plugin-name> minimal-example.css?

Maybe we need a text field so that reporters can provide a reproduction in this style?

---

Reproduction link
Please provide a link to a repo that can reproduce the problem you ran into or a minimum reproducible case for your issue. A reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem.

This states that it's optional, but I can't submit an issue without providing something.
Maybe best not to make it required?
Else we risk pushing people into entering "example.com" style bogus links.

The comment could maybe also be a bit more welcoming to persons who are just starting out :)
We don't want to take on the burden of teaching them everything, but we could explain better why a reproduction is so helpful.

Maybe something like this?

Reproduction link
Please provide a link to a repo that can reproduce the problem you ran into or a minimum reproducible case for your issue. These plugins are used in ways we can not always predict and showing us what you did helps us in tracking down any bugs.

Selector starting with numeral transpiles incorrectly

@custom-selector :--3xl .3xl;

:--3xl {
  font-size: 46px;
}

Expected result:

.3xl {
  font-size: 46px;
}

Actual result:

@custom-selector :--3xl .3xl;

class=css-var>:--3xl {
  font-size: 46px;
}

Codepen

Generate README files from templates

Docs are often out of date :

• incorrect imports
• incorrect urls
• incorrect examples

They also always follow the same patterns.

Could we generate these?

---

Examples could be pulled from test dir :

• example is known to be correct, otherwise CI would fail

/* test/example.css */
.foo {
  color: red;
}

/* test/example.expect.css */
.foo {
  color: blue;
}

---

Package name, urls, ...
This can be pulled from package.json and the directory of the package.

---

package.json can include extra fields with links to spec, caniuse, mdn, ...
This would also make it possible for others to extract this kind of meta data.

for example :

{
  "plugin_meta": {
    "mdn_url": "...",
    "spec_url": "...",
  }
}

---

CLI usage can be generated by running the CLI without any args.
This will cause it to output the help text on stderr.

---

What would then still need to be provided manually :

• why the plugin exists and what it does
• what the plugin options are

[PostCSS Environment Variables] lets you use env() variables in CSS, following the [CSS Environment Variables] specification.

Adding :is

Does :is plugin will be added to preset-env?

Extend docs for code contributors

With the mono repo we added some complexity and building and testing locally requires a few more steps.

These should be documented.

Final pass on dependency versions.

Small differences will definitely slip in during the migrations.
Doing a final pass with only this in mind will ensure we have consistency going forward.

Add `postcss-ic-unit`

https://github.com/JLHwung/postcss-ic-unit

Spec: https://www.w3.org/TR/css-values-4/#ic

Change default branch to `main`

unsure if we need to wait on something before we do this.

• set default branch to main
• do something with master branch?

calc doesn't work when defining @custom-media line.

$xs: 480px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1400px;

@custom-media --xs-min (min-width: $xs);
@custom-media --sm-min (min-width: $sm);
@custom-media --md-min (min-width: $md);
@custom-media --lg-min (min-width: $lg);
@custom-media --xl-min (min-width: $xl);

@custom-media --xs-max (max-width: calc($xs - 1));
@custom-media --sm-max (max-width: calc($sm - 1));
@custom-media --md-max (max-width: calc($md - 1));
@custom-media --lg-max (max-width: calc($lg - 1));
@custom-media --xl-max (max-width: calc($xl - 1));


@media (--xs-min) {
    body {
        background-color: red !important;
    }
}

@media (--xl-max) {
    body {
        background-color: blue !important;
    }
}

Here --xs-min property works but --xl-max doesn't. When I remove calc and just put $xl it works. This means calc doesn't work here.

My postcss.config.js:

"use strict";

module.exports = {
    plugins: {
        // Warning: despite appearances, order is significant
        "postcss-nested": {},
        "postcss-extend-rule": {},
        "postcss-simple-vars": {},
        "postcss-calc": {},
        "postcss-custom-media": {},
        autoprefixer: {},
    },
};

Create issue templates for common bug report types.

Cases :

• plugin should output X but has output Y
• plugin breaks my build

Templates should focus on helping people gather debug info :

• what version are you using?
• what is the input and unexpected output
• can you reproduce it with npx <plugin-name> minimal-example.css?
• can you create a github repo with a minimal reproduction?
• ...

Just forcing a fixed format is not helpful imho.
So should still be possible to open a blank issue.

Publish new major version release for css-has-pseudo

see : #21

Currently the browser script is broken.
To make it work correctly and for this plugin to fit in the mono repo we needed to change the import paths and CDN script url's.

This is a breaking change.

Add percentage support to `opacity`

.foo {
  opacity: 50%;
}

should be transformed into

.foo {
  opacity: 0.5;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

Publish new major version of css-prefers-color-scheme

see : #34

For this plugin to fit in the mono repo we needed to change the import paths and CDN script url's.

This is a breaking change.

Output the targets/plugins used

The debug option from babel preset env (https://babeljs.io/docs/en/babel-preset-env#debug) is particularly useful when using browsers and trying to understand which plugins are being used.

I assume it would list which of these are used https://github.com/csstools/postcss-preset-env/blob/master/src/lib/plugins-by-id.js

Push initial rework of all plugins

• remove unneeded files (config that was hoisted)
• update package.json
• ensure test and build works

waiting on : #7

TypeError: Cannot read property 'replace' of undefined

I use postcss-preset-env, and occasionally I will get this error, which never resolves itself and requires a full restart of webpack. It usually happens after saving a css file that contains a reference to a custom media query. my custom media query is defined in a variables.css file, which i pass in via postcss-preset-env

variables.css snippet:
@custom-media --small-viewport (max-width: 768px);

webpack.config.js snippet:

var postcssPresetEnv = require("postcss-preset-env")({
  stage: 1,
  preserve: false,
  importFrom: [
    "./src/frontend/css/variables.css",
    "./src/frontend/css/colors.css",
    "./src/frontend/css/colors-md.css"
  ]
});

snippet from css file that contains the error:

@media (--small-viewport) {
  /* .CustomTable .Label {
    display: none;
  } */

  .CustomTable-fixedheader {
    top: var(--navbar-height-small);
  }
  .CustomTable-fixedheader th {
    padding-top: 10px;
  }
  .CustomTable-fixedheader .CustomTable-config {
    top: var(--navbar-height-small);
    right: calc(var(--padding) + 1px);
  }
}

TypeError: Cannot read property 'replace' of undefined
at /app/src/frontend/components/CustomTable/styles.css:346:1
at transformMedia (/app/node_modules/postcss-preset-env/node_modules/postcss-custom-media/index.cjs.js:487:23)
at transformMedia (/app/node_modules/postcss-preset-env/node_modules/postcss-custom-media/index.cjs.js:525:38)
at transformMediaList (/app/node_modules/postcss-preset-env/node_modules/postcss-custom-media/index.cjs.js:468:31)
at root.walkAtRules.atrule (/app/node_modules/postcss-preset-env/node_modules/postcss-custom-media/index.cjs.js:569:29)
at /app/node_modules/postcss/lib/container.es6:268:18
at /app/node_modules/postcss/lib/container.es6:110:18
at Root.each (/app/node_modules/postcss/lib/container.es6:76:16)
at Root.walk (/app/node_modules/postcss/lib/container.es6:107:17)
at Root.walkAtRules (/app/node_modules/postcss/lib/container.es6:266:19)
at transformAtrules (/app/node_modules/postcss-preset-env/node_modules/postcss-custom-media/index.cjs.js:566:8)

Using custom media inside @each produces incorrect result

Hi guys, I would like to report an issue with postcss-custom-media that occurs in conjunction with postcss-each in PostCSS 8.0. It seems that @custom-medias that are used inside an @each loop are not properly translated and the CSS result includes the names of the @custom-medias rather than their content.

Processing

/* style.css */
@custom-media --mobile-only (max-width: 767px);
@custom-media --tablet-only (min-width: 768px) and (max-width: 959px);
@custom-media --desktop-only (min-width: 960px) and (max-width: 1151px);
@custom-media --widescreen-only (min-width: 1152px) and (max-width: 1343px);
@custom-media --ultra-widescreen-only (min-width: 1344px);

@each $item in widescreen, desktop, tablet, mobile {
    @media (--$(item)-only) {
        .hide-$(item) {
             display: none;
        }
    }
}

with only

/* postcss.config.js */
module.exports = () => ( {
    plugins: [
        require('postcss-each'),
        require('postcss-custom-media'),
    ],
} );

results in

/* output.css */
@media (--widescreen-only) {
    .hide-widescreen {
        display: none;
    }
}
@media (--desktop-only) {
    .hide-desktop {
        display: none;
    }
}
@media (--tablet-only) {
    .hide-tablet {
        display: none;
    }
}
@media (--mobile-only) {
    .hide-mobile {
        display: none;
    }
}

when using

/* package.json */
"devDependencies": {
    "postcss": "^8.2.8",
    "postcss-cli": "^8.3.1",
    "postcss-custom-media": "^8.0.0",
    "postcss-each": "^1.0.0"
}

---

With previous package versions and PostCSS 7, this is working nicely and returns

@media (min-width: 1152px) and (max-width: 1343px) {
    .hide-widescreen {
        display: none
    }
}
@media (min-width: 960px) and (max-width: 1151px) {
    .hide-desktop {
        display: none
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    .hide-tablet {
        display: none
    }
}
@media (max-width: 767px) {
    .hide-mobile {
        display: none
    }
}

Auto labeler

Directory structure is meaningful now and I think a github action to auto label pull requests will work great.

Does anyone have a good experience with an existing action?

see : https://github.com/csstools/postcss-plugins/tree/main

Add nvm/volta config in each directory.

Currently only configured for root.
Should be set in each plugin/package/...

`postcss-dir-pseudo-class` has poor support for complex selectors

Bug description

Complex selectors in postcss-dir-pseudo-class have unexpected output.

related : csstools/postcss-dir-pseudo-class#3

Source CSS

button > :dir(ltr) {
	order: 36;
}

Expected CSS

button > [dir="ltr"],
[dir="ltr"] button > :not([dir="rtl"]) {
	order: 36;
}

or

[dir="ltr"] button > * {
	order: 36;
}

Not a 100% sure that this expected CSS is fully correct.

Actual CSS

[dir="ltr"] button >  {
	order: 36;
}

Does it happen with npx <plugin-name> minimal-example.css?

Yes

Extra config

N/A

What plugin are you experiencing this issue on?

PostCSS Dir Pseudo Class

Plugin version

6.0.0

What OS are you experiencing this on?

macOS

Node Version

16

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

Add `postcss-normalize-display-values`

https://github.com/cssnano/cssnano/tree/master/packages/postcss-normalize-display-values

Normalize display property values with PostCSS.

Input

div {
    display: inline flow-root
}

Output

div {
    display: inline-block
}

Spec: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Publish new major version of css-blank-pseudo

see : #31

Currently the browser script is broken.
To make it work correctly and for this plugin to fit in the mono repo we needed to change the import paths and CDN script url's.

This is a breaking change.

Add `flexbox gap` support

flexbox gap is in Working Draft, https://www.w3.org/TR/css-align-3/#gaps.

Below is the polyfill:
https://github.com/limitlessloop/flex-gap-polyfill

@media rules containing whitespace not compiling

If the @media rule has any whitespace before or after the variable it will not compile, which is a regression of issue csstools/postcss-custom-media#2.

Media rules with whitespace last compiled correctly in version 6.0.0, with all versions since then (including the current 8.0.0) outputting:

@media( --lap-down) {
  /* Whitespace before - Doesn't compile */
}

@media(--lap-down ) {
  /* Whitespace after - Doesn't compile */
}

@media( --lap-down ) {
  /* Whitespace before and after - Doesn't compile */
}

@media(--lap-down) {
  /* No whitespace - Compiles correctly */
}

More info to main page

Main page looks really awesome. But it is not really informational.

What questions visitor will have:

1. What is this site about?
2. What is postcss-preset-env?
3. Why should I use it?
4. Is it small “indie” tool or everyone is using it.

If we will answer this questions on the main page, it will improve conversion.

Compound query produces invalid syntax

Getting an incorrect expansion when custom media queries are combined

@custom-media --screen only screen;
@custom-media --md-and-larger1 --screen and (width >= 570px);
@custom-media --md-and-larger2 (--screen) and (width >= 570px);
@custom-media --md-and-larger3 only screen and (width >= 570px);

@media (--md-and-larger1) {
  body {
    background-color: red;
  }
}
@media (--md-and-larger2) {
  body {
    background-color: yellow;
  }
}
@media (--md-and-larger3) {
  body {
    background-color: green;
  }
}

Actual Output vs Expected Output:

- @media only screen(min-width: 570px) {
+ @media only screen and (min-width: 570px) {
  body {
    background-color: red;
  }
}
- @media only screen(min-width: 570px) {
+ @media only screen and (min-width: 570px) {
  body {
    background-color: yellow;
  }
}
@media only screen and (min-width: 570px) {
  body {
    background-color: green;
  }
}

support for @apply and custom property sets

Hey,
we are using postcss-cssnext with several plugins and apply and custom property sets.

is there any way to migrate this fuctionality to postcss-preset-env without rewriting all code?

When I use the postcss-loader with the postcss-preset-env plugin, it fails to compile on the @apply rules.

`postcss-double-position-gradients` does not support `preserve: true` with CSS variables

Bug description

When assign a gradient value to a variable with preserve: true the actual value will be invalid.

Source CSS

:root {
	--some-var: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
}

Expected CSS

:root {
	--some-var: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
}

@supports (linear-gradient(90deg, black 25% 50%, blue 50% 75%)) {
	:root {
		--some-var: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
	}
}

Actual CSS

:root {
	--some-var: linear-gradient(90deg, black 25%, black 50%, blue 50%, blue 75%);
	--some-var: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
}

Does it happen with npx <plugin-name> minimal-example.css?

Yes

Extra config

preserve set to true

What plugin are you experiencing this issue on?

PostCSS Double Position Gradients

Plugin version

3.0.1

What OS are you experiencing this on?

macOS

Node Version

16

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

can make multiple custom-media work together?

I have multiple custom-media defined, some for height and some for widths,

@custom-media --md-up (min-width: 1024px);
...
@custom-media --h-md-up (min-height: 800px);

and each have individual use cases, and there are corner cases I want to apply

@media (--md-up) and (--h-md-up) {       // but this does not work
  ...
}

then I tried:

@media (--md-up) and (min-height: 800px) {       // this works
  ...
}

then I think this would probably work, but this would lead to too many combinations not very flexible;

@custom-media --wh-md-up (min-width: 1024px) and (min-height: 800px);

so, can make this work?

@media (--md-up) and (--h-md-up) {

Tracking circular dependency warnings

see : #3 (comment)

At the moment the mono repo setup is being sliced into individual chunks for review.
This makes it hard to trigger these issues.

Opening this issue so that we don't forget to track these down and maybe fix them upstream.

Streamline rollup config's

see : #3 (comment)

At the moment everything in the rollup config's is explicit to make it easier to tweak during the migration.

Once the migration is done it should be streamlined to minimise duplicate config.

Plugin consistency - directory structure

• source code contained in src dir
• entry point is src/index.js or src/index.ts
• build output goes to /dist

Even plugins that currently do not have a build step will also work this way.
Having this consistency simplifies the whole.

[PostCSS Nesting] Parsing error using + combinator

Hi, i have the following issue using the @nest at-rule.

Using the > combinator inside a @nest selector it works fine. This snippet works as expected:

.Hint {
  position: absolute;
  color: blue

  @nest .Field:invalid > & {
    color: red;
  }
}

/*
	RETURNS
	.Hint {
	  position: absolute
	}
	
	.Field:invalid > .Hint {
	    color: red;
	    font-weight: 2
	}
*/

But this returns a syntax error:

.Hint {
  position: absolute;
  color: blue

  @nest .Field:invalid + & {
    color: red;
  }
}

/*
	SHOULD RETURNS
	.Hint {
	  position: absolute
	}
	
	.Field:invalid + .Hint {
	    color: red;
	    font-weight: 2
	}
*/

Module build failed: ParserError: Syntax Error at line: 1, column 16 at Generator.next ()

Now i know i could write the selector in another way to make it work, but i think it's just a sort of parsing bug because both are valid combinators, and i want to keep consistency using one syntax (using @nest).

This issue is cloned from the original plugin repository:
csstools/postcss-nesting#67

Option to disable javascript required features

I want to disable all features which require javascript.
For now, I have to go through each plugin and check if it requires JS.
Then I have to specify each of them in the options.

It would be very helpful if:

• each feature which requires JS will have such note on the /features page
• there will be an option to disable all such features

Several other people wanting this:
csstools/postcss-preset-env#25 (comment)
csstools/postcss-preset-env#25 (comment)

CSS Cascade Layers (@layer) support

Would it be possible to add support for CSS Cascade Layers (@support)? This plugin would potentially handle ordering/scoping during compilation to provide the expected behavior of Cascade Layers in compiled CSS files if browsers indicated in browserslist do not yet support Cascade Layers.

I haven't given extensive thought to this idea, so if it just wouldn't work the way I described, then fair enough--feel free to close this.

Resources

• Bram.us article about Cascade Layers
• CSS Tricks article about Cascade Layers

Add postcss-font-format-keywords

Seems like postcss-font-format-keywords provides a syntax sugar from the CSSWG spec. Should we add it to polyfills pack?

cc @valtlai

Add 'flex-' prefix for 'start' & 'end' flex values

Spec: https://www.w3.org/TR/css-align/#positional-values

'start' & 'end' values were added to replace the 'flex-start' & 'flex-end' respectively. Unfortunately at this time, only Safari & Firefox support these values, so we have to add the flex- prefix to them. This plugin does not add these values even with stage 0.

CLI tests are tricky on Windows because of CRLF in base64 encoded inline sourcemaps

CLI tests are tricky on Windows.

Inline base64 encoded sourcemaps contain CRLF instead of LF.
Using git diff as a test fails because of this.

My intention behind a "simple" bash script was that we wouldn't have to write code.
Any code can be broken and broken test runners are the trickiest :)

If anyone has a good idea for this?

---

see : #17

Enable CI

Undo these changes in test.yml :
1607a25

feature request: unset

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

postcss-custom-media not work for me

(sorry by my poor english)

I´m using post-custom-media with css-modules and my custom-media not working.

I dont have a error but the break media not working

here is my code :

Header.js :

import { container } from './style.css'

const Header = ({ urlAccountImage = '' }) => {
  useEffect(() => {
    urlAccountImage !== '' && setLogo(urlAccountImage)
  }, [])

  const [logo, setLogo] = useState('')
  return (
    <header className={container}>
      <img src={logo} alt="logo"></img>
      <div>
        <button>llamame!</button>
        <button>phone</button>
        <button>whatsapp</button>
      </div>
      <div>
        <p>telefonos disponibles</p>
      </div>
    </header>
  )
}

style.css :

@custom-media --medium-viewport (min-width: 768px);

.container{
....
}

@media( --medium-viewport ){
  .container{
    ....
  }
}

and this my webpack.config.js :

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const postcssCustomMedia = require('postcss-custom-media')
const postcssPresetEnv = require('postcss-preset-env')

const development = 'development'


const jsRules = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-react',
        '@babel/preset-env']
   }
  }
}

const cssRules = function ({ mode }) {
 return {
 test: /\.css$/i,
 use: [
 {
loader: 'style-loader',
 options: {
          esModule: true,
          modules: {
            namedExport: true
          }
        }
      },
      {
        loader: 'css-loader',
        options: {
          esModule: true,
          modules: {
            namedExport: true,
            localIdentName: mode === development ? '[path][name]__[local]' : '[hash:base64]'
          }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              [postcssPresetEnv(),
                postcssCustomMedia()
              ]
            ]
          }
        }
      }
    ]
  }
}

const alias = {
  Pages: path.resolve(__dirname, 'src/pages/'),
  Components: path.resolve(__dirname, 'src/components/'),
  Services: path.resolve(__dirname, 'src/services/'),
  Hooks: path.resolve(__dirname, 'src/hooks/'),
  Constants: path.resolve(__dirname, 'src/constants/')
}

module.exports = function (env, argv) {
  return {
    devtool: argv.mode === development ? 'eval' : 'source-map',
    resolve: { alias },
    output: {
      filename: 'main.[contenthash].js',
      publicPath: '/'
    },
    module: {
      rules: [
        jsRules,
        cssRules(argv)
      ]
    },
    devServer: {
      historyApiFallback: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
    ]
  }
}

Not working with complex nesting (@nest)

When used in combination with postcss-nesting, custom selectors using @nest do not get properly transpiled.

@custom-selector :--parent
  @nest .parent &;

.child {
  :--parent {
    /* styles */
  }
}

Results in

.child {
  @nest .parent & {
    /* styles */
  }
}

Instead of the expected

.parent .child {
  /* styles */
}

[Feature] Add support for Container Queries (the next generation responsive technology)

Background

Container Queries (@container) is the new responsive design syntax. details can be found in https://www.youtube.com/watch?v=dhrX_biPH8c

polyfill: https://github.com/jsxtools/cqfill

Change

I think we can simply add cqfill into the package and use it directly.

Create a general README.md

Can't use a require() on js file for importFrom

I am trying to use the plugin providing custom breakpoints from a js file through importFrom (my project uses ts but I assumed from the docs and a couple of tries that this was not possible so I stuck to following the js file provided on the examples).

I need to get my breakpoint values from an external library, so I wrote a js file that brings in the object with the values, builds an object with the syntax postcss-custom-media requires following the example files and exports it accordingly. My code works as long as I hardcode the object and don't import it from somewhere else using require().

Webpack.config:

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: { loader: "babel-loader" }
},
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      query: {
        modules: true,
        sourceMap: false,
        importLoaders: 1
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          postcssCustomMedia({
            importFrom: ['./src/helpers/customMediaVariables.js']
          }),
          require('postcss-import')({ addDependencyTo: webpack }),
          require('postcss-url')(),
          require('postcss-preset-env')({
            /* use stage 2 features (defaults) */
            stage: 2
          }),
          require('postcss-reporter')(),
          require('postcss-browser-reporter')({
            disabled: isProduction
          })
        ]
      }
    }
  ]
},

Code that works:

//customMediaVariables.js

const externalLib = {
  mobile: 768,
  tablet: 1020,
  desktop: 1280
};

const test = {}

for (const breakpoint of Object.keys(externalLib)){
  let leftSide = '--viewport-';
  let rightSide = '(max-width:';

  leftSide = leftSide.concat(breakpoint);
  rightSide = rightSide.concat(externalLib[breakpoint] + 'px)');
  test[leftSide] = rightSide;
}

module.exports = {
  customMedia: test
};

Code that doesn't:

//customMediaVariables.js

const externalLib = require('external-library').responsiveBreakpoints;

const test = {}

for (const breakpoint of Object.keys(externalLib)){
  let leftSide = '--viewport-';
  let rightSide = '(max-width:';

  leftSide = leftSide.concat(breakpoint);
  rightSide = rightSide.concat(externalLib[breakpoint] + 'px)');
  test[leftSide] = rightSide;
}

module.exports = {
  customMedia: test
};

ERROR:
Module build failed (from ../node_modules/postcss-loader/src/index.js):
ReferenceError: window is not defined

I can, for now, keep the hardcoded object, but the whole point was to connect the two things in order to have one source of truth. Any help is greatly appreciated!

Invalid selector result

@custom-selector :--input input, ::slotted(input);

:--input:focus { ~ }

Expected:

input:focus, ::slotted(input:focus) { ~ }

Result:

input:focus, ::slotted(input):focus { ~ }

Add corner-shape property

Found this handy and useful property from css draft specification:
corner-shape

Is there any chance to add support for this property in future version of postcss-preset-env?

Add `postcss-clamp`

https://github.com/polemius/postcss-clamp

PostCSS plugin to transform clamp() to combination of min/max

exportTo doesn't transform/transpile values before exporting

Hello, this seems a problem to me. With exportTo you tipically want already transformed values, this works if you have postcss plugins before postcss-preset-env, but postcss-preset-env should export after all transformations or you end up with unusable code when importing from javascript.

For example this is the result of exportTo of postcss-preset-env:

module.exports = {
	customProperties: {
		'--white': '#fff',
		'--black': '#000',
		'--gray--200': '#eff4fd',
		'--gray--300': '#d6e1f6',
		'--gray--500': '#7a7e8e',
		'--gray--900': '#373944',
		'--primary': '#7567f8',
		'--primary--dark': 'color-mod(var(--primary) blackness(5%))',
		'--secondary': 'var(--gray--200)',
		'--secondary--dark': 'color-mod(var(--secondary) blackness(5%))',
		'--text': 'var(--gray--900)',
		'--text--dark': 'var(--black)',
		'--text--inverse': 'var(--white)',
		'--text--inverse--dark': 'var(--gray--200)',

You can see that color-mod isn't transpiled, not even the css custom properties that use other custom properties.

This is my config:

const path = require('path')
const fs = require('fs')

module.exports = {
  parser: 'postcss-scss',
  map: true,
  plugins: {
    'postcss-import': {},
    'postcss-mixins': {},
    'postcss-nesting': {},
    'postcss-simple-vars': {},
    'postcss-extend-rule': {},
    'postcss-object-fit-images': {},
    'postcss-preset-env': {
      stage: 0,
      exportTo: 'dist/test.js',
      features: {
        'color-mod-function': { unresolved: 'warn' }
      }
    },
    autoprefixer: {}
  }
}

Thank you