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

Class constructor <FooBar> cannot be invoked without 'new' #276

Closed
evdama opened this issue Jan 21, 2020 · 2 comments
Closed

Class constructor <FooBar> cannot be invoked without 'new' #276

evdama opened this issue Jan 21, 2020 · 2 comments

Comments

@evdama
Copy link

evdama commented Jan 21, 2020

After upgrading from 2.0.4 to 2.0.5 I'm getting this error on the dev console when I run my rollup config in my Svelte project:

> Class constructor SvelteExtractor cannot be invoked without 'new'
TypeError: Class constructor SvelteExtractor cannot be invoked without 'new'
    at extractSelectors (/Users/sa/0/edm/node_modules/purgecss/lib/purgecss.js:1:2358)
    at PurgeCSS.extractSelectorsFromFiles (/Users/sa/0/edm/node_modules/purgecss/lib/purgecss.js:1:5802)
    at async /Users/sa/0/edm/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:501

In my rollup config I got SvelteExtractor which worked fine until today's upgrade
https://gist.github.com/evdama/253e7a78b0c3a2e6ec875963e6bdd339#file-rollup-config-js-L37

class SvelteExtractor {
  static extract(content) {
    const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g)
    const matchedTokens = []
    let match = regExp.exec(content)

    while (match) {
      if (match[0].startsWith('class:')) {
        matchedTokens.push(match[0].substring(6))
      } else {
        matchedTokens.push(match[0])
      }
      match = regExp.exec(content)
    }
    return matchedTokens
  }
}

SvelteExtractor is used in line 74
https://gist.github.com/evdama/253e7a78b0c3a2e6ec875963e6bdd339#file-rollup-config-js-L74

const postcssPlugins = (purgecss = false) =>
  [
    require('postcss-import')(),
    require('postcss-url')(),
    require('tailwindcss')({ config: 'tailwind.config.js' }),
    require('autoprefixer')({
      overrideBrowserslist: 'last 1 version',
    }),
    // Do not purge the CSS in dev mode to be able to play with classes in the browser dev-tools.
    purgecss &&
      require('@fullhuman/postcss-purgecss')({
        content: [
          './src/**/*.html',
          './src/**/*.svelte',
          './src/**/*.css',
          './static/**/*.css',
        ],
        extractors: [
          {
            extractor: SvelteExtractor,      // <-- I suppose this is where the error occurs?

            // Specify the file extensions to include when scanning for
            // class names.
            extensions: ['svelte', 'css', 'html'],
          },
        ],
        fontFace: true,
        // Whitelist selectors to stop Purgecss from removing them from your CSS.
        whitelist: [ 'html', 'body' ],
        whitelistPatterns: [/svelte-/]
      }),
    purgecss &&
      require('cssnano')({
        preset: 'default',
      }),
  ].filter(Boolean)

If I change above line to extractor: new SvelteExtractor() the inital error goes away but is replaced by

> t is not a function
TypeError: t is not a function
    at extractSelectors (/Users/sa/0/edm/node_modules/purgecss/lib/purgecss.js:1:2358)
    at PurgeCSS.extractSelectorsFromFiles (/Users/sa/0/edm/node_modules/purgecss/lib/purgecss.js:1:5802)
    at async /Users/sa/0/edm/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:501
@Ffloriel
Copy link
Member

The class based extractor has been removed on version 2 in favor of a function.
It should work if you use the extract function by itself without a class.
PurgeCSS is complaining about the fact the extractor provided is not a function.

@evdama
Copy link
Author

evdama commented Jan 21, 2020

Ok, worked, moved to below function instead of former class

  const svelteExtractor = ( content ) => {
    const regExp = new RegExp(/[A-Za-z0-9-_:/]+/g)
    const matchedTokens = []
    let match = regExp.exec(content)

    while (match) {
      if (match[0].startsWith('class:')) {
        matchedTokens.push(match[0].substring(6))
      } else {
        matchedTokens.push(match[0])
      }
      match = regExp.exec(content)
    }
    return matchedTokens
  }

thanks! closing...

@evdama evdama closed this as completed Jan 21, 2020
@Ffloriel Ffloriel transferred this issue from FullHuman/postcss-purgecss Jan 29, 2020
polarbirke added a commit to webfactory/webfactory-gulp-preset that referenced this issue Jan 18, 2021
The class based extractor has been removed from FullHuman/purgecss
in favor of a function.

src: FullHuman/purgecss#276 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants