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.

Sign up for GitHub

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

Jump to bottom

Linaria + Vite doesn't work #1250

Open
felixcatto opened this issue May 10, 2023 · 1 comment
Open

Linaria + Vite doesn't work #1250

felixcatto opened this issue May 10, 2023 · 1 comment
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided

Comments

@felixcatto
Copy link

Environment

  • Linaria version: 4.2.10
  • Bundler: Vite 4.3.5, @linaria/vite: 4.2.11
  • Node.js version: 18.14
  • OS: Ubuntu 20.04
  • Browser: Chrome 112

Description

Linaria doesn't work with Vite even in minimal example without React... When i call `css`` i got the following error

alt text

Reproducible Demo

Link to repo with minimal dependencies - https://github.com/felixcatto/linaria-vite-bug
@felixcatto felixcatto added bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided needs: triage 🏷 Issue needs to be checked and prioritized labels May 10, 2023
@github-actions github-actions bot removed the needs: triage 🏷 Issue needs to be checked and prioritized label May 10, 2023
@layershifter
Copy link
Contributor

This is a valid issue and happens with v5. It happens when an expression is not referenced, i.e.

// FAILS 💥 
const title = css`
  font-size: 24px;
  font-weight: bold;
`;
// Passing 🟢 
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

console.log(title)

Execution fails as there is a check based on cssText presence:

linaria/packages/vite/src/index.ts

Lines 160 to 162 in 33a79a9

let { cssText, dependencies } = result;
if (!cssText) return;

When an expression is not referenced, it will not be under cssText/rules.

Logs

no reference 
7:53:27 PM [vite] page reload src/main.js
2023-09-30T17:53:27.413Z linaria:vite Vite transform 1
2023-09-30T17:53:27.413Z linaria:cache:entrypoints get /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js hit
2023-09-30T17:53:27.413Z linaria:cache content has changed, invalidate all for /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:53:27.413Z linaria:cache:entrypoints invalidate /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:53:27.413Z linaria:transform:00001#8 is already evaluated with [ '__linariaPreval' ]
2023-09-30T17:53:27.414Z linaria:transform:00001#9:source created /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js ([ '__linariaPreval' ])
import { css } from '@linaria/core';

console.log(1);
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

console.log(`css`)

2023-09-30T17:53:27.414Z linaria:cache:entrypoints 00001:add /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js "added"
2023-09-30T17:53:27.414Z linaria:transform:00001#9:workflow@00001d next processing, result idx is 0
2023-09-30T17:53:27.414Z linaria:transform:00001#9:processEntrypoint@00001e next processing, result idx is 0
2023-09-30T17:53:27.414Z linaria:transform:00001#9 start processing (only: [ '__linariaPreval' ])
2023-09-30T17:53:27.415Z linaria:transform:00001#9:explodeReexports@00001f next processing, result idx is 0
2023-09-30T17:53:27.415Z linaria:transform:parse:00001 [stage-1] /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js has been parsed
2023-09-30T17:53:27.415Z linaria:transform:00001#9:processEntrypoint@00001e next processing, result idx is 1
2023-09-30T17:53:27.415Z linaria:transform:00001#9:transform@000020 next processing, result idx is 0
2023-09-30T17:53:27.415Z linaria:transform:00001#9 >> ([ '__linariaPreval' ])
2023-09-30T17:53:27.416Z linaria:preeval:00001 [start] Looking for template literals…
2023-09-30T17:53:27.416Z linaria:template-parse:identify-expressions 0
2023-09-30T17:53:27.417Z linaria:template-parse:generated-meta slug: t321z82, displayName: title, className: t321z82
2023-09-30T17:53:27.418Z linaria:preeval:00001 [start] Strip all JSX and browser related stuff
2023-09-30T17:53:27.419Z linaria:preeval:00001 [end] __linariaPreval has been added
2023-09-30T17:53:27.420Z linaria:transform:00001#9 [preeval] metadata {
  processors: [
    CssProcessor {
      artifacts: [],
      dependencies: [],
      interpolations: [],
      tagSource: [Object],
      astService: [Object],
      location: [Object],
      replacer: [Function: replacer],
      displayName: 'title',
      isReferenced: false,
      idx: 0,
      options: [Object],
      context: [Object],
      className: 't321z82',
      slug: 't321z82',
      callee: [Object]
    }
  ],
  replacements: [],
  rules: {},
  dependencies: []
}
2023-09-30T17:53:27.420Z linaria:transform:00001#9 [evaluator:start] using shaker
2023-09-30T17:53:27.420Z linaria:shaker:00001 [start] /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js, onlyExports: __linariaPreval
2023-09-30T17:53:27.420Z linaria:shaker:00001 [import-and-exports] imports: 0 (side-effects: 0), exports: 1, reexports: 0
2023-09-30T17:53:27.421Z linaria:shaker:00001 [end] remaining imports: Map(0) {}
2023-09-30T17:53:27.421Z linaria:transform:00001#9 [evaluator:end]
2023-09-30T17:53:27.421Z linaria:transform:00001#9 << ([ '__linariaPreval' ])
2023-09-30T17:53:27.421Z linaria:transform:00001#9:source "use strict";

console.log(1);
const title = "t321z82";
console.log(`css`);
exports.__linariaPreval = {};
2023-09-30T17:53:27.421Z linaria:transform:00001#9:processEntrypoint@00001e next processing, result idx is 2
2023-09-30T17:53:27.421Z linaria:transform:00001#9 entrypoint processing finished
2023-09-30T17:53:27.421Z linaria:transform:00001#9:workflow@00001d next processing, result idx is 1
2023-09-30T17:53:27.421Z linaria:transform:00001#9:evalFile@000021 next processing, result idx is 0
2023-09-30T17:53:27.421Z linaria:transform:00001#9 >> evaluate __linariaPreval
2023-09-30T17:53:27.421Z linaria:transform:00001#9:module init /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:53:27.421Z linaria:cache:entrypoints get /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js hit
2023-09-30T17:53:27.421Z linaria:transform:00001#9 create EvaluatedEntrypoint for [ '__linariaPreval' ]
2023-09-30T17:53:27.421Z linaria:cache:entrypoints 00001:add /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js "updated"
2023-09-30T17:53:27.421Z linaria:transform:00001#9:module evaluate
2023-09-30T17:53:27.421Z linaria:transform:00001#9:module:source "use strict";

console.log(1);
const title = "t321z82";
console.log(`css`);
exports.__linariaPreval = {};
1
css
2023-09-30T17:53:27.422Z linaria:transform:00001#1 set __linariaPreval: {}
2023-09-30T17:53:27.422Z linaria:transform:00001#1 get __linariaPreval: {}
2023-09-30T17:53:27.422Z linaria:transform:00001#9 << evaluated __linariaPreval Map(0) {}
2023-09-30T17:53:27.422Z linaria:transform:00001#9:workflow@00001d next processing, result idx is 2
2023-09-30T17:53:27.422Z linaria:transform:00001#9:collect@000022 next processing, result idx is 0
2023-09-30T17:53:27.423Z linaria:collect:start /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:53:27.423Z linaria:template-parse:identify-expressions 0
2023-09-30T17:53:27.425Z linaria:template-parse:generated-meta slug: t321z82, displayName: title, className: t321z82
2023-09-30T17:53:27.425Z linaria:collect:end /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:53:27.425Z linaria:transform:00001#9:workflow@00001d next processing, result idx is 3
2023-09-30T17:53:27.425Z linaria:transform:00001#9:extract@000023 next processing, result idx is 0
2023-09-30T17:53:27.425Z linaria:transform:00001#9:workflow@00001d next processing, result idx is 4
2023-09-30T17:53:27.425Z linaria:transform:00001#9 /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js is ready
VITE:CODE import { css } from '@linaria/core';

console.log(1);
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

console.log(`css`)

VITE:RESULT {
  cssText: '',
  rules: {},
  cssSourceMapText: '',
  replacements: [],
  code: 'console.log(1);\nconst title = "t321z82";\nconsole.log(`css`);',
  dependencies: [],
  sourceMap: {
    version: 3,
    file: undefined,
    names: [ 'console', 'log', 'title' ],
    sourceRoot: undefined,
    sources: [ '/Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js' ],
    sourcesContent: [
      "import { css } from '@linaria/core';\n" +
        '\n' +
        'console.log(1);\n' +
        'const title = css`\n' +
        '  font-size: 24px;\n' +
        '  font-weight: bold;\n' +
        '`;\n' +
        '\n' +
        'console.log(`css`)\n'
    ],
    mappings: 'AAEAA,OAAO,CAACC,GAAG,CAAC,CAAC,CAAC;AACd,MAAMC,KAAK,YAGV;AAEDF,OAAO,CAACC,GAAG,CAAE,KAAI,CAAC'
  }
}
VITE:cssText
Passing 
7:52:36 PM [vite] page reload src/main.js
2023-09-30T17:52:36.952Z linaria:vite Vite transform 1
2023-09-30T17:52:36.952Z linaria:cache:entrypoints get /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js hit
2023-09-30T17:52:36.952Z linaria:cache content has changed, invalidate all for /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:52:36.952Z linaria:cache:entrypoints invalidate /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:52:36.952Z linaria:transform:00001#6 is already evaluated with [ '__linariaPreval' ]
2023-09-30T17:52:36.953Z linaria:transform:00001#7:source created /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js ([ '__linariaPreval' ])
import { css } from '@linaria/core';

console.log(1);
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

console.log(`css`, title)

2023-09-30T17:52:36.953Z linaria:cache:entrypoints 00001:add /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js "added"
2023-09-30T17:52:36.953Z linaria:transform:00001#7:workflow@000016 next processing, result idx is 0
2023-09-30T17:52:36.953Z linaria:transform:00001#7:processEntrypoint@000017 next processing, result idx is 0
2023-09-30T17:52:36.953Z linaria:transform:00001#7 start processing (only: [ '__linariaPreval' ])
2023-09-30T17:52:36.953Z linaria:transform:00001#7:explodeReexports@000018 next processing, result idx is 0
2023-09-30T17:52:36.954Z linaria:transform:parse:00001 [stage-1] /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js has been parsed
2023-09-30T17:52:36.954Z linaria:transform:00001#7:processEntrypoint@000017 next processing, result idx is 1
2023-09-30T17:52:36.954Z linaria:transform:00001#7:transform@000019 next processing, result idx is 0
2023-09-30T17:52:36.954Z linaria:transform:00001#7 >> ([ '__linariaPreval' ])
2023-09-30T17:52:36.955Z linaria:preeval:00001 [start] Looking for template literals…
2023-09-30T17:52:36.955Z linaria:template-parse:identify-expressions 0
2023-09-30T17:52:36.956Z linaria:template-parse:generated-meta slug: t321z82, displayName: title, className: t321z82
2023-09-30T17:52:36.956Z linaria:preeval:00001 [start] Strip all JSX and browser related stuff
2023-09-30T17:52:36.956Z linaria:preeval:00001 [end] __linariaPreval has been added
2023-09-30T17:52:36.957Z linaria:transform:00001#7 [preeval] metadata {
  processors: [
    CssProcessor {
      artifacts: [],
      dependencies: [],
      interpolations: [],
      tagSource: [Object],
      astService: [Object],
      location: [Object],
      replacer: [Function: replacer],
      displayName: 'title',
      isReferenced: true,
      idx: 0,
      options: [Object],
      context: [Object],
      className: 't321z82',
      slug: 't321z82',
      callee: [Object]
    }
  ],
  replacements: [],
  rules: {},
  dependencies: []
}
2023-09-30T17:52:36.957Z linaria:transform:00001#7 [evaluator:start] using shaker
2023-09-30T17:52:36.957Z linaria:shaker:00001 [start] /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js, onlyExports: __linariaPreval
2023-09-30T17:52:36.957Z linaria:shaker:00001 [import-and-exports] imports: 0 (side-effects: 0), exports: 1, reexports: 0
2023-09-30T17:52:36.958Z linaria:shaker:00001 [end] remaining imports: Map(0) {}
2023-09-30T17:52:36.958Z linaria:transform:00001#7 [evaluator:end]
2023-09-30T17:52:36.958Z linaria:transform:00001#7 << ([ '__linariaPreval' ])
2023-09-30T17:52:36.958Z linaria:transform:00001#7:source "use strict";

console.log(1);
const title = "t321z82";
console.log(`css`, title);
exports.__linariaPreval = {};
2023-09-30T17:52:36.958Z linaria:transform:00001#7:processEntrypoint@000017 next processing, result idx is 2
2023-09-30T17:52:36.958Z linaria:transform:00001#7 entrypoint processing finished
2023-09-30T17:52:36.958Z linaria:transform:00001#7:workflow@000016 next processing, result idx is 1
2023-09-30T17:52:36.958Z linaria:transform:00001#7:evalFile@00001a next processing, result idx is 0
2023-09-30T17:52:36.958Z linaria:transform:00001#7 >> evaluate __linariaPreval
2023-09-30T17:52:36.958Z linaria:transform:00001#7:module init /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:52:36.958Z linaria:cache:entrypoints get /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js hit
2023-09-30T17:52:36.958Z linaria:transform:00001#7 create EvaluatedEntrypoint for [ '__linariaPreval' ]
2023-09-30T17:52:36.958Z linaria:cache:entrypoints 00001:add /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js "updated"
2023-09-30T17:52:36.958Z linaria:transform:00001#7:module evaluate
2023-09-30T17:52:36.958Z linaria:transform:00001#7:module:source "use strict";

console.log(1);
const title = "t321z82";
console.log(`css`, title);
exports.__linariaPreval = {};
1
css t321z82
2023-09-30T17:52:36.960Z linaria:transform:00001#1 set __linariaPreval: {}
2023-09-30T17:52:36.960Z linaria:transform:00001#1 get __linariaPreval: {}
2023-09-30T17:52:36.960Z linaria:transform:00001#7 << evaluated __linariaPreval Map(0) {}
2023-09-30T17:52:36.960Z linaria:transform:00001#7:workflow@000016 next processing, result idx is 2
2023-09-30T17:52:36.960Z linaria:transform:00001#7:collect@00001b next processing, result idx is 0
2023-09-30T17:52:36.961Z linaria:collect:start /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:52:36.963Z linaria:template-parse:identify-expressions 0
2023-09-30T17:52:36.966Z linaria:template-parse:generated-meta slug: t321z82, displayName: title, className: t321z82
2023-09-30T17:52:36.967Z linaria:collect:end /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js
2023-09-30T17:52:36.967Z linaria:transform:00001#7:workflow@000016 next processing, result idx is 3
2023-09-30T17:52:36.967Z linaria:transform:00001#7:extract@00001c next processing, result idx is 0
2023-09-30T17:52:36.968Z linaria:transform:00001#7:workflow@000016 next processing, result idx is 4
2023-09-30T17:52:36.968Z linaria:transform:00001#7 /Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js is ready
VITE:CODE import { css } from '@linaria/core';

console.log(1);
const title = css`
  font-size: 24px;
  font-weight: bold;
`;

console.log(`css`, title)

VITE:RESULT {
  cssText: '.t321z82{font-size:24px;font-weight:bold;}\n',
  rules: {
    '.t321z82': {
      cssText: '\n  font-size: 24px;\n  font-weight: bold;\n',
      className: 't321z82',
      displayName: 'title',
      start: [Object]
    }
  },
  cssSourceMapText: '{"version":3,"sources":["/Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js"],"names":[".t321z82"],"mappings":"AAGcA","file":"/Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.css","sourcesContent":["import { css } from \'@linaria/core\';\\n\\nconsole.log(1);\\nconst title = css`\\n  font-size: 24px;\\n  font-weight: bold;\\n`;\\n\\nconsole.log(`css`, title)\\n"]}',
  replacements: [],
  code: 'console.log(1);\nconst title = "t321z82";\nconsole.log(`css`, title);',
  dependencies: [],
  sourceMap: {
    version: 3,
    file: undefined,
    names: [ 'console', 'log', 'title' ],
    sourceRoot: undefined,
    sources: [ '/Users/olfedias/WebstormProjects/linaria-vite-bug/src/main.js' ],
    sourcesContent: [
      "import { css } from '@linaria/core';\n" +
        '\n' +
        'console.log(1);\n' +
        'const title = css`\n' +
        '  font-size: 24px;\n' +
        '  font-weight: bold;\n' +
        '`;\n' +
        '\n' +
        'console.log(`css`, title)\n'
    ],
    mappings: 'AAEAA,OAAO,CAACC,GAAG,CAAC,CAAC,CAAC;AACd,MAAMC,KAAK,YAGV;AAEDF,OAAO,CAACC,GAAG,CAAE,KAAI,EAAEC,KAAK,CAAC'
  }
}
VITE:cssText .t321z82{font-size:24px;font-weight:bold;}

RESULT.code console.log(1);
const title = "t321z82";
console.log(`css`, title);
import "/Users/olfedias/WebstormProjects/linaria-vite-bug/src/main_1yamv0t.css";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug report 🦗 Issue is probably a bug, but it needs to be checked needs: complete repro 🖥️ Issue need to have complete repro provided
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@felixcatto @layershifter