Skip to content

CSS with extensions not correctly transforming #738

Closed
@romainmenke

Description

@romainmenke
    My 2:20-morning brain could not think to install `postcss-env-function` separately. Thank you.

I tried installing the beta alpha and postcss-env-function. I do not see the fix succeed.

Has my 3:20-morning brain done anything wrong?

Source & Config

package.json (abbreviated)

  "peerDependencies": {
    "commander": "^9.4.1",
    "cssnano": "^5.1.14",
    "js-yaml": "^4.1.0",
    "merge-lite": "^1.0.2",
    "node-cmd": "^5.0.0",
    "npm-watch": "^0.11.0",
    "postcss": "^8.4.18",
    "postcss-banner": "^4.0.1",
    "postcss-cli": "^10.0.0",
    "postcss-extend": "^1.0.5",
    "postcss-env-function": "4.0.6",
    "postcss-import": "^15.0.0",
    "postcss-preset-env": "^8.0.0-alpha.1",
    "postcss-replace": "^2.0.0"
  },
  "devDependencies": {
    "@frctl/fractal": "^1.5.13",
    "@frctl/mandelbrot": "^1.10.1"
  },

No dependencies. Long story. Temporary. Does it matter?

npm list

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-env-function
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└── [email protected]

➜  Core-Styles git:(dev--task/form-patterns--task/base-cms-portal-header) ✗ npm list postcss-custom-selectors           
@tacc/[email protected] /Users/wbomar/Code/Core-Styles
└─┬ [email protected]
  └── [email protected]

src/.postcssrc.yml

plugins:
  postcss-import:
    path:
      - src/lib
  postcss-extend: {}
  postcss-env-function:
    importFrom:
      - src/lib/_themes/default.json
  postcss-preset-env:
    stage: false
    features:
      custom-media-queries: true
      media-query-ranges: true
      custom-selectors: true
  cssnano:
    preset:
      - default
      - discardDuplicates:
          exclude: true
        mergeRules:
          exclude: true
  postcss-banner:
    banner: '@tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles'
    inline: true
    important: true
  postcss-replace:
    pattern: ../../fonts/
    data:
      replaceAll: fonts/

src/.../c-button.css

@custom-selector :--disabled :disabled,[disabled];

.c-button {
  display: inline-block;

  box-sizing: border-box;

  border-width: var(--global-border-width--normal);
  border-style: solid;
}

.c-button:not(:--disabled) {
  cursor: pointer; /* WARNING: Opinionated */
}

No @import

✓ The @custom-selector is parsed away.

dist/c-button.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */

.c-button {
	border-style: solid;
	border-width: var(--global-border-width--normal);
	box-sizing: border-box;
	display: inline-block
}

.c-button:not(:is(:disabled, [disabled])) {
	cursor: pointer
}

Use @import

ⓧ The @custom-selector remains, unparsed.

src/.../core-styles.base.css

/*! core-styles.base.css */
@import url("./components/c-button.css") layer(components);

dist/core-styles.base.css

/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */
/*! core-styles.base.css */

@layer components {
	@custom-selector : --disabled:disabled, [disabled];

	.c-button {
		border-style: solid;
		border-width: var(--global-border-width--normal);
		box-sizing: border-box;
		display: inline-block
	}

	.c-button:not(:--disabled) {
		cursor: pointer
	}
}

Originally posted by @wesleyboar in #481 (comment)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions