jotform / css.js Goto Github PK
View Code? Open in Web Editor NEWA lightweight, battle tested, fast, CSS parser in JavaScript
Home Page: https://medium.com/jotform-form-builder/writing-a-css-parser-in-javascript-3ecaa1719a43
License: MIT License
A lightweight, battle tested, fast, CSS parser in JavaScript
Home Page: https://medium.com/jotform-form-builder/writing-a-css-parser-in-javascript-3ecaa1719a43
License: MIT License
I wanted to try out the demo when I noticed that it was broken.
Refused to execute script from 'https://raw.githubusercontent.com/jotform/css.js/master/css.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
Uncaught ReferenceError: cssjs is not defined
Why this is happening is described here
Try to parse this:
.someSelector
{
margin:40px 10px;
padding:5px; /* This is { blue } */
}
You will get this:
[
{
"selector": ".someSelector",
"rules": [
{
"directive": "margin",
"value": "40px 10px"
},
{
"directive": "padding",
"value": "5px"
},
{
"directive": "",
"value": "/* This is { blue",
"defective": true
}
]
}
]
Similar to reworkcss/css#24
For client side, any specific reason not to just use CSSOM?
http://jsfiddle.net/v2JsZ/
hi,
i have a requirement where i want to modify the parsed css and then replace it in style tag,
for example:
<style id="customCss">
.someClass {
margin : 20px;
}
@media (max-width: 600px) {
.someClass {
margin : 5px;
}
}
</style>
i want to parse rule without media query, and modify it and then replace it back in style tag, how to achieve that?
basically i want this to turn into following output:
<style id="customCss">
.someClass {
margin : 10px;
padding:5px;
}
@media (max-width: 600px) {
.someClass {
margin : 5px;
padding:0;
}
}
</style>
Using } in a content
property breaks the parsing:
.someSelector:after { content: '} broken :) @media (screen) { lol }'; }
Hello there, we encountered a bug with @media print queries:
This works perfectly:
@media (max-width:360px){ .test{ top : 230px; } } @media print{ }
This breaks:
@media (max-width:360px){ } @media print{ .test{ top : 230px; } }
With this rigged output:
[ { "selector": "@media (max-width:360px)", "type": "media", "subStyles": [ { "selector": "}\n@media print", "type": "media", "subStyles": [] } ] } ]
Hello!
Happy and Thanks!! Just wanted to provide an example where parse does not handle the comments, but put them into the 'object.directive' instead.
<style>
:root
{
--col-bg: #ffffff; /* Background */
--col-fg: #003344; /* Foreground */
--col-bg-main: rgba(255,255,255,0.8); /* background of content-area */
}
</style>
I would love to be able to edit the parsed object and then stringify it back to CSS.
comment for example /* height:10px;*/
is getting parsed as a css directive.
Hi, tested 3 css parsing libraries before this one. Brilliant and thanks!
Found small bug regarding css parse removing a semicolon..
This css:
"background-image: url('data:image/jpeg;base64,/9j/4AAQSkZ.."
Becomes:
"background-image: url('data:image/jpegbase64,/9j/4AAQSkZ.."
The fix:
Line 181 was:
ret[ret.length - 1].value += line.trim();
Should be: (note line is trimmed already above)
ret[ret.length - 1].value += ';'+line;//.trim();
We use Liquid to render our HTML for various media contexts. Part of our workflow has our design teams trying to provide common logic assignments to various parts of the HTML, including css. So they sometimes tend to use a placeholder variable in CSS.
Something like the following is a common use case:
.someClass { color: {{ some_placeholder }} }
In these cases, the parsing regex chokes on encountering unexpected {{
}}
since they're not valid CSS syntax. I've looked through the code and produced the following regex adjustment and test case. This regex goes out of its way to maintain the existing behavior and not require code changes in css.js
and fix the underlying problem of {{
}}
.
https://regex101.com/r/t99mX4/1/
In addition, I've created a fork and am assembling a PR with more unit tests to cover this case. It doesn't cover some of the other issues filed here, like an empty @media
query, but certainly could be expanded to do so with a bit of further refinement.
It is better to use just npm for simplicity
In css.js, there appears to be logic for special behavior for selectors such as '.form-all'
, '#stage'
, and '.supernova'
. Am I right in assuming that these are specific to the use case that this tool was first developed for and are not related to general CSS rules?
The section with these selector names is here:
Lines 568 to 582 in f970443
https://github.com/closingtag/calc-polyfill#specificity
If not, what are the chances of getting it integrated? Is there a technical limitation?
Would be good to change the way comments are handled instead of going down the current route: https://github.com/jotform/css.js/blob/master/css.js#L179-188
Not sure what overall strategy would be
Hi.
I just observed an issue where background: url('data:image/svg+xml;charset=utf-8,<svg%20version%...
becomes invalid CSS due to a linebreak after semicolon:
background: url('data:image/svg+xml;
charset=utf-8,<svg%20version%...
(This is in the "funky" theme of Prism.js)
I have a very limited scope in my project so I will "fix" the problem using a simple string operation, but I wanted to report the case here.
I don't believe I'll have time for an actual fix and PR, but will report if I do.
In case somebody stumbles across this and needs a naive but simple solution, the workaround for my particular example goes something like this:
const prefixedCss = parser
.getCSSForEditor(namespaced)
// see https://github.com/jotform/css.js/issues/28
.replace(/svg\+xml;\n /, 'svg+xml;');
Could you provide an export of the library to import it with es6 module?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.