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

Identify CSS units and variables #1450

Merged
merged 3 commits into from
Dec 3, 2018
Merged

Identify CSS units and variables #1450

merged 3 commits into from
Dec 3, 2018

Conversation

RexSkz
Copy link
Contributor

@RexSkz RexSkz commented Jun 23, 2018

Assume CSS unit is a word or % after a number, CSS variable is a word inside var().

I think % should not be recognized as a part of number, but the leading - should.

When using minus operator in calc function, we must type a space in both sides of - (value like calc(100%-5px) is wrong), so if we met a pattern like -[\d.] in a CSS value (not in selector, rule or variable), it must be the start of a negative number.

@RexSkz RexSkz closed this Jun 23, 2018
@RexSkz RexSkz reopened this Jun 23, 2018
mAAdhaTTah
mAAdhaTTah approved these changes Jul 21, 2018
View reviewed changes
Copy link
Member

@mAAdhaTTah mAAdhaTTah left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems good to me. Would also be open to adding operators to css-extras as well.

@RexSkz RexSkz force-pushed the rex/identify-css-unit branch 2 times, most recently from 74a57e7 to 4a60bb1 Compare September 19, 2018 02:49
@RexSkz
Copy link
Contributor Author

RexSkz commented Sep 19, 2018

Hi, this PR can now recognize operators in css-extras~

@OlehDutchenko
Copy link
Contributor

when it would be merged? i need it

RunDevelopment
RunDevelopment requested changes Dec 3, 2018
View reviewed changes
Copy link
Member

@RunDevelopment RunDevelopment left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that the variable pattern is incorrect (see comment).

components/prism-css-extras.js
@@ -10,7 +10,19 @@ Prism.languages.css.selector = {
};

Prism.languages.insertBefore('css', 'function', {
'variable': {
pattern: /(var\()[^)]+(?=\))/,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This pattern will also include possible default values.

But we can use the naming convention of custom properties to make a simple pattern which matches all variables accessed via var or not.

A custom property [= variable] is any property whose name starts with two dashes [...].

Using that, /(^|[^-\w\xA0-\uFFFF])--[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*/i should do the job.

Depending on whether we insert it before property we can also highlight the custom property declarations.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gah, hit merge too quickly!

Copy link
Member

@RunDevelopment RunDevelopment Dec 3, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's alright, I reviewed too late.

@mAAdhaTTah mAAdhaTTah merged commit 5fcee96 into PrismJS:master Dec 3, 2018
@RunDevelopment
Copy link
Member

Too late it seems.
I'll make a new PR.

@RunDevelopment RunDevelopment mentioned this pull request Dec 3, 2018
Merged
mAAdhaTTah pushed a commit that referenced this pull request Dec 3, 2018
@RunDevelopment @mAAdhaTTah
Fixed CSS extra variable (#1649)
9de47d3 
Details are described [here](#1450 (comment)).

I decided to go with the property variant, highlighting custom property declarations as `variable`.
@OlehDutchenko
Copy link
Contributor

OlehDutchenko commented Dec 3, 2018 •
edited

Finally! thx!

@RexSkz RexSkz deleted the rex/identify-css-unit branch December 4, 2018 01:53
@ExE-Boss ExE-Boss mentioned this pull request Mar 25, 2019
Merged
schalkneethling pushed a commit to mdn/kuma that referenced this pull request Mar 27, 2019
@ExE-Boss
Fix bug 1538693: Update Prism to version 1.16 (#5313)
7e31be1 
Resolves [bug 1538693](https://bugzilla.mozilla.org/show_bug.cgi?id=1538693).

<!--
# ------------------------ >8 ------------------------
Remove everything below this line from the commit message
-->

<details><summary>
<h2>Kuma affecting changes:</h2>
<table><td>
📝 <strong>Note:</strong> See <a href="https://github.com/PrismJS/prism/releases/tag/v1.16.0">PrismJS/prism@v1.16.0</a> for a full list of changes.
</td></table></summary>

### Updated components

* __C__
	* Improve C language (PrismJS/prism#1697) PrismJS/prism@7eccea5c
* __C-like__
	* Simplify function pattern of C-like language (PrismJS/prism#1552) PrismJS/prism@b520e1b6
* __C/C++/Java__
	* Operator fixes (PrismJS/prism#1528) PrismJS/prism@7af8f8be
* __CSS__
	* Fix tokenizing !important (PrismJS/prism#1585) PrismJS/prism@c1d6cb85
	* Added the comma to the list of CSS punctuation PrismJS/prism@7ea2ff28
	* CSS: Comma punctuation (PrismJS/prism#1632) PrismJS/prism@1b812386
	* Reuse CSS selector pattern in CSS Extras (PrismJS/prism#1637) PrismJS/prism@e2f2fd19
	* Fixed CSS extra variable (PrismJS/prism#1649) PrismJS/prism@9de47d3a
	* Identify CSS units and variables (PrismJS/prism#1450) PrismJS/prism@5fcee966
	* Allow multiline CSS at-rules (PrismJS/prism#1676) PrismJS/prism@4f6f3c7d
	* CSS: Highlight attribute selector (PrismJS/prism#1671) PrismJS/prism@245b59d4
	* CSS: Selectors can contain any string (PrismJS/prism#1638) PrismJS/prism@a2d445d0
	* CSS extras: Highlighting for pseudo class arguments (PrismJS/prism#1650) PrismJS/prism@70a40414
* __Java__
	* Add Java 10 support (PrismJS/prism#1549) PrismJS/prism@8c981a22
	* Added module keywords to Java. (PrismJS/prism#1655) PrismJS/prism@6e250a5f
	* Improve Java (PrismJS/prism#1474) PrismJS/prism@81bd8f0b
* __JavaScript__
	* Fix regex for `catch` and `finally` (PrismJS/prism#1527) PrismJS/prism@ebd1b9a6
	* Highlighting of supposed classes and functions (PrismJS/prism#1482) PrismJS/prism@c40f6047
	* Added support for JS BigInt literals (PrismJS/prism#1542) PrismJS/prism@2b62e57b
	* Fixed lowercase supposed class names (PrismJS/prism#1544) PrismJS/prism@a47c05ad
	* Fixes regex for JS examples (PrismJS/prism#1591) PrismJS/prism@b41fb8f1
	* Improve regex detection in JS (PrismJS/prism#1473) PrismJS/prism@2a4758ab
	* Identify JavaScript function parameters (PrismJS/prism#1446) PrismJS/prism@0cc8c56a
	* Improved JavaScript parameter recognization (PrismJS/prism#1722) PrismJS/prism@57a92035
	* Make `undefined` a keyword in JS (PrismJS/prism#1740) PrismJS/prism@d9fa29a8
	* Fix `function-variable` in JS (PrismJS/prism#1739) PrismJS/prism@bfbea4d6
	* Improved JS constant pattern (PrismJS/prism#1737) PrismJS/prism@7bcec584
	* Improved JS function pattern (PrismJS/prism#1736) PrismJS/prism@8378ac83
	* JS: Fixed variables named "async" (PrismJS/prism#1738) PrismJS/prism@3560c643
	* JS: Keyword fix (PrismJS/prism#1808) PrismJS/prism@f2d8e1c7
* __JSON__ / __JSONP__
	* Fix bugs in JSON language (PrismJS/prism#1479) PrismJS/prism@74fe81c6
	* Adds support for comments in JSON (PrismJS/prism#1595) PrismJS/prism@8720b3e6
	* Cleaned up JSON (PrismJS/prism#1596) PrismJS/prism@da474c77
	* Added `keyword` alias to JSON's `null` (PrismJS/prism#1733) PrismJS/prism@eee06649
	* Fix JSONP support (PrismJS/prism#1745) PrismJS/prism@b5041cf9
	* Fixed JSON/JSONP examples (PrismJS/prism#1765) PrismJS/prism@ae4842db
* __Markup__
	* Decouple XML from Markup (PrismJS/prism#1603) PrismJS/prism@0030a4ef
	* Fix for markup attributes (PrismJS/prism#1752) PrismJS/prism@c3862a24
	* Markup: Added support for CSS and JS inside of CDATAs (PrismJS/prism#1660) PrismJS/prism@57127701
	* Markup `addInline` improvements (PrismJS/prism#1798) PrismJS/prism@af67c32e
* __Rust__
	* Add missing keywords (PrismJS/prism#1634) PrismJS/prism@3590edde

### Updated plugins

* Better class name detection for plugins (PrismJS/prism#1772) PrismJS/prism@c9762c6f
* __Line Numbers__
	* Added inheritance for the `line-numbers` class (PrismJS/prism#1799) PrismJS/prism@14be7489

### Other changes

* __Core__
	* `insertBefore` now correctly updates references (PrismJS/prism#1531) PrismJS/prism@9dfec340
	* Invoke `callback` after `after-highlight` hook (PrismJS/prism#1588) PrismJS/prism@bfbe4464
	* Improve `Prism.util.type` performance (PrismJS/prism#1545) PrismJS/prism@2864fe24
	* Remove unused `insertBefore` overload (PrismJS/prism#1631) PrismJS/prism@39686e12
	* Ignore duplicates in insertBefore (PrismJS/prism#1628) PrismJS/prism@d33d259c
	* Remove the Prism.tokenize language parameter (PrismJS/prism#1654) PrismJS/prism@fbf0b094
	* Call `insert-before` hook properly (PrismJS/prism#1709) PrismJS/prism@393ab164
	* Improved languages.DFS and util.clone (PrismJS/prism#1506) PrismJS/prism@152a68ef
	* Core: Avoid redeclaring variables in util.clone (PrismJS/prism#1778) PrismJS/prism@b06f532f
	* Made prism-core a little more editor friendly (PrismJS/prism#1776) PrismJS/prism@bac09f0a
	* Applied Array.isArray (PrismJS/prism#1804) PrismJS/prism@11d0f75e

</details>

---

review?(@jwhitlock)
@wooorm wooorm mentioned this pull request Aug 1, 2019
Closed
This was referenced Oct 26, 2019
Open
Open
@snyk-bot snyk-bot mentioned this pull request Mar 8, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Mar 21, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mAAdhaTTah mAAdhaTTah mAAdhaTTah approved these changes

@RunDevelopment RunDevelopment RunDevelopment requested changes

Assignees
No one assigned
Labels
enhancement language-definitions needs consensus
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@RexSkz @OlehDutchenko @RunDevelopment @mAAdhaTTah