Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

exportTo doesn't transform/transpile values before exporting #120

Closed
minimit opened this issue Oct 7, 2019 · 3 comments
Closed

exportTo doesn't transform/transpile values before exporting #120

minimit opened this issue Oct 7, 2019 · 3 comments
Labels

Comments

@minimit
Copy link

minimit commented Oct 7, 2019

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

@romainmenke romainmenke transferred this issue from csstools/postcss-preset-env Jan 2, 2022
@github-actions github-actions bot added the javascript Pull requests that update Javascript code label Jan 2, 2022
@romainmenke romainmenke removed the javascript Pull requests that update Javascript code label Jan 2, 2022
@romainmenke
Copy link
Member

Caused by incorrect execution order between different plugins.

To resolve :

  • update all plugins so they do not use Once.
  • collect exports only in OnceExit.

We do need to pinpoint first if the current behaviour is not a feature to some users.

@romainmenke romainmenke added the wontfix This will not be worked on label Jan 22, 2022
@romainmenke
Copy link
Member

see : #151

These features will be removed in the future.
We will likely find or create a replacement that is not included in postcss-preset-env

We will not implement extra features for now.

@romainmenke
Copy link
Member

The replacement for this feature is postcss-extract

This plugin allows you to specify if you want to extract values early (before transforms) or late (after transforms).

If you have any issues using that plugin, please let us know in a new issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants