Comments (5)
Awesome—thanks for the quick response. I upgraded to the 1.0.13
version you just pushed and the previous (above) errors in my production codebase are also no more! Confirmed fix on my end too.
from dropcss.
Update: it seems the problem isn't BEM alone. The block--modifier::before
(BEM + pseudo-element) pattern is getting captured by the regex for processing CSS variables (e.g. --css-var-color: brown;
) in the output function here: CUSTOM_PROP_DEF
Here's another test:
const dropcss = require('dropcss');
let html = `
<html>
<head></head>
<body>
<div class="anything">anything 1</div>
<div class="anything anything--modified">anything 2</div>
</body>
</html>
`;
let css = `
:root {
--main-color: deeppink;
}
.anything {
display: inline-flex;
background: var(--main-color);
}
.anything::before {
color: deepskyblue;
}
.anything--modified {
color: crimson;
}
.anything--modified::before {
color: tomato;
}
.anything--modified::after {
color: papayawhip;
}
`;
let cleaned = dropcss({
html,
css,
});
console.log(cleaned);
/*
{ css:
':root{--main-color: deeppink;}.anything{display: inline-flex;\n background: var(--main-color);}.anything::before{color: deepskyblue;}.anything--modified{color: crimson;}.anything}.anything}',
sels:
Set {
':root', '.anything',
'.anything::before',
'.anything--modified',
'.anything--modified::before',
'.anything--modified::after' } }
*/
Again, the final .anything--modified::before {...}
rule is truncated to .anything}
because of the CUSTOM_PROP_DEF
regex.
I'm not sure if this is the appropriate fix or not, but adding a negative-lookbehind (how to do this in JS?) for any word-char seems hone the regex to only CSS vars (because CSS vars should always begin with --
without anything before, unlike a BEM modifier which has the ELEMENT preceding the --
bit).
Original CUSTOM_PROP_DEF regex: https://regex101.com/r/0sb17w/2
Modified CUSTOM_PROP_DEF regex: https://regex101.com/r/0sb17w/3 (possible in JS?)
from dropcss.
hey @saltymouse
thanks for the repro and diagnosis.
I'm not sure if this is the appropriate fix or not, but adding a negative-lookbehind (how to do this in JS?)
lookbehinds are pretty new in js: https://caniuse.com/#feat=js-regexp-lookbehind, so i'd prefer not to use them.
we can probably get away with just capturing any non-word char at the start of the match via ([^\w])
and tweak some of the replace()
bits: https://regex101.com/r/0sb17w/5
wanna give it a go?
from dropcss.
actually \w
might be too loose, eg: .--foo:hover{}
is a valid class. maybe ([{};])\s*
would be better.
https://regex101.com/r/0sb17w/6
from dropcss.
ok, this should be fixed now. i tried both of your cases in https://codepen.io/leeoniya/pen/LvbRyq and they work as expected.
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.