search

csscomb / csscomb.js

CSS coding style formatter
http://csscomb.com/
MIT License
3.29k stars 457 forks source link

Cannot set property 'atrulers_end' of undefined CSScomb #579

Closed Lyricsa closed 5 years ago

Lyricsa commented 6 years ago

(First post, totally new to coding, Atom, and CSScomb, be gentle)

Been using NotePad++ and heard about Atom yesterday. I love some of the things Atom can do, so I want to switch editors. I installed CSSComb, along with Atom-beautify, but when I run it, I'm getting an error. I made the .csscomb.json on the website build your own config, and it's in my project dir.

This is the error when I try to do Packages>Atom Beautify>Beautify:

Cannot set property 'atrulers_end' of undefined CSScomb Core version: 4.2.0

When I do Packages>CSSComb>Sort, nothing happens. When I save, I get the atrulers error. Here's the CSS file I'm trying to use it on. Please don't laugh too hard, I know it's terrible!

Also, I tried to run it through CSSComb try online, and get this message:

Something went wrong. Please make sure that you're trying to comb a valid CSS (not Sass or Less). Or maybe you forgot a closing brace?

Here is an error message:

Please check the validity of the block starting from line #undefined

Gonzales PE version: 3.0.0-28 Syntax: undefined

I've run the W3C validator and it's only pulling errors from the font awesome css.

`

body { background: linear-gradient(to bottom right, #CB001C, white, #2a3560); background-attachment: fixed !important; font-family: 'Raleway Medium', sans-serif; color: #2a3560; }

main { width: 85%; border: 3px solid #2a3560; border-radius: 25px; margin:auto; background-color: white; }

.center { width: 100%; border-radius: 22px; margin:auto auto; }

header { display: flex; align-items: center; height: auto; }

logo {

height:  150px;
margin:  10px;

}

logotext {

font-family: 'Roboto', sans-serif;

}

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; }

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.17em; }

h4 { font-size: 1.12em; }

h5 { font-size: .83em; }

h6 { font-size: .75em; }

/ unvisited link / a:link { color: #0000EE; text-decoration: none; }

/ visited link / a:visited { color: #CB001C; text-decoration: none; }

/ mouse over link / a:hover { color: #1E90FF; text-decoration: underline; }

/ selected link / a:active { color: #4B0082; text-decoration: none; }

/Navigation/

.topnav { background-color: #2a3560; overflow: hidden; }

.topnav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }

.active { background-color: #CB001C; color: white; }

.topnav .icon { display: none; }

.dropdown { float: left; overflow: hidden; }

.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; }

.dropdown-content { display: none; position: absolute; background-color: #2a3560; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; color: white; }

.dropdown-content a { float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }

.topnav a:hover, .dropdown:hover .dropbtn { background-color: #CB001C; color: white; }

.dropdown-content a:hover { background-color: #ddd; color: #2a3560; }

.dropdown:hover .dropdown-content { display: block; }

@media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } }

@media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }

/End Navigation/

.single { background-color: white; box-sizing: border-box; padding: 25px; color: #2a3560; }

.one { float: left; width: 15%; background-color: yellow; box-sizing: border-box; padding: 25px; }

.two { float: left; width: 50%; background-color: white; box-sizing: border-box; padding: 25px; flex: 1; }

.three { float: left; width: 50%; background-color: white; box-sizing: border-box; padding: 25px;

}

.four { float: left; width: 15%; background-color: yellow; box-sizing: border-box; padding: 25px; }

.left { float: left; width: 15%; box-sizing: border-box; padding: 25px; }

.middle { float: left; width: 70%; background-color: #CB001C; box-sizing: border-box; padding: 10px; display: flex; }

.right { float: left; width: 15%; background-color: yellow; padding: 10px 10px 10px 10px; box-sizing: border-box; padding: 25px; }

.mha { font-weight: bold; color: #CB001C; }

.footer { position: relative; color: #ccc2a0; background-color: #2a3560; height: 150px; clear: both; width: 100%; border-radius: 0px 0px 20px 20px; }

.footer1 { float: left; width: 25%; background-color: yellow; box-sizing: border-box; padding: 5px; border-radius: 0px 0px 0px 20px; }

.footer2 { float: left; width: 25%; background-color: lightblue; box-sizing: border-box; padding: 5px; }

.footer3 { float: left; width: 25%; background-color: cyan; box-sizing: border-box; padding: 5px; }

.footer4 { float: left; width: 25%; background-color: yellow; box-sizing: border-box; padding: 5px; border-radius: 0px 0px 20px 0px; }

.statesone, .statestwo, .statesthree, .statesfour, .statesfive, .statessix, .statesseven { float: left; width: 14.285%; box-sizing: border-box; padding: 1px; background-color: white; }

.usaf, .usa, .uscg, .usmc, .usn { float: left; width: 20%; box-sizing: border-box; padding: 1px; background-color: white; }

.middletop, .middlebottom { background-color: white; box-sizing: border-box; padding: 25px; }

nobullets {

list-style-type: none;
line-height: 1.6;

}

mid {

text-align:  center;

}

@media screen and (max-width : 767px) { .left, .middle, .middletop, .two, .three, .usaf, .usa, .uscg, .usmc, .usn, .right, .middlebottom, .footer1, .footer2, .footer3, .footer4 { width: 100%; float: none; margin: 0; }

/Support Groups Tables /

table.supportgroups { width: 100%; text-align: left; border-collapse: collapse; } table.supportgroups td, table.supportgroups th { padding: 3px 2px; } table.supportgroups tbody td { font-size: 13px; font-weight: bold; color: #2A3560; } table.supportgroups thead { } table.supportgroups thead th { font-size: 17px; font-weight: bold; color: #2A3560; text-align: center; } table.supportgroups tfoot td { font-size: 14px; } table.supportgroups tfoot .links { text-align: right; } table.supportgroups tfoot .links a{ display: inline-block; background: #1C6EA4; color: #FFFFFF; padding: 2px 8px; border-radius: 5px; }

.cbold { text-align: center; font-weight: bold; font-size: 15px; color: #CB001C; }

/End Support Groups Tables /

`

scivola commented 5 years ago

The CSS is invalid.

[1]

/Navigation/

Not correct comment format.

[2]

/End Navigation/

Same as [1]

[3]

@media screen and (max-width : 767px) {

Missing closing }.

I think the cause of the error is the above.

However, the error message is not easy to understand. I had confused the error, too.