parcel-bundler / parcel-bundler/lightningcss

Strange behavoiur for prefixing property `user-select`

Open
#925 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pending triage
Dominant language
Rust
Stars
7.7k
Forks
302
PR merge metrics
No merged PRs in 30d

Description

Sandbox demo: https://stackblitz.com/edit/stackblitz-starters-ssfut1yt?file=lightningcss.js

I have CSS:

pre {
  user-select: all;
}

On this moment, Safari doesn't support user-select without vendor-prefix.

For adding prefixes i use this browserslist config:

last 2 versions
not dead

And code for compiling:

import * as lightningcss from 'lightningcss';
import browserslist from 'browserslist';

const browsers = browserslist();
const targets = lightningcss.browserslistToTargets(browsers);

console.log('browserslist: ', browsers);
console.log('lightningcss: ', targets);

const result = await lightningcss.bundleAsync({
  targets,
  filename: './styles.css',
});

console.log(result.code.toString());

i get unprefixed code:

pre {
  user-select: all;
}

but Safari is in the list:

browserslist:  [
  'and_chr 133',  'and_ff 135',
  'and_qq 14.9',  'and_uc 15.5',
  'android 133',  'chrome 133',
  'chrome 132',   'edge 133',
  'edge 132',     'firefox 135',
  'firefox 134',  'ios_saf 18.3',
  'ios_saf 18.2', 'kaios 3.0-3.1',
  'kaios 2.5',    'op_mini all',
  'op_mob 80',    'opera 114',
  'opera 113',    'safari 18.3',
  'safari 18.2',  'samsung 27',
  'samsung 26'
]

lightningcss:  {
  and_chr: 8716288,
  and_ff: 8847360,
  android: 8716288,
  chrome: 8650752,
  edge: 8650752,
  firefox: 8781824,
  ios_saf: 1180160,
  op_mob: 5242880,
  opera: 7405568,
  safari: 1180160,
  samsung: 1703936
}

LightningCSS Playground have correct prefixed code.

Postcss have another result.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the StackBlitz lightningcss.js reproduction and inspect the targets produced by browserslistToTargets before bundleAsync runs. Compare the generated user-select output with the LightningCSS Playground for the same Safari targets. Done means the compiler emits the required vendor-prefixed declaration for the reported targets without changing unrelated output.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, rust
Domain
compilers, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.