Development Mode CSS using own barceloneta-based theme

plone / Products.CMFPlone

The core of the Plone content management system

https://plone.org

GNU General Public License v2.0

255 stars 191 forks source link

Development Mode CSS using own barceloneta-based theme #3840

Open woolyseal opened 1 year ago

woolyseal commented 1 year ago

BUG/PROBLEM REPORT

Developing CSS for own barceloneta-based theme seems to not fully work as expected - in development-mode (registry) and with a development-client it won't show the split up CSS files in development tools in browsers etc.

What I did:

Installed a new Plone 6.0.6
Installed the newest ploncecli
created an addon with plonecli
created an theme based on the barceloneta-theme with plonecli
npm run watch and added some variables in the .scss
adding the development-css attribute in the manifest.cfg in my theme

What I expect to happen:

development tools will use the not compressed CSS file/map to show where exactly CSS attributes are set and can be overwritten

What actually happened:

the normal compressed CSS shows up (theme.css) and no division happens between all those SCSS files it was build from

What version of Plone/ Addons I am using:

Plone 6.0.6 Classic UI Barceloneta based
Only Addon in this installation is EasyForm (4.1.4)

woolyseal commented 1 year ago

Addendum

It seems that if you change back to the barceloneta theme (over design configuration) the development-css of that theme will be used

woolyseal commented 1 year ago

Thoughts

I played around a bit and checked the different files - something I stumbled upon is the "sources" and "sourceRoot" in the css Files. Maybe those can't be read by the development tools or something like that... still shouldn't be a thing if you use official tools. Will investigate some more and update here if I find something

woolyseal commented 1 year ago

Update

Okay - it seems there are 2 problems. First one is the ignorance of the "development-css" in the manifest as I described above and therefore still a CMFPlone Problem I guess.

The other one is that the compilation of the CSS files and maps seems to be off. After some research and a lot of help I added a postcss.config.js with the following code in my theme:

module.exports = { map: false, }

Now the Source Maps seem to be okay when I have the manifest.cfg updated to:

production-css = ++theme++my-theme/styles/theme.css

I don't now where to put an Issue for the second problem. Any suggestions?