Skip to content

postcss-custom-media & css-tokenizer & media query parser #627

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

Conversation

romainmenke
Copy link
Member

@romainmenke romainmenke commented Sep 24, 2022

  • a CSS tokenizer + a Media Query List parser so that we can manipulate @custom-media without regexp
    • maybe we need more test coverage here but for now it appears to work correctly for @custom-media and @media params. We can increase coverage as we increase usage.
  • converted to Typescript
  • updated docs
  • removed importFrom|exportTo
  • implement true|false keywords
  • implement logical evaluation of @custom-media

postcss-preset-env tests didn't need any changes because the plugin still works exactly the same for simple examples.

romainmenke and others added 7 commits October 1, 2022 16:11
…tcss-custom-media--affectionate-norwegian-forest-919e131c19
…tcss-custom-media--affectionate-norwegian-forest-919e131c19
…tcss-custom-media--affectionate-norwegian-forest-919e131c19
* wip

* wip

* wip

* wip

* wip

* finish range

* more work

* lint

* fix ranges

* more work

* media lists

* finish parser

* toJSON

* add a test suite

* more tests

* wip

* lint

* more tests

* wip

* fix range parsing

* docs

* add ancestry utility

* fixes

* fixes

* allow parsing from tokens

* add some convenience methods

* fixes

* more migration

* more convenience methods

* more type predicates

* wip

* fix

* fix

* finish up

* lets get rid of those build errors
@romainmenke romainmenke changed the title postcss-custom-media & css-tokenizer postcss-custom-media & css-tokenizer & media query parser Nov 5, 2022
Comment on lines +12 to 15
"packages/css-tokenizer",
"packages/css-parser-algorithms",
"packages/media-query-list-parser",
"packages/*",
Copy link
Member

Choose a reason for hiding this comment

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

Given L15, do we need to specify in particular? I notice we have progressive too so I wasn't sure.

Copy link
Member Author

Choose a reason for hiding this comment

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

This is a "hack" to specify the build and test order.
npm workspaces do not build a dependency graph between local packages.

start: tokens[0][2],
end: tokens[tokens.length - 1][3],
state: [
'5.4.9. Consume a function',
Copy link
Member

Choose a reason for hiding this comment

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

❤️ how this is searchable in the spec!

Comment on lines +329 to +330
start: tokens[0][2],
end: tokens[tokens.length - 1][3],
Copy link
Member

Choose a reason for hiding this comment

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

We get here more of these numbers too which tie into how these are stored. Flagging in case you want to tackle with the 4 too.

Copy link
Member

@Antonio-Laguna Antonio-Laguna left a comment

Choose a reason for hiding this comment

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

@romainmenke this has been a lengthy review but I've learned so much about this and the spec.

I wouldn't be able to really phrase how amazed I am by this and impressed by this work!

Thanks a lot!

My only point (and not needed here) is to add more literature about the changes in custom-media. I'm unsure if it belongs to the README or the wiki (leaning towards the README) but explaining what's new. Essentially these:

  • Fixed: implement logical evaluation of custom media queries.
  • Added: Support for true and false keywords in @custom-media.

@romainmenke
Copy link
Member Author

but I've learned so much about this and the spec.

Same, I always find it interesting to gain more in depth knowledge about CSS through things like this :)

My only point (and not needed here) is to add more literature about the changes in custom-media. I'm unsure if it belongs to the README or the wiki (leaning towards the README) but explaining what's new.

I will do that!

--

Thank you for this review!

