search

kaystrobach / TYPO3.dyncss_less

Dyncss Less Adapter
http://forge.typo3.org/projects/extension-dyncss
5 stars 14 forks source link

Pfade in "background: url(...)" werden nicht angepasst. #1

Closed vaxul closed 7 years ago

vaxul commented 11 years ago

EDIT Ich denke, dass dieses Issue wohl doch bei "dyncss" einsortiert werden sollte. /EDIT

Testsystem: TYPO3 CMS v4.6.18 mit dyncss v0.2.6 und dyncss_less v0.2.5

Ein Beispielausschnitt

Ausgangsdatei styles.less:

.button-style {
    display: block;
    background: url(../design-images/button-sprite.png) 0 0 no-repeat;
    cursor: pointer;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}

style.less-982ba536-a253e820-fc7495da.less:

.button-style {
    display: block;
    background: url(../design-images/button-sprite.png) 0 0 no-repeat;
    cursor: pointer;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}

style.less-982ba536-a253e820-fc7495da.cache:

.button-style {
  display: block;
  background: url(../design-images/button-sprite.png) 0 0 no-repeat;
  cursor: pointer;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

Enddatei style.less-982ba536-a253e820-fc7495da.css

.button-style {
  display: block;
  background: url(../design-images/button-sprite.png) 0 0 no-repeat;
  cursor: pointer;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

Bei weiteren Fragen stehe ich zur Verfügung. ;)

vaxul commented 11 years ago

Also das Problem scheint der Reguläre Ausdruck in dyncss/Classes/Parser/AbstractParser.php - Zeile 62 zu sein.

Statt...

url\\([\'"]?([^\'"]*)["\']?\\);

... müsste es eigentlich doch eigentlich wie folgt sein

url\([\'"]?([^\'"]*)["\']?\)

Siehe Beispiel: Regex Tester

Also....

preg_match_all('|url\\([\'"]?([^\'"]*)["\']?\\);|Ui', $string, $matches);

wird zu...

preg_match_all('|url\([\'"]?([^\'"]*)["\']?\)|Ui', $string, $matches);

Nach der Anpassung klappt's bei mir sofort. =)

vaxul commented 11 years ago

Also es funktioniert, allerdings kommt da gerade noch folgendes bei raus.

.button-style {
  display: block;
  background: url(../../../../fileadmin/public/stylesheets/../../../../fileadmin/public/stylesheets/../../../../fileadmin/public/stylesheets/../design-images/button-sprite.png) 0 0 no-repeat;
  cursor: pointer;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}

Vielleicht finde ich hier auch noch die Ursache.

kaystrobach commented 11 years ago

ich guck mir das an, es muss ja auch im backend gehen :D

danke für den hinweis

kaystrobach commented 11 years ago

kannst du mir bitte noch dein TS geben? Bindest du das less via EXT:... oder direkt als Pfad ein?

vaxul commented 11 years ago

Das stimmt natürlich. Hab's nur im Frontend getestet.

# Stylesheets
page.includeCSS {
    file1 = fileadmin/public/stylesheets/style.less
    file1 {
        media = all
    }
}

Also direkt.

Lobster1956 commented 11 years ago

ich habe das gleiche Problem... aber die Modifikation des regulären Ausdrucks bringt bei mir keine Wirkung... ich binde es auch per page.includeCSS ein es ist ein zentrales .less file in dem per @import weitere nachgeladen werden

weder normale relative Pfade in background Anweisungen werden umgeschrieben, noch diejenigen wo die Bilder per LESS-Variable eingefügt werden erst wenn ich die Variablen per override verändere, dann kann ich einen richtigen Pfad manuell setzen (aber das kann ja keine Lösung sein)

kaystrobach commented 11 years ago

could you please provide an example file -> thanks

Lobster1956 commented 11 years ago

Am 23.06.2013 20:48, schrieb Kay Strobach:

could you please provide an example file -> thanks

here is the content of the basic .less file i have reduced it, and put a TEST part directly in it...

the output of the generated file is always with the original path:

header {background: red

url("../../images/dummy-layout/header_background.jpg") no-repeat; }

header .inner {background: red

url("../../images/dummy-layout/header_background.jpg") no-repeat; }

/* LESS VARIABLEN */ @coreFile: '../../_frameworks/yaml/core/base.css - ThisIsModifiedByTyposcript'; @layoutTypeFile: 'screen/FULLPAGE-layout.css - ThisIsModifiedByTyposcript'; @layoutModFile: 'screen/mod-std-MCS.css - ThisIsModifiedByTyposcript'; @layoutFile0: 'screen/layout.css - ThisIsModifiedByTyposcript'; @layoutFile1: 'emptyFile.less - ThisIsModifiedByTyposcript'; @layoutFile2: 'navigation/hlist.css - ThisIsModifiedByTyposcript'; @layoutFile3: 'navigation/vlist.css - ThisIsModifiedByTyposcript'; @layoutFile4: 'emptyFile.less - ThisIsModifiedByTyposcript'; @layoutFile5: 'jquery/custom-theme/jquery-ui-1.8.19.custom.css - ThisIsModifiedByTyposcript'; @layoutFile6: 'screen/form-theme.css - ThisIsModifiedByTyposcript'; @layoutFile7: 'screen/typography.less - ThisIsModifiedByTyposcript'; @layoutFile8: 'screen/typo3-RTE.css - ThisIsModifiedByTyposcript'; @layoutFile9: 'emptyFile.less - ThisIsModifiedByTyposcript'; @layoutFilePrint: 'print/print.css - ThisIsModifiedByTyposcript';

/* all variables will be set here */ @baseColor: red; @header-background-image: "../../images/dummy-layout/header_background.jpg";

/* TEST (the problem is the same in the importet files) */

header {background: @baseColor

url("../../images/dummy-layout/header_background.jpg") no-repeat; }

header .inner {background: @baseColor url(@header-background-image)

no-repeat; }

/* Google Font API */ @import url(http://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans:700);

/* import core styles | Basis-Stylesheets einbinden */ @import url(@coreFile); @import url(@layoutTypeFile); @import url(@layoutModFile); @import url(@layoutFile0); @import url(@layoutFile1); @import url(@layoutFile2); @import url(@layoutFile3); @import url(@layoutFile4); @import url(@layoutFile5); @import url(@layoutFile6); @import url(@layoutFile7); @import url(@layoutFile8); @import url(@layoutFile9); @import url(@layoutFilePrint);

image[FORMAT] - Ralf-René Schröder http://www.image-format.eu ... Wir geben Ihrem Image das richtige Format

kaystrobach commented 11 years ago

will be fixed soon, i havent ever tried to store files in fileadmin always used a place somewhere in typo3conf/ext/whatever/Resources/Public/Stylesheets/main.less :D

https://github.com/kaystrobach/TYPO3.dyncss/blob/master/Classes/Parser/AbstractParser.php#L69

Lobster1956 commented 11 years ago

do you hav a Plan when this wil be fixed ???

it is not only in fileadmin, also when i include a .less file via TypoScript like this: TSconstants: iff.layoutpath = /typo3conf/ext/iff/Resources/project/template_data/layout/

TSsetup: page.includeCSS { basicStyleFile = {$iff.layoutpath}page/css/basicStyleFile.less }

basicStyleFile.less file (it is also the ONLY CSS/LESS file in the whole Testsystem): /* test for relative path */ @header-background: url('../../images/dummy-layout/header_background.jpg'); @media screen {

header { background-image: @header-background; }

main {background-image:url('../../images/dummy-layout/main_background.jpg'); }

}

Frontend: the pathes is in CSS output are NOTmodified, and of course it could not work from the location of the temp file...

kaystrobach commented 11 years ago 
iff.layoutpath = EXT:iff/Resources/project/template_data/layout/

should do the trick for you

Lobster1956 commented 11 years ago

sorry, it does not... no relative path is modified... (and if it had done, than it is only a workaround, for those who use my framework, i need the function with relative path in ANY file location, also in fileadmin)

EDIT: and an absolute URL: url(/fileadmin/header_background.jpg) is modified to: url(../../../..//fileadmin/header_background.jpg) (it works, but is not nessesary)

with http:// in it, it works like expected, it is not modified...

kaystrobach commented 11 years ago

I plan to spend some time for Themes and dyncss next week

Ralf-René Schröder notifications@github.com schrieb:

sorry, it does not... no relative path is modified... (and if it had done, than it is only a workaround, for those who use my framework, i need the function with relative path in ANY file location, also in fileadmin)

— Reply to this email directly or view it on GitHub.

instance-pro commented 9 years ago

Fixed in #12 Need testers for Feedback