linaria icon indicating copy to clipboard operation
linaria copied to clipboard

Published 20 hours ago • verified publisher icon callstack

Linaria + Vite doesn't work

Open felixcatto opened this issue 2 years ago • 3 comments
trafficstars

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 avatar May 10 '23 16:05 felixcatto

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:

https://github.com/callstack/linaria/blob/33a79a9dd86c6fe2a9d8556534529a45c68d3c34/packages/vite/src/index.ts#L160-L162

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";

layershifter avatar Sep 30 '23 18:09 layershifter