Comments (4)
yeah i've considered doing this. but the size gain would be small while the speed hit would be exponential and there would be perf landmines everywhere. a single *
, :not(.foo)
, div:nth-of-type(3)
and you're in for a bad time.
i'd like to see a convincing practical case on a realistic mid-size page where the wins outweigh the costs.
from dropcss.
I feel like it'd be fairly easy to memoize the results and make it more efficient, although it'll still be way slower than if it weren't added. That said, I haven't looked to hard at the code and don't know how exactly that would be done.
I mostly put the issue here to see if there were decent use cases; maybe someone out there has a compelling example. :p
from dropcss.
let's work through it on paper. the main idea is to ensure that a less qualified selector results in the same nodes as the full one. take #a .b > c.foo
. step one is to get a full set of nodes, let's call it Set0
. we then try to reduce the qualifiers right-to-left and test for equivalence to Set0
:
.foo
c
c.foo
.b > c
.b > c.foo
.b > .foo
...
...
#a b > .foo
#a c.foo
#a c
#a .foo
essentially it's a powerset of sub-selectors:
let sets = generatePowerSet([
"#a ",
".b >"
"c",
".foo",
]);
with the condition that at least c
or .foo
is part of the set, which probably means that ["c", ".foo"]
has to be a sub-powerset.
and this is just for a single selector. memoization (which dropcss uses extensively) won't really help you too much here. dropcss actually has all the internal functions needed: a selector parser, an html parser, and a matcher that can test a parsed selector against the parsed html. if you are interested in prototyping this and doing the memoization externally, i can expose each of these functions and it would simply be a matter of mutating the parsed selector array to test each case. this would also go a long way towards what's needed for #32.
from dropcss.
i'm actually not sure this is going to work out even if all the above is done. the reason is that selector specificity matters. even if you can match the same set of elements in isolation, the order of your rules may prevent the same application of styles, and figuring out how to avoid this is simply not feasible without basically writing a spec-compliant CSS engine.
an easy example of this is removing li
from li.foo
in [1]. in isolation it would still only match a single element, but would fail to apply the styling.
[1] https://codepen.io/anon/pen/zgverp
from dropcss.
Related Issues (20)
- attributes with : HOT 5
- Gulp task HOT 1
- support custom property fallback values
- PostCSS plugin HOT 5
- Nextjs integration example HOT 4
- didRetain() instead of result.sels HOT 2
- Using DropCSS with a Ghost blog HOT 1
- didRetain missing in npm published version HOT 3
- Enable hooks to drop / retain individual css declarations HOT 1
- As a postcss plugin ? HOT 1
- Whitespace inside a closing html tag breaks the parser HOT 6
- `NASTIES` regex incorrectly matches custom elements HOT 2
- Trying to get in touch regarding a security issue HOT 1
- new selectors and nesting HOT 1
- css selector parser cannot advance past unsupported pseudo classes with parenthesis HOT 7
- Class names containing html/body/head do not get dropped HOT 2
- Version Drift HOT 1
- Cannot read property '1' of null HOT 1
- Infinite loop on ":where" selector HOT 2
- Provide TypeScript type definitions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dropcss.