Invalid `:after .header` selector

[devmao]

I think this is a not valid selector because pseudo-element cannot have a child. Also, Parcel emits an error when processing the Semantic-UI CSS on that line:

[data-tooltip][data-inverted]:after .header {
  background-color: none;
  color: #FFFFFF;
} 

/*--------------
    Position
---------------*/

[isitgeorge]

+1

[lplip]

Here is the same.

[cancerberoSgx]

+1 somebody reported an issue on parcel and they closed it on their right since according to them this is a CSS syntax error: https://github.com/parcel-bundler/parcel/issues/7963

[lplip]

Is there any way that i can help with that (fix the invalid css, create a PR) ? currently we just fork the repo...

[cancerberoSgx]

just try to compile a project importing import 'semantic-ui-css/semantic.css'with latests version of parcel and you will notice the errors.

[jstrese]

We just ran into this as well with Parcel.

@parcel/transformer-css: Unexpected token Delim('.')

  /node_modules/semantic-ui-css/semantic.min.css:308:4401
    307 |  *
  > 308 | after .header{background-color:none;color:#fff}[data-position="top center"][data-tooltip]:after{top:auto;right:auto;left:50%;bottom:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%);mar
  >     |      ^
    309 |  * # Semantic UI 2.4.0 - Progress Bar
    310 |  * http://github.com/semantic-org/semantic-ui/

[isitgeorge]

You can workaround this by excluding the popup component from being imported.

Create semantic-css.js:

import 'semantic-ui-css/components/accordion.min.css'
import 'semantic-ui-css/components/ad.min.css'
import 'semantic-ui-css/components/breadcrumb.min.css'
import 'semantic-ui-css/components/button.min.css'
import 'semantic-ui-css/components/card.min.css'
import 'semantic-ui-css/components/checkbox.min.css'
import 'semantic-ui-css/components/comment.min.css'
import 'semantic-ui-css/components/container.min.css'
import 'semantic-ui-css/components/dimmer.min.css'
import 'semantic-ui-css/components/divider.min.css'
import 'semantic-ui-css/components/dropdown.min.css'
import 'semantic-ui-css/components/embed.min.css'
import 'semantic-ui-css/components/feed.min.css'
import 'semantic-ui-css/components/flag.min.css'
import 'semantic-ui-css/components/form.min.css'
import 'semantic-ui-css/components/grid.min.css'
import 'semantic-ui-css/components/header.min.css'
import 'semantic-ui-css/components/icon.min.css'
import 'semantic-ui-css/components/image.min.css'
import 'semantic-ui-css/components/input.min.css'
import 'semantic-ui-css/components/item.min.css'
import 'semantic-ui-css/components/label.min.css'
import 'semantic-ui-css/components/list.min.css'
import 'semantic-ui-css/components/loader.min.css'
import 'semantic-ui-css/components/menu.min.css'
import 'semantic-ui-css/components/message.min.css'
import 'semantic-ui-css/components/modal.min.css'
import 'semantic-ui-css/components/nag.min.css'
import 'semantic-ui-css/components/placeholder.min.css'
// import 'semantic-ui-css/components/popup.min.css'
import 'semantic-ui-css/components/progress.min.css'
import 'semantic-ui-css/components/rail.min.css'
import 'semantic-ui-css/components/rating.min.css'
import 'semantic-ui-css/components/reset.min.css'
import 'semantic-ui-css/components/reveal.min.css'
import 'semantic-ui-css/components/search.min.css'
import 'semantic-ui-css/components/segment.min.css'
import 'semantic-ui-css/components/shape.min.css'
import 'semantic-ui-css/components/sidebar.min.css'
import 'semantic-ui-css/components/site.min.css'
import 'semantic-ui-css/components/statistic.min.css'
import 'semantic-ui-css/components/step.min.css'
import 'semantic-ui-css/components/sticky.min.css'
import 'semantic-ui-css/components/tab.min.css'
import 'semantic-ui-css/components/table.min.css'
import 'semantic-ui-css/components/transition.min.css'
import 'semantic-ui-css/components/video.min.css'

and replace your existing import 'semantic-ui-css/semantic.min.css' with import './semantic-css'.

Obviously if you're using the popup component you'll have to take it one step further and copy the source of semantic-ui-css/components/popup.min.css, fix the offending line, and add it to the end of the new file.

[domenkozar]

Thanks @isitgeorge