@romainmenke romainmenke merged commit b36d5ae into postcss-preset-env--v8 Nov 7, 2022
@romainmenke romainmenke deleted the postcss-custom-media--affectionate-norwegian-forest-919e131c19 branch November 7, 2022 18:04
romainmenke added a commit that referenced this pull request Jan 24, 2023
* prefers color scheme (#436)

* prefers-color-scheme : cleanup

* cleanup

* fix

* more fixes

* Update plugins/css-prefers-color-scheme/CHANGELOG.md

Co-authored-by: Antonio Laguna <[email protected]>

* peer dependency

* import

* update change log

Co-authored-by: Antonio Laguna <[email protected]>

* update tests (#485)

* css-has-pseudo (#473)

* css-has-pseudo

* preset-env

* update tests

* fixes

* docs

* docs

* changelog

* fix

* fix

* fix

* fix

* css-has-pseudo : make the experimental plugin a noop (#500)

* CSS Blank Pseudo (#486)

* WIP

* Tests and docs

* Rewriting browser

* Browser tests running

* Touch to docs

* Finishing

* Minor updates

* Moving the file to be `.mjs

* Linted now

* css-blank-pseudo : code review (#501)

Co-authored-by: Romain Menke <[email protected]>

* Updating package-lock

* Updating lock again

* Updating CHANGELOG

* Updating Focus Visible (#513)

* Updating Focus Visible

* Returning CHANGELOG

* Updating tests

* focus-visible : code review (#514)

* Updating CHANGELOG

* focus-visible : code review (#514)

Co-authored-by: Romain Menke <[email protected]>

* case insensitive matching (#517)

* Updating Focus Within (#516)

* Starting focus-within plugin

* Finishing focus within

* Updating tests

* Fixed tests after swapping preserve

* Adding CHANGELOG

* Updating tests

* Generating docs

* Better options for older browsers

* postcss-blank : browser compat (#519)

* postcss-blank : browser compat

* fix

* fix

* postcss-focus-within : browser compat (#520)

* postcss-focus-within : browser compat

* lint

* Adding global class to CSS Blank (#524)

* Better handling for classList

* Refactoring to reuse code

* Appending `js-blank-pseudo` on load

* Only apply if not applied before to avoid double classes

* Updating docs

* Class should happen always

* Ensuring ready class is handled via plugin

* Updating tests

* Updating docs

* Handling preset-env tests for blank pseudo

* Conflicting test

* fmt

* css has pseudo : pseudo element support and .js-has-pseudo class (#525)

* css has pseudo : pseudo element support and .js-has-pseudo class

* update tests

* fix

* fix

* css-has-pseudo: only test polyfill, we dont need to always test browser behavior

* flip enableClientSidePolyfills (#528)

* CSS Has Pseudo Experimental 0.6.0 (deprecated)

* CSS Blank Pseudo 4.0.0

* CSS Has Pseudo 4.0.0

* Prefers Color Scheme 7.0.0

* PostCSS Focus Visible 7.0.0

* PostCSS Focus Within 6.0.0

* PostCSS Preset Env 8 Alpha 0

* update cli

* add : disablePolyfillReadyClass (#558)

* add : disablePolyfillReadyClass

* Apply suggestions from code review

Co-authored-by: Antonio Laguna <[email protected]>

Co-authored-by: Antonio Laguna <[email protected]>

* Extra space removal

* CSS Blank Pseudo 4.1.0

* PostCSS Focus Visible 7.1.0

* PostCSS Focus Within 6.1.0

* browser polyfills : use window or self for the global polyfill (#586)

* CSS Blank Pseudo 4.1.1

* CSS Has Pseudo 4.0.1

* Prefers Color Scheme 7.0.1

* PostCSS Focus Within 6.1.1

* bump postcss, node and npm versions (#599)

* add install instructions for es modules

* fix ci

* fix ci

* add support for postcss-html (#602)

* refactor `postcss-custom-properties` and cleanup in `postcss-preset-env` (#603)

* postcss-custom-properties

* cleanup more tests

* cleanup

* docs and changelog

* cleanup

* more cleanup

* docs

* Update plugins/postcss-custom-properties/docs/README.md

Co-authored-by: Antonio Laguna <[email protected]>

* docs

Co-authored-by: Antonio Laguna <[email protected]>

* cleanup

* cleanup

* update gitignore for html document tests

* refactor `postcss-custom-selectors` (#609)

* postcss-custom-selectors

* add support for scope and container

* update TS targets

* update lock file

* lint

* bring in changes from main

* postcss-custom-media & css-tokenizer & media query parser (#627)

* init

* init

* consume a token

* consume a comment

* add reader

* tweaks

* postcss interop

* wip

* consume number

* fix

* fixes

* more tests

* basic tokenizer

* fixes and docs

* some more bits

* some more bits

* getting somewhere

* string tokens

* almost there

* should be complete, text coverage up next

* add context

* fix

* add parser error reporting

* fixes and more tests

* more tests

* fixes

* more tests

* still more tests

* still more tests

* fix && more tests

* more tests

* more tests

* docs

* wip

* postcss-custom-media

* wip

* fixes

* fixes

* fixes

* cleanup whitespace

* bring back old tests

* more tests and fixes

* update lock file

* remove todo comment

* fix 'or' conditions

* correctly prefix with not

* better code structure

* fix negation for older browsers

* cleanup

* update test files

* merge

* media query list parser (#659)

* wip

* wip

* wip

* wip

* wip

* finish range

* more work

* lint

* fix ranges

* more work

* media lists

* finish parser

* toJSON

* add a test suite

* more tests

* wip

* lint

* more tests

* wip

* fix range parsing

* docs

* add ancestry utility

* fixes

* fixes

* allow parsing from tokens

* add some convenience methods

* fixes

* more migration

* more convenience methods

* more type predicates

* wip

* fix

* fix

* finish up

* lets get rid of those build errors

* fixes

* fixes

* increase test coverage

* fix + more test coverage

* getter -> method

* fix build + more test coverage

* export  and more test coverage

* cleanup

* cleanup

* cascade-layers : execution order

* update layer examples

* update docs

* wording

* postcss-custom-media : update docs (#692)

* psotcss-custom-media : improve docs

* wording

* wording

* update rollup (#694)

* update rollup

* fix windows support

* postcss-preset-env v8 : tweaks before next alpha (#695)

* postcss-preset-env v8 : tweaks before next alpha

* fix

* typo

* fix

* wrap calls to selector parser in try/catch (#698)

* wrap calls to selector parser in try/catch

* Update plugins/css-blank-pseudo/src/index.ts

* add tokenizer benchmarks and make it ±20% faster

* remove spread operator

* tune terser to have better runtime performance

* more terser config

* more specific terser config

* better benchmarks

* postcss-media-queries-aspect-ratio-number-values (#699)

* merge

* PostCSS Media Queries Aspect-Ratio Number Values 1.0.0

* CSS Tokenizer 1.0.0

* CSS Parser Algorithms 1.0.0

* Media Query List Parser 1.0.0

* PostCSS Custom Selectors 7.0.0

* PostCSS Custom Properties 13.0.0

* PostCSS Custom Media 9.0.0

* PostCSS Cascade Layers 2.0.0

* PostCSS Preset Env 8 Alpha 1

* add postcss-parser-tests for css-tokenizer

* switch to .mjs

* add tslib as an explicit dependency

* few more tests

* postcss-custom-media: avoid complex generated CSS in more cases (#709)

* postcss-custom-media: avoid complex generated CSS in more cases

* undo

* fmt

* more install instructions

* PostCSS Custom Media 9.0.1

* Improving Browser Polyfills docs for Next.js (#716)

* Creating sample doc

* Adding docs for all packages

* shorter label name, max is 50 chars

* design-tokens : add support for at rules (#717)

* design-tokens : add support for at rules

* lint

* more error handling

* optimize

* Update plugins/postcss-design-tokens/src/transform.ts

* document how parallel builders can affect plugins (#724)

* document how parallel builders can affect plugins

* make it clear that postcss-import is not the only solution

* Removing warning on V8

So it goes out once it’s merged

* final typescript conversions (#712)

* final typescript conversions

* postcss-dir-pseudo-class

* export plugin types

* fix

* fix

* fix

* postcss-gap-properties

* lint

* postcss-overflow-shorthand

* postcss-place

* fix

* postcss-pseudo-class-any-link

* one more

* more fixes and typings

* wip

* docs

* typed options for postcss-preset-env

* final fixes

* add to list of plugins in execution order

* clean up

* Update index.ts

* update cssdb

* update CHANGELOG

* changelog

* improve clean commands and reduce impact of changes on the cli package

* lint

* update has pseudo dependencies

* has pseudo : fix cleanup of rules in browsers with native support (#751)

* has pseudo : fix cleanup of rules in browsers with native support

* changelog

* fix cascade layers in combination with nesting and name defining at rules (#739)

* fix cascade layers

* fix

* merge

* custom properties

* postcss-custom-selectors

* document issue

* fix

* cleanup

* build

* update dependencies

* improve logging of enabled features

* more tests

* cascade-layer-name-parser (#755)

* cascade-layer-name-parser

* fixes

* integrate

* fixes and integrate further

* one more test

* better error handling

* cleanup

* rebuild

* update dependencies

* update dependencies

* css-tokenizer and parser-algorithms : fixes and performance improvements (#760)

* css-parser-algorithms : fix unclosed blocks and functions

* add more tests

* one more test

* performance improvements

* improve performance

* wip

* wip

* more performance improvements

* finish up

* improve benchmarks

* little bit faster

* fixes and some convenience methods

* more improvements

* more tests and fixes

* fix

* better error type

* custom media parsing

* fmt

* fix

* add normalization for Simple Block and Function

* more tests

* add css-tokenizer-tests for increased test coverage

* more tests

* update readme's

* css-tokenizer : remove `commentsAreTokens` (#779)

* remove dead code

* postcss-logical-viewport-units (#780)

* postcss-logical-viewport-units

* finish up

* match other logical plugins

* add test with a negative number in a range

* code quality

* one more fix

* simplify consume number

* simplify further

* one more fix

* CSS Tokenizer 2.0.0

* CSS Parser Algorithms 2.0.0

* Media Query List Parser 2.0.0

* Cascade Layer Name Parser 1.0.0

* Update lock

* Selector Specificity 2.1.0

* post release patches (#793)

* rebuild

* remove outdated and obsolote docs

* remove deno support from postcss-nesting (#795)

* text-decoration : fix shorthand in Safari with single node values (#794)

* text-decoration : fix shorthand in Safari with single node values

* update changelog

* update cssdb

* PostCSS Logical revamp (#740)

* Getting started

* wip: starting with single logical on margin

* Updating how the transform works

* Getting block/inline working for padding and margin

* Completing margin and padding

* Enable caption-side, float and clear

* adding support for text-align

* further progress

Resize
Block size and Inline Size
Offsets

* Completing border

* Addiing docs

* Rewriting test

* Missing part of the CHANGELOG

* Removing no longer needed check

* Updating tests

* Updating more tests

* Linting package.json

* feature/logical-revamp-v8 : feedback (#773)

* feature/logical-revamp-v8 : feedback

* Update plugins/postcss-logical/src/utils/parse-value-couple.ts

Co-authored-by: Antonio Laguna <[email protected]>

* undo

* more undo

Co-authored-by: Antonio Laguna <[email protected]>

* Adding missing docs

* Removing `preserve`

* Updating CHANGELOG

* add a few abstract tests with various configs (#775)

* logical : border radius (#776)

* logical : border radius

* fix

* typescript...

* Logical Float and Clear (#781)

* Removing float and clear from logical plugin

* Adding CHANGELOG

* Introducing postcss-logical-float-and-clear

* Preparing labeler and exteernals

* Update plugins/postcss-logical-float-and-clear/docs/README.md

Co-authored-by: Romain Menke <[email protected]>

* Update plugins/postcss-logical/docs/README.md

Co-authored-by: Romain Menke <[email protected]>

* Update .github/labeler.yml

Co-authored-by: Romain Menke <[email protected]>

* Adding to Issue Templates

Co-authored-by: Romain Menke <[email protected]>

* logical-resize (#792)

* logical-resize

* rebuild

* Updating CHANGELOG

* Updating dependencies

* Wire logical into Preset Env and CLI (#798)

* remove extra space

* remove plugin-options for logical

* include new logical plugins

* minor format

* removing redundant if within shared-options

* adding shared logical options to preset-env options

* ensuring logical options get passed

* updating tests

* adding tests for logical options

* removing wrong object

* adding test for logical

* adding clear and resize to the CHANGELOG

* updating tests and built files

* Updating CSSDB

* Generating FEATURES

* update CHANGELOG and README

* Updating tests for ratios

* Adding missing example

* Updating CLI

* rebuild

* a few tweaks and some more tests

Co-authored-by: Romain Menke <[email protected]>
Co-authored-by: Romain Menke <[email protected]>

Co-authored-by: Romain Menke <[email protected]>
Co-authored-by: Romain Menke <[email protected]>

* housekeeping

* last tweaks

Co-authored-by: Antonio Laguna <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants